mozilla

Revision 501233 of doorhanger

  • Revision slug: Mozilla/Add-ons/Firefox_for_Android/API/NativeWindow/doorhanger
  • Revision title: doorhanger
  • Revision id: 501233
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment Extensions/Mobile/API/NativeWindow/doorhanger Mozilla/Add-ons/Firefox_for_Android/API/NativeWindow/doorhanger

Revision Content

The NativeWindow object is only available to privileged code running on Firefox for Android, and is intended for use by Firefox for Android add-ons.

Summary

Returns a reference to the NativeWindow.doorhanger object, which can be used to display doorhanger notifications (also known as popup notifications) on Firefox for Android.

Doorhanger notifications provide a way to present decisions to users which is less intrusive than a modal dialog. You can display a doorhanger using NativeWindow.doorhanger.show(). On Firefox for Android a doorhanger displays a title and an array of buttons for the user choices: selecting a button calls the corresponding callback function. Doorhangers are attached to a specific tab, and you can control the doorhanger's persistence.

You can close a doorhanger explicitly using NativeWindow.doorhanger.hide().

Example

In the example below, an add-on adds a new menu item labeled "Offer cake" which constructs and shows a new doorhanger when selected.

The doorhanger contains two buttons, which just show different toast messages when selected.NativeWindow-doorhanger.png

var menuID;

function offerCake(window) {
  let buttons = [
    {
      label: "Yes, please!",
      callback: function () {
        window.NativeWindow.toast.show("yum", "short");
      }
    },
    {
      label: "Not today",
      callback: function () {
        window.NativeWindow.toast.show("still hungry", "short");
      }
    }
  ];

  let message = "How about some cake?";
  let options = {
    persistence: 1
  };

  window.NativeWindow.doorhanger.show(message, "cake-request", buttons, window.BrowserApp.selectedTab.id, options);
}

function loadIntoWindow(window) {
  if (!window)
    return;
  menuID = window.NativeWindow.menu.add("Offer cake", null, function(){  
    offerCake(window);   
  });
}

function unloadFromWindow(window) {
  if (!window)
    return;
  window.NativeWindow.menu.remove(menuID);  
}

Methods

show
Show a doorhanger notification.
hide
Hide a doorhanger notification.

See also

Revision Source

<div class="note">
  The <a href="/en/Extensions/Mobile/API/NativeWindow" title="https://developer.mozilla.org/en/DOM/window.NativeWindow">NativeWindow</a> object is only available to privileged code running on Firefox for Android, and is intended for use by Firefox for Android add-ons.</div>
<h2 id="Summary">Summary</h2>
<p>Returns a reference to the <code><a href="/en/Extensions/Mobile/API/NativeWindow" title="https://developer.mozilla.org/en/DOM/window.NativeWindow">NativeWindow</a>.doorhanger</code> object, which can be used to display doorhanger notifications (also known as <a href="/en/Using_popup_notifications" title="https://developer.mozilla.org/en/Using_popup_notifications">popup notifications</a>) on <a href="/en/Mozilla/Firefox_for_Android" title="en/Mozilla/Firefox_for_Android">Firefox for Android</a>.</p>
<p>Doorhanger notifications provide a way to present decisions to users which is less intrusive than a modal dialog. You can display a doorhanger using <code>NativeWindow.doorhanger.show()</code>. On Firefox for Android a doorhanger displays a title and an array of buttons for the user choices: selecting a button calls the corresponding callback function. Doorhangers are attached to a specific tab, and you can control the doorhanger's persistence.</p>
<p>You can close a doorhanger explicitly using <code>NativeWindow.doorhanger.hide()</code>.</p>
<h2 id="Example">Example</h2>
<p>In the example below, an add-on adds a new menu item labeled "Offer cake" which constructs and shows a new doorhanger when selected.</p>
<p>The doorhanger contains two buttons, which just show different toast messages when selected.<a href="/@api/deki/files/6332/=NativeWindow-doorhanger.png" title="NativeWindow-doorhanger.png"><img align="right" alt="NativeWindow-doorhanger.png" class="internal rwrap" src="/@api/deki/files/6332/=NativeWindow-doorhanger.png?size=webview" style="width: 338px; height: 550px;" /></a></p>
<pre class="brush: js">
var menuID;

function offerCake(window) {
&nbsp; let buttons = [
&nbsp;&nbsp;&nbsp; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; label: "Yes, please!",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callback: function () {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.NativeWindow.toast.show("yum", "short");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; },
&nbsp;&nbsp;&nbsp; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; label: "Not today",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; callback: function () {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.NativeWindow.toast.show("still hungry", "short");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp; }
&nbsp; ];

&nbsp; let message = "How about some cake?";
&nbsp; let options = {
&nbsp;&nbsp;&nbsp; persistence: 1
&nbsp; };

&nbsp; window.NativeWindow.doorhanger.show(message, "cake-request", buttons, window.BrowserApp.selectedTab.id, options);
}

function loadIntoWindow(window) {
&nbsp; if (!window)
&nbsp;&nbsp;&nbsp; return;
&nbsp; menuID = window.NativeWindow.menu.add("Offer cake", null, function(){ &nbsp;
&nbsp;&nbsp;&nbsp; offerCake(window);&nbsp; &nbsp;
&nbsp; });
}

function unloadFromWindow(window) {
&nbsp; if (!window)
&nbsp;&nbsp;&nbsp; return;
&nbsp; window.NativeWindow.menu.remove(menuID); &nbsp;
}

</pre>
<h2 id="Methods">Methods</h2>
<dl>
  <dt>
    <a href="/en/Extensions/Mobile/API/NativeWindow/doorhanger/show" title="en/Extensions/Mobile/API/NativeWindow/doorhanger/show/">show</a></dt>
  <dd>
    Show a doorhanger notification.</dd>
  <dt>
    <a href="/en/Extensions/Mobile/API/NativeWindow/doorhanger/hide" title="en/Extensions/Mobile/API/NativeWindow/doorhanger/hide/">hide</a></dt>
  <dd>
    Hide a doorhanger notification.</dd>
</dl>
<h2 id="See_also">See also</h2>
Revert to this revision