Bug 960198 [Australis] make sidebars available from a customizable widget, r=Gijs
authorShane Caraveo <scaraveo@mozilla.com>
Mon, 10 Mar 2014 17:22:00 -0700
changeset 191198 54edfc4fa73ba55ff25264225fae32efc1963b04
parent 191197 d5799bfd78abfce5ec6d18b0e005dcb9e4d0f169
child 191199 86aebfb124f685bfe929e337ef21422ffe3a27a5
push id474
push userasasaki@mozilla.com
push dateMon, 02 Jun 2014 21:01:02 +0000
treeherdermozilla-release@967f4cf1b31c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs
bugs960198
milestone30.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 960198 [Australis] make sidebars available from a customizable widget, r=Gijs
browser/base/content/browser-social.js
browser/components/customizableui/content/panelUI.inc.xul
browser/components/customizableui/src/CustomizableWidgets.jsm
browser/themes/linux/customizableui/panelUIOverlay.css
browser/themes/osx/browser.css
browser/themes/shared/browser.inc
browser/themes/shared/menupanel.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/windows/customizableui/panelUIOverlay.css
--- a/browser/base/content/browser-social.js
+++ b/browser/base/content/browser-social.js
@@ -896,32 +896,32 @@ SocialSidebar = {
   populateSidebarMenu: function(event) {
     // Providers are removed from the view->sidebar menu when there is a change
     // in providers, so we only have to populate onshowing if there are no
     // provider menus. We populate this menu so long as there are enabled
     // providers with sidebars.
     let popup = event.target;
     let providerMenuSeps = popup.getElementsByClassName("social-provider-menu");
     if (providerMenuSeps[0].previousSibling.nodeName == "menuseparator")
-      SocialSidebar._populateProviderMenu(providerMenuSeps[0]);
+      SocialSidebar.populateProviderMenu(providerMenuSeps[0]);
   },
 
   clearProviderMenus: function() {
     // called when there is a change in the provider list we clear all menus,
     // they will be repopulated when the menu is shown
     let providerMenuSeps = document.getElementsByClassName("social-provider-menu");
     for (let providerMenuSep of providerMenuSeps) {
       while (providerMenuSep.previousSibling.nodeName == "menuitem") {
         let menu = providerMenuSep.parentNode;
         menu.removeChild(providerMenuSep.previousSibling);
       }
     }
   },
 
-  _populateProviderMenu: function(providerMenuSep) {
+  populateProviderMenu: function(providerMenuSep) {
     let menu = providerMenuSep.parentNode;
     // selectable providers are inserted before the provider-menu seperator,
     // remove any menuitems in that area
     while (providerMenuSep.previousSibling.nodeName == "menuitem") {
       menu.removeChild(providerMenuSep.previousSibling);
     }
     // only show a selection in the sidebar header menu if there is more than one
     let providers = [p for (p of Social.providers) if (p.sidebarURL)];
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -148,16 +148,21 @@
       <vbox id="PanelUI-helpItems" class="panel-subview-body"/>
     </panelview>
 
     <panelview id="PanelUI-developer" flex="1">
       <label value="&webDeveloperMenu.label;" class="panel-subview-header"/>
       <vbox id="PanelUI-developerItems" class="panel-subview-body"/>
     </panelview>
 
+    <panelview id="PanelUI-sidebar" flex="1">
+      <label value="&appMenuSidebars.label;" class="panel-subview-header"/>
+      <vbox id="PanelUI-sidebarItems" class="panel-subview-body"/>
+    </panelview>
+
     <panelview id="PanelUI-characterEncodingView" flex="1">
       <label value="&charsetMenu.label;" class="panel-subview-header"/>
       <vbox class="panel-subview-body">
         <vbox id="PanelUI-characterEncodingView-pinned"
               class="PanelUI-characterEncodingView-list"/>
         <toolbarseparator/>
         <vbox id="PanelUI-characterEncodingView-charsets"
               class="PanelUI-characterEncodingView-list"/>
--- a/browser/components/customizableui/src/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/src/CustomizableWidgets.jsm
@@ -315,16 +315,84 @@ const CustomizableWidgets = [{
 
       while (items.firstChild) {
         items.firstChild.remove();
       }
 
       parent.appendChild(items);
     }
   }, {
+    id: "sidebar-button",
+    type: "view",
+    viewId: "PanelUI-sidebar",
+    onViewShowing: function(aEvent) {
+      // Largely duplicated from the developer-button above with a couple minor
+      // alterations.
+      // Populate the subview with whatever menuitems are in the
+      // sidebar menu. We skip menu elements, because the menu panel has no way
+      // of dealing with those right now.
+      let doc = aEvent.target.ownerDocument;
+      let win = doc.defaultView;
+
+      let items = doc.getElementById("PanelUI-sidebarItems");
+      let menu = doc.getElementById("viewSidebarMenu");
+
+      // First clear any existing menuitems then populate. Social sidebar
+      // options may not have been added yet, so we do that here. Add it to the
+      // standard menu first, then copy all sidebar options to the panel.
+      win.SocialSidebar.clearProviderMenus();
+      let providerMenuSeps = menu.getElementsByClassName("social-provider-menu");
+      if (providerMenuSeps.length > 0)
+        win.SocialSidebar.populateProviderMenu(providerMenuSeps[0]);
+
+      let attrs = ["oncommand", "onclick", "label", "key", "disabled",
+                   "command", "observes", "hidden", "class", "origin",
+                   "image", "checked"];
+
+      let fragment = doc.createDocumentFragment();
+      let itemsToDisplay = [...menu.children];
+      for (let node of itemsToDisplay) {
+        if (node.hidden)
+          continue;
+
+        let item;
+        if (node.localName == "menuseparator") {
+          item = doc.createElementNS(kNSXUL, "menuseparator");
+        } else if (node.localName == "menuitem") {
+          item = doc.createElementNS(kNSXUL, "toolbarbutton");
+        } else {
+          continue;
+        }
+        for (let attr of attrs) {
+          let attrVal = node.getAttribute(attr);
+          if (attrVal)
+            item.setAttribute(attr, attrVal);
+        }
+        if (node.localName == "menuitem")
+          item.classList.add("subviewbutton");
+        fragment.appendChild(item);
+      }
+
+      items.appendChild(fragment);
+    },
+    onViewHiding: function(aEvent) {
+      let doc = aEvent.target.ownerDocument;
+      let items = doc.getElementById("PanelUI-sidebarItems");
+      let parent = items.parentNode;
+      // We'll take the container out of the document before cleaning it out
+      // to avoid reflowing each time we remove something.
+      parent.removeChild(items);
+
+      while (items.firstChild) {
+        items.firstChild.remove();
+      }
+
+      parent.appendChild(items);
+    }
+  }, {
     id: "add-ons-button",
     shortcutId: "key_openAddons",
     tooltiptext: "add-ons-button.tooltiptext2",
     defaultArea: CustomizableUI.AREA_PANEL,
     onCommand: function(aEvent) {
       let win = aEvent.target &&
                 aEvent.target.ownerDocument &&
                 aEvent.target.ownerDocument.defaultView;
--- a/browser/themes/linux/customizableui/panelUIOverlay.css
+++ b/browser/themes/linux/customizableui/panelUIOverlay.css
@@ -24,14 +24,26 @@
 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
   -moz-padding-start: 0;
 }
 
 .subviewbutton.bookmark-item > .toolbarbutton-icon {
   -moz-margin-start: 3px;
 }
 
+/* subviewbutton entries for social sidebars have images that come from external
+/* sources, and are not guaranteed to be the size we want, so force the size on
+/* those icons. */
+toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
+  visibility: hidden;
+}
+
 .PanelUI-subView toolbarseparator,
 .PanelUI-subView menuseparator,
 .cui-widget-panelview menuseparator,
 #PanelUI-footer-inner > toolbarseparator {
   -moz-appearance: none !important;
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -719,16 +719,20 @@ toolbar .toolbarbutton-1 > .toolbarbutto
   #tabview-button@toolbarButtonPressed@ {
     -moz-image-region: rect(18px, 648px, 36px, 630px);
   }
 
   #email-link-button@toolbarButtonPressed@ {
     -moz-image-region: rect(18px, 666px, 36px, 648px);
   }
 
+  #sidebar-button@toolbarButtonPressed@ {
+    -moz-image-region: rect(18px, 684px, 36px, 666px);
+  }
+
   /**
    * OSX has a unique set of icons when fullscreen is in the checked state.
    */
 
   #fullscreen-button[checked="true"]:not([cui-areatype="menu-panel"]) {
     -moz-image-region: rect(36px, 432px, 54px, 414px);
   }
 
