Bug 697006 - Add desktop support for the Open Web Apps API - Part 2 : UI [r=gavin]

browser/base/content/browser.css

@@ -440,7 +440,8 @@ window[chromehidden~="toolbar"] toolbar:not(.toolbar-primary):not(.chromeclass-m
 #notification-popup-box[anchorid="geo-notification-icon"] > #geo-notification-icon,
 #notification-popup-box[anchorid="indexedDB-notification-icon"] > #indexedDB-notification-icon,
 #notification-popup-box[anchorid="addons-notification-icon"] > #addons-notification-icon,
-#notification-popup-box[anchorid="password-notification-icon"] > #password-notification-icon {
+#notification-popup-box[anchorid="password-notification-icon"] > #password-notification-icon,
+#notification-popup-box[anchorid="webapps-notification-icon"] > #webapps-notification-icon {
   display: -moz-box;
 }
 

browser/base/content/browser.js

@@ -4752,10 +4752,15 @@ var XULBrowserWindow = {
       }
 
       // Show or hide browser chrome based on the whitelist
-      if (this.hideChromeForLocation(location))
+      if (this.hideChromeForLocation(location)) {
         document.documentElement.setAttribute("disablechrome", "true");
-      else
-        document.documentElement.removeAttribute("disablechrome");
+      } else {
+        let ss = Cc["@mozilla.org/browser/sessionstore;1"].getService(Ci.nsISessionStore);
+        if (ss.getTabValue(gBrowser.selectedTab, "appOrigin"))
+          document.documentElement.setAttribute("disablechrome", "true");
+        else
+          document.documentElement.removeAttribute("disablechrome");
+      }
 
       // Disable find commands in documents that ask for them to be disabled.
       let disableFind = false;
@@ -9105,7 +9110,6 @@ XPCOMUtils.defineLazyGetter(window, "gShowPageResizers", function () {
 #endif
 });
 
