Revision 907481 of NativeWindow

<div class="note">The NativeWindow object is only available to privileged code running on <a href="/en/Mozilla/Firefox_for_Android" title="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox for Android</a>, and is intended for use by Firefox for Android add-ons.</div>

<p>The <code>NativeWindow</code> object enables Firefox for Android add-ons to create user interface components.</p>

<p><code>NativeWindow</code> is available as a property of the chrome <code>window</code> object. For example, if you use <a href="/en/Extensions/Mobile/Initialization_and_Cleanup" title="https://developer.mozilla.org/en/Extensions/Mobile/Initialization_and_Cleanup">this template for initializing your extension</a>, you can access it from the <code>window</code> argument passed into <code>loadIntoWindow()</code>:</p>

<pre class="brush: js">
function loadIntoWindow(window) {
  window.NativeWindow.toast.show("I'm starting!", "short");
}
</pre>

<p>You can also access the chrome window using <code>nsIWindowMediator</code>:</p>

<pre class="brush: js">
let window = Services.wm.getMostRecentWindow("navigator:browser");
window.NativeWindow.toast.show("Here's another toast message!", "short");
</pre>

<p>Obtain NativeWindow object with add-on SDK:</p>

<pre class="brush: js">
// Obtain commonly used services : Services.jsm
// https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Services.jsm
const { Services } = require("resource://gre/modules/Services.jsm");

function getNativeWindow() {

	let window = Services.wm.getMostRecentWindow("navigator:browser");
	return window.NativeWindow;

}
</pre>

<p>The <code>NativeWindow</code> object enables developers of Firefox for Android add-ons to create UI components.</p>

<p>It supports the following components:</p>

<ul>
 <li><a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/menu">Menu items</a></li>
 <li><a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/doorhanger">Doorhanger notifications</a></li>
 <li><a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/contextmenus">Context menus items</a></li>
 <li><a href="/en-US/Add-ons/Firefox_for_Android/API/NativeWindow/toast">Android toast alerts</a></li>
 <li><a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/pageactions">Page actions</a> {{deprecated_inline("34")}}</li>
</ul>

<h2 id="menu">menu</h2>

<p>Add items to the main menu in Firefox for Android. See the <a href="/en/Extensions/Mobile/API/NativeWindow/menu">menu</a> API documentation.</p>

<pre class="brush:js;">
/*
label: menu label
icon: file:// or data: URI for an icon
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
let id = NativeWindow.menu.add(label, icon, callback);
NativeWindow.menu.remove(id);
</pre>

<h2 id="doorhanger">doorhanger</h2>

<p>Show and hide doorhanger notifications. See the <a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/doorhanger">doorhanger</a> API documentation.</p>

<pre class="brush:js;">
/*
message: displayed text
value: string based tag
buttons: array of JS objects used to create buttons in the notification
tabId: tab associated with this notification
options: JS object that has 'persistence' and 'timeout' options
*/
NativeWindow.doorhanger.show(message, value, buttons, tabId, options);
NativeWindow.doorhanger.hide(value, tabId);
</pre>

<h2 id="contextmenus">contextmenus</h2>

<p>Add and remove context menu items. See the <a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/contextmenus">contextmenus</a> API documentation.</p>

<pre class="brush:js;">
/*
label: menu label
selector: JS object that has a 'matches(element)' function. Used to show the menu.
callback: JS function called when menu is tapped
returns a menu ID that can be used to remove the menu
*/
let id = NativeWindow.contextmenu.add(label, selector, callback);
NativeWindow.contextmenu.remove(id);
</pre>

<h2 id="toast">toast</h2>

<p>Show <a class="external" href="https://developer.android.com/guide/topics/ui/notifiers/toasts.html" title="https://developer.android.com/guide/topics/ui/notifiers/toasts.html">Android toast notifications</a>. See the <a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/toast">toast</a> API documentation.</p>

<pre class="brush:js;">
/*
message: displayed text
duration: "short" or "long"; Used for alert timeout
*/
NativeWindow.toast.show(message, duration);
</pre>

<p>&nbsp;</p>

<h2 id="pageactions">pageactions</h2>

<p>Add and remove pageactions, i.e. clickable indicators in the URL bar. See the <a href="/en-US/docs/Extensions/Mobile/API/NativeWindow/pageactions">pageactions</a> API documentation.</p>

<div class="warning">
<p>NativeWindow.pageactions was deprecated in Firefox 34. Use the new <a href="/en-US/Add-ons/Firefox_for_Android/API/PageActions.jsm">PageActions.jsm</a> instead.</p>
</div>

<pre class="brush:js;">
/*
title: Pageaction title
icon: Icon image for the pageaction
clickCallback: Callback called when pageaction is clicked
longClickCallback: Callback called when pageaction is long pressed
*/
let options = {
  title: "title",
  icon: "chrome://myaddon/skin/image.png",
  clickCallback: function() { },
  longClickCallback: function() { } (optional)
};

//Adding pageaction
let id = NativeWindow.pageactions.add(options);

//Remove pageaction
NativeWindow.pageactions.remove(id);
</pre>