@@ -1022,16 +1026,24 @@ toolbar .toolbarbutton-1 > .toolbarbutto
   #email-link-button[cui-areatype="toolbar"] {
     -moz-image-region: rect(0, 1332px, 36px, 1296px);
   }
 
   #email-link-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
     -moz-image-region: rect(36px, 1332px, 72px, 1296px);
   }
 
+  #sidebar-button[cui-areatype="toolbar"] {
+    -moz-image-region: rect(0, 1368px, 36px, 1332px);
+  }
+
+  #sidebar-button[cui-areatype="toolbar"]:hover:active:not([disabled="true"]) {
+    -moz-image-region: rect(36px, 1368px, 72px, 1332px);
+  }
+
   :-moz-any(@primaryToolbarButtons@) > .toolbarbutton-icon,
   :-moz-any(@primaryToolbarButtons@) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
     width: 18px;
   }
 
   /* Menu panel and palette styles */
 
   :-moz-any(@primaryToolbarButtons@)[cui-areatype="menu-panel"],
@@ -1155,16 +1167,21 @@ toolbar .toolbarbutton-1 > .toolbarbutto
     -moz-image-region: rect(0px, 1536px, 64px, 1472px);
   }
 
   #email-link-button[cui-areatype="menu-panel"],
   toolbarpaletteitem[place="palette"] > #email-link-button {
     -moz-image-region: rect(0px, 1600px, 64px, 1536px);
   }
 