-
 var MousePosTracker = {
   _listeners: [],
   _x: 0,

browser/base/content/browser.xul

@@ -527,6 +527,7 @@
             <image id="addons-notification-icon" class="notification-anchor-icon" role="button"/>
             <image id="indexedDB-notification-icon" class="notification-anchor-icon" role="button"/>
             <image id="password-notification-icon" class="notification-anchor-icon" role="button"/>
+            <image id="webapps-notification-icon" class="webapps-anchor-icon" role="button"/>
           </box>
           <!-- Use onclick instead of normal popup= syntax since the popup
                code fires onmousedown, and hence eats our favicon drag events.

browser/components/nsBrowserGlue.js

@@ -67,6 +67,9 @@ XPCOMUtils.defineLazyGetter(this, "PlacesUtils", function() {
 XPCOMUtils.defineLazyModuleGetter(this, "KeywordURLResetPrompter",
                                   "resource:///modules/KeywordURLResetPrompter.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "webappsUI", 
+                                  "resource://gre/modules/webappsUI.jsm");
+
 const PREF_PLUGINS_NOTIFYUSER = "plugins.update.notifyUser";
 const PREF_PLUGINS_UPDATEURL  = "plugins.update.url";
 
@@ -346,6 +349,7 @@ BrowserGlue.prototype = {
     if (this._isPlacesShutdownObserver)
       os.removeObserver(this, "places-shutdown");
     os.removeObserver(this, "defaultURIFixup-using-keyword-pref");
+    webappsUI.uninit();
   },
 
   _onAppDefaults: function BG__onAppDefaults() {
@@ -370,6 +374,9 @@ BrowserGlue.prototype = {
     // handle any UI migration
     this._migrateUI();
 
+    // Initialize webapps UI
+    webappsUI.init();
+
     Services.obs.notifyObservers(null, "browser-ui-startup-complete", "");
   },
 
@@ -405,7 +412,6 @@ BrowserGlue.prototype = {
 #endif
     }
 
-
     // Show update notification, if needed.
     if (Services.prefs.prefHasUserValue("app.update.postupdate"))
       this._showUpdateNotification();

browser/locales/en-US/chrome/browser/browser.properties

@@ -334,6 +334,12 @@ telemetryYesButtonAccessKey = Y
 telemetryNoButtonLabel = No
 telemetryNoButtonAccessKey = N
 
+# Webapps notification popup
+webapps.install = Install
+webapps.install.accesskey = I
+#LOCALIZATION NOTE (webapps.requestInstall) %1$S is the web app name, %2$S is the site from which the web app is installed
+webapps.requestInstall = Do you want to install "%1$S" from this site (%2$S)?
+
 # Keyword.URL reset prompt
 # LOCALIZATION NOTE (keywordPrompt.message):
 #  - %1$S is brandShortName

browser/modules/Makefile.in

@@ -53,6 +53,7 @@ EXTRA_JS_MODULES = \
 	offlineAppCache.jsm \
 	TelemetryTimestamps.jsm \
 	KeywordURLResetPrompter.jsm \
+	webappsUI.jsm \
 	$(NULL)
 
 ifeq ($(MOZ_WIDGET_TOOLKIT),windows) 

browser/modules/webappsUI.jsm

@@ -0,0 +1,133 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+let EXPORTED_SYMBOLS = ["webappsUI"];
+
+let Ci = Components.interfaces;
+let Cc = Components.classes;
+let Cu = Components.utils;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+Cu.import("resource://gre/modules/Webapps.jsm");
+
+let webappsUI = {
+  init: function webappsUI_init() {
+    Services.obs.addObserver(this, "webapps-ask-install", false);
+    Services.obs.addObserver(this, "webapps-launch", false);
+  },
+  
+  uninit: function webappsUI_uninit() {
+    Services.obs.removeObserver(this, "webapps-ask-install");
+    Services.obs.removeObserver(this, "webapps-launch");
+  },
+
+  observe: function webappsUI_observe(aSubject, aTopic, aData) {
+    let data = JSON.parse(aData);
+
+    switch(aTopic) {
+      case "webapps-ask-install":
+        let [chromeWin, browser] = this._getBrowserForId(data.oid);
+        if (chromeWin)
+          this.doInstall(data, browser, chromeWin);
+        break;
+      case "webapps-launch":
+        DOMApplicationRegistry.getManifestFor(data.origin, (function(aManifest) {
+          if (!aManifest)
+            return;
+          let manifest = new DOMApplicationManifest(aManifest, data.origin);
+          this.openURL(manifest.fullLaunchPath(), data.origin);
+        }).bind(this));
+        break;
+    }
+  },
+
+  openURL: function(aUrl, aOrigin) {
+    let browserEnumerator = Services.wm.getEnumerator("navigator:browser");  
+    let ss = Cc["@mozilla.org/browser/sessionstore;1"].getService(Ci.nsISessionStore);
+
+    // Check each browser instance for our URL
+    let found = false;
+    while (!found && browserEnumerator.hasMoreElements()) {
+      let browserWin = browserEnumerator.getNext();
+      let tabbrowser = browserWin.gBrowser;
+
+      // Check each tab of this browser instance
+      let numTabs = tabbrowser.tabs.length;
+      for (let index = 0; index < numTabs; index++) {
+        let tab = tabbrowser.tabs[index];
+        let appURL = ss.getTabValue(tab, "appOrigin");
+        if (appURL == aOrigin) {
+          // The URL is already opened. Select this tab.
+          tabbrowser.selectedTab = tab;
+          browserWin.focus();
+          found = true;
+          break;
+        }
+      }
+    }
+
+    // Our URL isn't open. Open it now.
+    if (!found) {
+      let recentWindow = Services.wm.getMostRecentWindow("navigator:browser");
+      if (recentWindow) {
+        // Use an existing browser window
+        let browser = recentWindow.gBrowser;
+        let tab = browser.addTab(aUrl);
+        browser.pinTab(tab);
+        browser.selectedTab = tab;
+        ss.setTabValue(tab, "appOrigin", aOrigin);
+      }
+    }
+  },
+
+  _getBrowserForId: function(aId) {
+    let someWindow = Services.wm.getMostRecentWindow(null);
+
+    if (someWindow) {
+      let windowUtils = someWindow.QueryInterface(Ci.nsIInterfaceRequestor)
+                                  .getInterface(Ci.nsIDOMWindowUtils);
+      let content = windowUtils.getOuterWindowWithId(aId);
+      if (content) {
+        let browser = content.QueryInterface(Ci.nsIInterfaceRequestor)
+                      .getInterface(Ci.nsIWebNavigation)
+                      .QueryInterface(Ci.nsIDocShell).chromeEventHandler;
+        let win = browser.ownerDocument.defaultView;
+        return [win, browser];
+      }
+    }
+
+    return [null, null];
+  },
+
+  doInstall: function(aData, aBrowser, aWindow) {
+    let bundle = aWindow.gNavigatorBundle;
+
+    let mainAction = {
+      label: bundle.getString("webapps.install"),
+      accessKey: bundle.getString("webapps.install.accesskey"),
+      callback: function(notification) {
+        installDone = true;
+        DOMApplicationRegistry.confirmInstall(aData);
+      }
+    };
+
+    let requestingURI = aWindow.makeURI(aData.from);
+    let manifest = new DOMApplicationManifest(aData.app.manifest, aData.app.origin);
+
+    let host;
+    try {
+      host = requestingURI.host;
+    } catch(e) {
+      host = requestingURI.spec;
+    }
+
+    let message = bundle.getFormattedString("webapps.requestInstall",
+                                            [manifest.name, host], 2);
+
+    aWindow.PopupNotifications.show(aBrowser, "webapps-install", message, "webapps-notification-icon",
+                                                       mainAction, null, { popupIconURL: manifest.iconURLForSize(64) });
+
+  }
+}

browser/themes/gnomestripe/browser.css

@@ -1230,6 +1230,10 @@ toolbar[iconsize="small"] #feed-button {
   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png);
 }
 
+.popup-notification-icon[popupid="webapps-install"] {
+  list-style-image: url(chrome://browser/skin/webapps-64.png);
+}
+
 /* Notification icon box */
 #notification-popup-box {
   position: relative;
@@ -1284,6 +1288,10 @@ toolbar[iconsize="small"] #feed-button {
   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
 }
 
+#webapps-notification-icon {
+  list-style-image: url(chrome://browser/skin/webapps-16.png);
+}
+
 #treecolAutoCompleteImage {
   max-width : 36px; 
 }

browser/themes/gnomestripe/jar.mn

@@ -144,3 +144,5 @@ browser.jar:
   skin/classic/browser/syncQuota.css
   skin/classic/browser/syncProgress.css
 #endif
+  skin/classic/browser/webapps-16.png
+  skin/classic/browser/webapps-64.png

browser/themes/pinstripe/browser.css

@@ -2359,6 +2359,10 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
 }
 
