Bug 957460 - [Australis] Add Firefox Accounts widget for customization panel r=gijs,markh

browser/base/content/browser-fxaccounts.js

@@ -9,14 +9,30 @@ XPCOMUtils.defineLazyGetter(this, "FxAccountsCommon", function () {
 let gFxAccounts = {
 
   _initialized: false,
+  _originalLabel: null,
+  _inCustomizationMode: false,
+
+  get weave() {
+    delete this.weave;
+    return this.weave = Cc["@mozilla.org/weave/service;1"]
+                          .getService(Ci.nsISupports)
+                          .wrappedJSObject;
+  },
 
   get topics() {
     delete this.topics;
     return this.topics = [
-      FxAccountsCommon.ONVERIFIED_NOTIFICATION
+      FxAccountsCommon.ONLOGIN_NOTIFICATION,
+      FxAccountsCommon.ONVERIFIED_NOTIFICATION,
+      FxAccountsCommon.ONLOGOUT_NOTIFICATION
     ];
   },
 
+  get button() {
+    delete this.button;
+    return this.button = document.getElementById("PanelUI-fxa-status");
+  },
+
   init: function () {
     if (this._initialized) {
       return;
@@ -26,7 +42,15 @@ let gFxAccounts = {
       Services.obs.addObserver(this, topic, false);
     }
 
+    gNavToolbox.addEventListener("customizationstarting", this);
+    gNavToolbox.addEventListener("customizationending", this);
+
+    // Save the button's original label so that
+    // we can restore it if overridden later.
+    this._originalLabel = this.button.getAttribute("label");
     this._initialized = true;
+
+    this.updateUI();
   },
 
   uninit: function () {
@@ -42,7 +66,16 @@ let gFxAccounts = {
   },
 
   observe: function (subject, topic) {
-    this.showDoorhanger();
+    if (topic == FxAccountsCommon.ONVERIFIED_NOTIFICATION) {
+      this.showDoorhanger();
+    } else {
+      this.updateUI();
+    }
+  },
+
+  handleEvent: function (event) {
+    this._inCustomizationMode = event.type == "customizationstarting";
+    this.updateUI();
   },
 
   showDoorhanger: function () {
@@ -55,5 +88,46 @@ let gFxAccounts = {
 
     panel.hidden = false;
     panel.openPopup(iconAnchor || anchor, "bottomcenter topright");
+  },
+
+  updateUI: function () {
+    // Bail out if FxA is disabled.
+    if (!this.weave.fxAccountsEnabled) {
+      return;
+    }
+
+    // FxA is enabled, show the widget.
+    this.button.removeAttribute("hidden");
+
+    // Make sure the button is disabled in customization mode.
+    if (this._inCustomizationMode) {
+      this.button.setAttribute("disabled", "true");
+    } else {
+      this.button.removeAttribute("disabled");
+    }
+
+    // If the user is signed into their Firefox account and we are not
+    // currently in customization mode, show their email address.
+    fxAccounts.getSignedInUser().then(userData => {
+      if (userData && !this._inCustomizationMode) {
+        this.button.setAttribute("signedin", "true");
+        this.button.setAttribute("label", userData.email);
+        this.button.setAttribute("tooltiptext", userData.email);
+      } else {
+        this.button.removeAttribute("signedin");
+        this.button.setAttribute("label", this._originalLabel);
+        this.button.removeAttribute("tooltiptext");
+      }
+    });
+  },
+
+  toggle: function (event) {
+    if (event.originalTarget.hasAttribute("signedin")) {
+      openPreferences("paneSync");
+    } else {
+      switchToTabHavingURI("about:accounts", true);
+    }
+
+    PanelUI.hide();
   }
 };

browser/components/customizableui/content/panelUI.inc.xul

@@ -15,25 +15,29 @@
       </vbox>
 
       <footer id="PanelUI-footer">
-        <!-- The parentNode is used so that the footer is presented as the anchor
-             instead of just the button being the anchor. -->
-        <toolbarbutton id="PanelUI-customize" label="&appMenuCustomize.label;"
-                       exitLabel="&appMenuCustomizeExit.label;"
-                       oncommand="gCustomizeMode.toggle();"/>
-        <toolbarseparator/>
-        <toolbarbutton id="PanelUI-help" label="&helpMenu.label;"
-                       tooltiptext="&helpMenu.label;"
-                       oncommand="PanelUI.showHelpView(this.parentNode);"/>
-        <toolbarseparator/>
-        <toolbarbutton id="PanelUI-quit"
+        <toolbarbutton id="PanelUI-fxa-status" label="&fxaSignIn.label;"
+                       oncommand="gFxAccounts.toggle(event);"
+                       hidden="true"/>
+
+        <hbox id="PanelUI-footer-inner">
+          <toolbarbutton id="PanelUI-customize" label="&appMenuCustomize.label;"
+                         exitLabel="&appMenuCustomizeExit.label;"
+                         oncommand="gCustomizeMode.toggle();"/>
+          <toolbarseparator/>
+          <toolbarbutton id="PanelUI-help" label="&helpMenu.label;"
+                         tooltiptext="&helpMenu.label;"
+                         oncommand="PanelUI.showHelpView(this.parentNode);"/>
+          <toolbarseparator/>
+          <toolbarbutton id="PanelUI-quit"
 #ifdef XP_WIN
-                       label="&quitApplicationCmdWin.label;"
-                       tooltiptext="&quitApplicationCmdWin.label;"
+                         label="&quitApplicationCmdWin.label;"
+                         tooltiptext="&quitApplicationCmdWin.label;"
 #else
-                       label="&quitApplicationCmd.label;"
-                       tooltiptext="&quitApplicationCmd.label;"
+                         label="&quitApplicationCmd.label;"
+                         tooltiptext="&quitApplicationCmd.label;"
 #endif
-                       command="cmd_quitApplication"/>
+                         command="cmd_quitApplication"/>
+        </hbox>
       </footer>
     </panelview>
 

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

@@ -96,8 +96,9 @@ These should match what Safari and other Apple applications use on OS X Lion. --
 <!ENTITY showAllTabsCmd.label "Show All Tabs">
 <!ENTITY showAllTabsCmd.accesskey "A">
 
+<!ENTITY fxaSignIn.label "Sign in to Sync">
 <!ENTITY syncPanel.descriptionSyncing "&brandShortName; is now syncing.">
-<!ENTITY syncPanel.descriptionPrefs "You can manage Sync from your browser's Preferences.">
+<!ENTITY syncPanel.descriptionPrefs "You can manage Sync in Preferences.">
 
 <!ENTITY fullScreenMinimize.tooltip "Minimize">
 <!ENTITY fullScreenRestore.tooltip "Restore">

browser/themes/shared/customizableui/panelUIOverlay.inc.css

@@ -216,11 +216,16 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 
 #PanelUI-footer {
   display: flex;
+  flex-direction: column;
   background-color: rgba(0, 0, 0, 0.05);
   box-shadow: 0 -1px 0 rgba(0,0,0,.15);
   padding: 0;
   margin: 0;
-  min-height: 4em;
+}
+
+#PanelUI-footer-inner {
+  display: flex;
+  box-shadow: 0 -1px 0 rgba(0,0,0,.15);
 }
 
 #PanelUI-footer > toolbarseparator {
@@ -234,10 +239,12 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
 }
 
 #PanelUI-help,
+#PanelUI-fxa-status,
 #PanelUI-customize,
 #PanelUI-quit {
   margin: 0;
   padding: 10px 0;
+  min-height: 2em;
   -moz-appearance: none;
   box-shadow: none;
   background-image: none;
@@ -248,11 +255,21 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-box-orient: horizontal;
 }
 
+#PanelUI-fxa-status {
+  width: calc(@menuPanelWidth@ + 20px);
+  border-bottom-style: solid;
+}
+
+#PanelUI-fxa-status[signedin] {
+  font-weight: bold;
+}
+
 #PanelUI-help,
 #PanelUI-quit {
   min-width: 46px;
 }
 
+#PanelUI-fxa-status > .toolbarbutton-text,
 #PanelUI-customize > .toolbarbutton-text {
   text-align: start;
 }
@@ -267,6 +284,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-margin-end: 0;
 }
 
+#PanelUI-fxa-status,
 #PanelUI-customize {
   flex: 1;
   -moz-padding-start: 15px;
@@ -283,6 +301,7 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   list-style-image: url(chrome://browser/skin/menuPanel-exit.png);
 }
 
+#PanelUI-fxa-status,
 #PanelUI-customize,
 #PanelUI-help,
 #PanelUI-quit {
@@ -314,6 +333,12 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   box-shadow: none;
 }
 
+#PanelUI-fxa-status:not([disabled]):hover {
+  background-color: rgba(0,0,0,0.1);
+  border-bottom-color: rgba(0,0,0,0.1);
+  box-shadow: 0 -1px 0 rgba(0,0,0,0.2);
+}
+
 #PanelUI-quit:not([disabled]):hover {
   background-color: #d94141;
   outline-color: #c23a3a;