+  #sidebar-button[cui-areatype="menu-panel"],
+  toolbarpaletteitem[place="palette"] > #sidebar-button {
+    -moz-image-region: rect(0px, 1728px, 64px, 1664px);
+  }
+
   /* Footer and wide panel control icons */
   #edit-controls@inAnyPanel@ > toolbarbutton,
   #zoom-controls@inAnyPanel@ > toolbarbutton,
   toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
   toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
     list-style-image: url(chrome://browser/skin/menuPanel-small@2x.png);
   }
 
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -1,5 +1,5 @@
 %filter substitution
 
-%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button
+%define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #cut-button, #copy-button, #paste-button, #fullscreen-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #sync-button, #feed-button, #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button
 %define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 %define nestedButtons #zoom-out-button, #zoom-in-button, #cut-button, #copy-button, #paste-button
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@@ -121,16 +121,25 @@ toolbarpaletteitem[place="palette"] > #p
   -moz-image-region: rect(0px, 768px, 32px, 736px);
 }
 
 #email-link-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #email-link-button {
   -moz-image-region: rect(0, 800px, 32px, 768px);
 }
 
+#sidebar-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #sidebar-button {
+  -moz-image-region: rect(0, 864px, 32px, 832px);
+}
+
+#sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
+  -moz-image-region: rect(32px, 864px, 64px, 832px);
+}
+
 /* Wide panel control icons */
 
 #edit-controls@inAnyPanel@ > toolbarbutton,
 #zoom-controls@inAnyPanel@ > toolbarbutton,
 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
   list-style-image: url(chrome://browser/skin/menuPanel-small.png);
 }
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -59,20 +59,16 @@
 #feed-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 288px, 18px, 270px);
 }
 
 #social-share-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0px, 306px, 18px, 288px);
 }
 
-#email-link-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 666px, 18px, 648px);
-}
-
 #characterencoding-button[cui-areatype="toolbar"]{
   -moz-image-region: rect(0, 324px, 18px, 306px);
 }
 
 #new-window-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 342px, 18px, 324px);
 }
 
@@ -138,8 +134,16 @@
 
 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 #tabview-button {
   -moz-image-region: rect(0, 648px, 18px, 630px);
 }
+
+#email-link-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 666px, 18px, 648px);
+}
+
+#sidebar-button[cui-areatype="toolbar"] {
+  -moz-image-region: rect(0, 684px, 18px, 666px);
+}
--- a/browser/themes/windows/customizableui/panelUIOverlay.css
+++ b/browser/themes/windows/customizableui/panelUIOverlay.css
@@ -42,16 +42,28 @@
 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
   -moz-padding-start: 0;
 }
 
 .subviewbutton.bookmark-item > .toolbarbutton-icon {
   -moz-margin-start: 3px;
 }
 
+/* subviewbutton entries for social sidebars have images that come from external
+/* sources, and are not guaranteed to be the size we want, so force the size on
+/* those icons. */
+toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
+  visibility: hidden;
+}
+
 %ifdef WINDOWS_AERO
 /* Win8 and beyond. */
 @media not all and (-moz-os-version: windows-vista) {
   @media not all and (-moz-os-version: windows-win7) {
     panelview .toolbarbutton-1,
     .subviewbutton,
     .widget-overflow-list .toolbarbutton-1,
     .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,