+#webapps-notification-icon {
+  list-style-image: url(chrome://browser/skin/webapps-16.png);
+}
+
 .popup-notification-icon {
   width: 64px;
   height: 64px;
@@ -2425,6 +2429,10 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png);
 }
 
+.popup-notification-icon[popupid="webapps-install"] {
+  list-style-image: url(chrome://browser/skin/webapps-64.png);
+}
+
 /* Popup Buttons */
 #identity-popup-more-info-button {
   @hudButton@

browser/themes/pinstripe/jar.mn

@@ -190,6 +190,8 @@ browser.jar:
   skin/classic/browser/lion/tabbrowser/alltabs-box-bkgnd-icon.png      (tabbrowser/alltabs-box-bkgnd-icon-lion.png)
   skin/classic/browser/lion/tabview/tabview.png                        (tabview/tabview-lion.png)
   skin/classic/browser/lion/places/toolbar.png              (places/toolbar-lion.png)
+  skin/classic/browser/webapps-16.png
+  skin/classic/browser/webapps-64.png
 
 % override chrome://browser/skin/keyhole-circle.png                        chrome://browser/skin/lion/keyhole-circle.png                           os=Darwin osversion>=10.7
 % override chrome://browser/skin/Toolbar.png                               chrome://browser/skin/lion/Toolbar.png                                  os=Darwin osversion>=10.7

browser/themes/winstripe/browser.css

@@ -2323,6 +2323,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png);
 }
 
+.popup-notification-icon[popupid="webapps-install"] {
+  list-style-image: url(chrome://browser/skin/webapps-64.png);
+}
+
 /* Notification icon box */
 #notification-popup-box {
   position: relative;
@@ -2375,6 +2379,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
 }
 
+#webapps-notification-icon {
+  list-style-image: url(chrome://browser/skin/webapps-16.png);
+}
+
 #identity-popup-container {
   min-width: 280px;
 }

browser/themes/winstripe/jar.mn

@@ -21,6 +21,8 @@ browser.jar:
 *       skin/classic/browser/engineManager.css                       (engineManager.css)
         skin/classic/browser/Geolocation-16.png
         skin/classic/browser/Geolocation-64.png
+        skin/classic/browser/webapps-16.png
+        skin/classic/browser/webapps-64.png
         skin/classic/browser/Info.png                                (Info.png)
         skin/classic/browser/identity.png                            (identity.png)
         skin/classic/browser/keyhole-forward-mask.svg
@@ -190,6 +192,8 @@ browser.jar:
 *       skin/classic/aero/browser/engineManager.css                  (engineManager.css)
         skin/classic/aero/browser/Geolocation-16.png
         skin/classic/aero/browser/Geolocation-64.png
+        skin/classic/aero/browser/webapps-16.png
+        skin/classic/aero/browser/webapps-64.png
         skin/classic/aero/browser/Info.png                           (Info-aero.png)
         skin/classic/aero/browser/identity.png                       (identity-aero.png)
         skin/classic/aero/browser/keyhole-forward-mask.svg