Automated merge with https://hg.mozilla.org/projects/ux

browser/base/content/browser.css

@@ -10,7 +10,7 @@ searchbar {
 }
 
 #nav-bar {
-  -moz-binding: url("chrome://browser/content/toolbar.xml#toolbar");
+  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
 }
 
 tabbrowser {
@@ -140,11 +140,10 @@ toolbar[printpreview="true"] {
 #urlbar-container:not([combined]) > #urlbar > toolbarbutton,
 #urlbar-container[combined] + #reload-button + #stop-button,
 #urlbar-container[combined] + #reload-button,
-toolbar:not([mode="icons"]) > #urlbar-container > #urlbar > toolbarbutton,
+#urlbar-reload-button:not([displaystop]) + #urlbar-stop-button,
-toolbar[mode="icons"] > #urlbar-container > #urlbar > #urlbar-reload-button:not([displaystop]) + #urlbar-stop-button,
+#urlbar-reload-button[displaystop],
-toolbar[mode="icons"] > #urlbar-container > #urlbar > #urlbar-reload-button[displaystop],
+#reload-button:not([displaystop]) + #stop-button,
-toolbar[mode="icons"] > #reload-button:not([displaystop]) + #stop-button,
+#reload-button[displaystop] {
-toolbar[mode="icons"] > #reload-button[displaystop] {
   visibility: collapse;
 }
 
@@ -439,14 +438,6 @@ window[chromehidden~="toolbar"] toolbar:not(.toolbar-primary):not(.chromeclass-m
   min-width: 1px;
 }
 
-#nav-bar[mode="text"] > #window-controls > toolbarbutton > .toolbarbutton-icon {
-  display: -moz-box;
-}
-
-#nav-bar[mode="text"] > #window-controls > toolbarbutton > .toolbarbutton-text {
-  display: none;
-}
-
 /* ::::: Ctrl-Tab Panel ::::: */
 
 .ctrlTab-preview > html|img,

browser/base/content/browser.js

@@ -3508,7 +3508,8 @@ var XULBrowserWindow = {
   statusText: "",
   isBusy: false,
   // The pages in this array should be kept in sync with what pages that
-  // panelUIOverlay.xul is set to overlay in /browser/base/jar.mn
+  // panelUIOverlay.xul is set to overlay in
+  // browser/components/customizableui/content/jar.mn
   inContentWhitelist: ["about:addons", "about:downloads", "about:permissions",
                        "about:sync-progress", "about:preferences"],
 

browser/base/content/browser.xul

@@ -9,7 +9,7 @@
 <?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/places/places.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/panelUIOverlay.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/customizableui/panelUIOverlay.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/browser-lightweightTheme.css" type="text/css"?>
 
@@ -468,7 +468,7 @@
       </popupnotificationcontent>
     </popupnotification>
 
-#include panelUI.inc
+#include ../../components/customizableui/content/panelUI.inc.xul
   </popupset>
 
 #ifdef CAN_DRAW_IN_TITLEBAR
@@ -1124,7 +1124,7 @@
       </vbox>
       <vbox id="browser-border-end" hidden="true" layer="true"/>
     </hbox>
-#include customize.inc
+#include ../../components/customizableui/content/customizeMode.inc.xul
   </deck>
 
   <hbox id="full-screen-warning-container" hidden="true" fadeout="true">

browser/base/content/global-scripts.inc

@@ -9,6 +9,6 @@
 <script type="application/javascript" src="chrome://browser/content/browser.js"/>
 <script type="application/javascript" src="chrome://browser/content/downloads/downloads.js"/>
 <script type="application/javascript" src="chrome://browser/content/downloads/indicator.js"/>
-<script type="application/javascript" src="chrome://browser/content/panelUI.js"/>
+<script type="application/javascript" src="chrome://browser/content/customizableui/panelUI.js"/>
 <script type="application/javascript" src="chrome://global/content/inlineSpellCheckUI.js"/>
 <script type="application/javascript" src="chrome://global/content/viewSourceUtils.js"/>

browser/base/jar.mn

@@ -14,13 +14,6 @@ browser.jar:
 %  overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul
 %  overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul
 
-# These overlays should be kept in sync with what pages are in 
-# XULBrowserWindow.inContentWhitelist in browser.js
-% overlay about:addons                                chrome://browser/content/panelUIOverlay.xul
-% overlay about:preferences                           chrome://browser/content/panelUIOverlay.xul
-% overlay about:permissions                           chrome://browser/content/panelUIOverlay.xul
-% overlay about:sync-progress                         chrome://browser/content/panelUIOverlay.xul
-
 *       content/browser/aboutDialog.xul               (content/aboutDialog.xul)
 *       content/browser/aboutDialog.js                (content/aboutDialog.js)
         content/browser/aboutDialog.css               (content/aboutDialog.css)
@@ -66,7 +59,6 @@ browser.jar:
 *       content/browser/browser.xul                   (content/browser.xul)
 *       content/browser/browser-tabPreviews.xml       (content/browser-tabPreviews.xml)
         content/browser/content.js                    (content/content.js)
-        content/browser/customizing.xhtml             (content/customizing.xhtml)
         content/browser/newtab/newTab.xul             (content/newtab/newTab.xul)
 *       content/browser/newtab/newTab.js              (content/newtab/newTab.js)
         content/browser/newtab/newTab.css             (content/newtab/newTab.css)
@@ -79,9 +71,6 @@ browser.jar:
         content/browser/pageinfo/feeds.xml            (content/pageinfo/feeds.xml)
         content/browser/pageinfo/permissions.js       (content/pageinfo/permissions.js)
         content/browser/pageinfo/security.js          (content/pageinfo/security.js)
-        content/browser/panelUI.js                    (content/panelUI.js)
-        content/browser/panelUIOverlay.xul            (content/panelUIOverlay.xul)
-        content/browser/panelUIOverlay.js             (content/panelUIOverlay.js)
 #ifdef MOZ_SERVICES_SYNC
         content/browser/sync/aboutSyncTabs.xul        (content/sync/aboutSyncTabs.xul)
         content/browser/sync/aboutSyncTabs.js         (content/sync/aboutSyncTabs.js)
@@ -101,8 +90,6 @@ browser.jar:
         content/browser/sync/progress.js              (content/sync/progress.js)
         content/browser/sync/progress.xhtml           (content/sync/progress.xhtml)
 #endif
-        content/browser/panelUI.xml                   (content/panelUI.xml)
-        content/browser/toolbar.xml                   (content/toolbar.xml)
         content/browser/openLocation.js               (content/openLocation.js)
         content/browser/openLocation.xul              (content/openLocation.xul)
         content/browser/safeMode.css                  (content/safeMode.css)

browser/components/about/AboutRedirector.cpp

@@ -84,7 +84,7 @@ static RedirEntry kRedirMap[] = {
   { "healthreport", "chrome://browser/content/abouthealthreport/abouthealth.xhtml",
     nsIAboutModule::ALLOW_SCRIPT },
 #endif
-  { "customizing", "chrome://browser/content/customizing.xhtml",
+  { "customizing", "chrome://browser/content/customizableui/aboutCustomizing.xhtml",
     nsIAboutModule::ALLOW_SCRIPT },
 };
 static const int kRedirTotal = NS_ARRAY_LENGTH(kRedirMap);

browser/components/customizableui/content/jar.mn

@@ -0,0 +1,19 @@
+# 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/.
+
+browser.jar:
+  content/browser/customizableui/aboutCustomizing.xhtml
+  content/browser/customizableui/panelUI.js
+  content/browser/customizableui/panelUI.xml
+  content/browser/customizableui/panelUIOverlay.xul
+  content/browser/customizableui/panelUIOverlay.js
+  content/browser/customizableui/toolbar.xml
+
+
+# These overlays should be kept in sync with what pages are in
+# XULBrowserWindow.inContentWhitelist in browser.js
+% overlay about:addons               chrome://browser/content/customizableui/panelUIOverlay.xul
+% overlay about:preferences          chrome://browser/content/customizableui/panelUIOverlay.xul
+% overlay about:permissions          chrome://browser/content/customizableui/panelUIOverlay.xul
+% overlay about:sync-progress        chrome://browser/content/customizableui/panelUIOverlay.xul

browser/components/customizableui/content/moz.build

@@ -0,0 +1,6 @@
+# -*- Mode: python; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+

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

@@ -67,7 +67,7 @@
            whether or not it is shown. That's not good for our case, since we
            want to allow each subview to be uniquely sized. -->
       <box id="PanelUI-subViews">
-        <vbox id="PanelUI-bookmarks" class="PanelUI-subView" flex="1">
+        <vbox id="PanelUI-bookmarks" flex="1">
           <label value="&appMenuBookmarks.label;"/>
           <vbox flex="1">
             <toolbarbutton label="&bookmarkThisPageCmd.label;"/>

browser/components/customizableui/content/panelUI.js

@@ -56,6 +56,13 @@ const PanelUI = {
     this.clickCapturer.addEventListener("click", this._onCapturerClick,
                                         true);
 
+    var self = this;
+    this.subViews.addEventListener("overflow", function() {
+      // Resize the subview on the next tick.
+      Services.tm.currentThread.dispatch(self._syncContainerWithSubView.bind(self),
+        Ci.nsIThread.DISPATCH_NORMAL);
+    });
+
     // Get a MutationObserver ready to react to subview size changes. We
     // only attach this MutationObserver when a subview is being displayed.
     this._subViewObserver = new MutationObserver(function(aMutations) {
@@ -249,6 +256,11 @@ const PanelUI = {
                            this.panel.state == "showing";
   },
 
+  /**
+   * Used to keep a reference to the toolbarbutton that the subview spawned from.
+   */
+  anchorElement: null,
+
   /**
    * If aAnchor is not null, this shifts the main view content so that it is
    * partially clipped by the panel boundaries, placing the center of aAnchor
@@ -263,12 +275,16 @@ const PanelUI = {
       let anchorRect = aAnchor.getBoundingClientRect();
       let mainViewRect = this.mainView.getBoundingClientRect();
       let leftEdge = anchorRect.left - mainViewRect.left;
-      let center = (anchorRect.width / 2);
+      let center = aAnchor.clientWidth / 2;
       let target = leftEdge + center;
       this.mainView.style.transform = "translateX(-" + target + "px)";
+      aAnchor.classList.add("panelui-mainview-anchor");
     } else {
       this.mainView.style.transform = "";
+      if (this.anchorElement)
+        this.anchorElement.classList.remove("panelui-mainview-anchor");
     }
+    this.anchorElement = aAnchor;
   },
 
   /**

browser/components/customizableui/content/panelUIOverlay.xul

@@ -10,11 +10,11 @@
   %browserDTD;
 ]>
 
-<?xml-stylesheet href="chrome://browser/skin/panelUIOverlay.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/customizableui/panelUIOverlay.css" type="text/css"?>
 
 <overlay id="panelUIOverlay"
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <script type="application/javascript" src="chrome://browser/content/panelUIOverlay.js"/>
+  <script type="application/javascript" src="chrome://browser/content/customizableui/panelUIOverlay.js"/>
 
   <hbox id="app-extension-point-end">
     <toolbarbutton id="PanelUI-menu-button"

browser/components/customizableui/moz.build

@@ -0,0 +1,10 @@
+# -*- Mode: python; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+PARALLEL_DIRS += [
+		'content',
+		'src',
+]

browser/components/customizableui/src/CustomizableUI.jsm

@@ -123,7 +123,7 @@ XPCOMUtils.defineLazyGetter(this, "gBuiltInWidgets", function() {
     },
     onViewShowing: function(aEvent) {
       // Populate our list of history
-      const kMaxResults = 10;
+      const kMaxResults = 15;
       let doc = aEvent.detail.ownerDocument;
 
       let options = PlacesUtils.history.getNewQueryOptions();
@@ -729,6 +729,10 @@ let CustomizableUIInternal = {
         throw new Error("Could not find the view node with id: " + aWidget.viewId);
       }
 
+      // PanelUI relies on the .PanelUI-subView class to be able to show only
+      // one sub-view at a time.
+      viewNode.classList.add("PanelUI-subView");
+
       for (let eventName of kSubviewEvents) {
         let handler = "on" + eventName;
         if (typeof aWidget[handler] == "function") {

browser/components/customizableui/src/CustomizeMode.jsm

@@ -531,6 +531,12 @@ CustomizeMode.prototype = {
       return;
     }
 
+    // Do nothing if the target was dropped onto itself (ie, no change in area
+    // or position).
+    if (draggedWrapper == targetNode) {
+      return;
+    }
+
     // Is the target area the customization palette? If so, we have two cases -
     // either the originArea was the palette, or a customizable area.
     if (targetArea.id == kPaletteId) {

browser/components/customizableui/src/Makefile.in

@@ -0,0 +1,17 @@
+# 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/.
+
+DEPTH     = @DEPTH@
+topsrcdir = @top_srcdir@
+srcdir    = @srcdir@
+VPATH     = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+EXTRA_JS_MODULES = \
+  CustomizableUI.jsm \
+  CustomizeMode.jsm \
+  $(NULL)
+
+include $(topsrcdir)/config/rules.mk

browser/components/customizableui/src/moz.build

@@ -0,0 +1,6 @@
+# -*- Mode: python; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+

browser/components/moz.build

@@ -7,6 +7,7 @@
 PARALLEL_DIRS += [
     'about',
     'certerror',
+    'customizableui',
     'dirprovider',
     'downloads',
     'feeds',

browser/components/nsBrowserGlue.js

@@ -1170,7 +1170,7 @@ BrowserGlue.prototype = {
   },
 
   _migrateUI: function BG__migrateUI() {
-    const UI_VERSION = 12;
+    const UI_VERSION = 13;
     const BROWSER_DOCURL = "chrome://browser/content/browser.xul#";
     let currentUIVersion = 0;
     try {
@@ -1363,6 +1363,25 @@ BrowserGlue.prototype = {
       }
     }
 
+    if (currentUIVersion < 13) {
+      // Migrate users from text or text&icons mode to icons mode.
+      let toolbarResources = [this._rdf.GetResource(BROWSER_DOCURL + "navigator-toolbox"),
+                              this._rdf.GetResource(BROWSER_DOCURL + "nav-bar"),
+                              this._rdf.GetResource(BROWSER_DOCURL + "PersonalToolbar"),
+                              this._rdf.GetResource(BROWSER_DOCURL + "addon-bar")];
+      let modeResource = this._rdf.GetResource("mode");
+      let iconsizeResource = this._rdf.GetResource("iconsize");
+      for (let toolbarResource of toolbarResources) {
+        let toolbarMode = this._getPersist(toolbarResource, modeResource);
+        if (toolbarMode != "icons") {
+          this._setPersist(toolbarResource, modeResource, "icons");
+          // If the user wasn't previously using icons mode, switch
+          // them to the default (large icon mode).
+          this._setPersist(toolbarResource, iconsizeResource, "large");
+        }
+      }
+    }
+
     if (this._dirty)
       this._dataSource.QueryInterface(Ci.nsIRDFRemoteDataSource).Flush();
 

browser/modules/Makefile.in

@@ -13,8 +13,6 @@ include $(topsrcdir)/config/config.mk
 
 EXTRA_JS_MODULES = \
 	BrowserNewTabPreloader.jsm \
-	CustomizableUI.jsm \
-	CustomizeMode.jsm \
 	openLocationLastURL.jsm \
 	NetworkPrioritizer.jsm \
 	offlineAppCache.jsm \

browser/themes/linux/browser.css

@@ -15,8 +15,8 @@
 %define fgTabTexture linear-gradient(transparent 0px, transparent 1px, hsla(0,0%,100%,0.35) 1px, hsla(0,0%,100%,0.35) 2px, hsla(0,0%,100%,0.65) 2px, hsla(0,0%,100%,0.65) 3px, @toolbarHighlight@)
 %define fgTabBackgroundMiddle @fgTabTexture@, linear-gradient(transparent 0px, transparent 2px, -moz-dialog 2px, -moz-dialog)
 %define forwardTransitionLength 150ms
-%define conditionalForwardWithUrlbar       window:not([chromehidden~=toolbar]) :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"][mode=icons],                #nav-bar:not([currentset])[mode=icons])                 > #unified-back-forward-button
+%define conditionalForwardWithUrlbar       window:not([chromehidden~=toolbar]) :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],                #nav-bar:not([currentset]))                 > #unified-back-forward-button
-%define conditionalForwardWithUrlbar_small window:not([chromehidden~=toolbar]) :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"][mode=icons][iconsize=small],#nav-bar:not([currentset])[mode=icons][iconsize=small]) > #unified-back-forward-button
+%define conditionalForwardWithUrlbar_small window:not([chromehidden~=toolbar]) :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"][iconsize=small],#nav-bar:not([currentset])[iconsize=small]) > #unified-back-forward-button
 %define conditionalForwardWithUrlbarWidth 32
 %define conditionalForwardWithUrlbarWidth_small 24
 
@@ -92,7 +92,7 @@ toolbarbutton.bookmark-item[open="true"] {
   height: 16px;
 }
 
-/* Prevent [mode="icons"] from hiding the label */
+/* Force the display of the label for bookmarks */
 .bookmark-item > .toolbarbutton-text {
   display: -moz-box !important;
 }
@@ -538,11 +538,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
   -moz-margin-end: 0;
 }
 
-toolbar[mode="full"] .toolbarbutton-1:not([type="menu-button"]),
-toolbar[mode="full"] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-  min-width: 57px;
-}
-
 .toolbarbutton-1:not([type="menu-button"]),
 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
   padding: 5px;
@@ -1789,10 +1784,6 @@ toolbarbutton.chevron > .toolbarbutton-icon {
   margin: 0;
 }
 
-toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
-  display: -moz-box; /* display chevron icon in text mode */
-}
-
 /* Ctrl-Tab */
 
 .ctrlTab-preview {
@@ -2172,7 +2163,7 @@ chatbox {
 
 /* Customization mode */
 
-%include ../shared/customization.inc.css
+%include ../shared/customizableui/customizeMode.inc.css
 
 /* End customization mode */
 

browser/themes/linux/customizableui/panelUIOverlay.css

@@ -5,7 +5,7 @@
 %filter substitution
 %define menuPanelWidth 21em
 
-%include ../shared/panelUIOverlay.inc.css
+%include ../../shared/customizableui/panelUIOverlay.inc.css
 
 #PanelUI-cut-btn {
   list-style-image: url("moz-icon://stock/gtk-cut?size=toolbar");

browser/themes/linux/jar.mn

@@ -21,7 +21,7 @@ browser.jar:
   skin/classic/browser/appmenu.png
 * skin/classic/browser/browser.css
   skin/classic/browser/click-to-play-warning-stripes.png
-  skin/classic/browser/customization/customization-mode-background.jpg (customization/customization-mode-background.jpg)
+  skin/classic/browser/customizableui/customization-mode-background.jpg (customizableui/customization-mode-background.jpg)
 * skin/classic/browser/engineManager.css
   skin/classic/browser/Geolocation-16.png
   skin/classic/browser/Geolocation-64.png
@@ -41,7 +41,6 @@ browser.jar:
 * skin/classic/browser/pageInfo.css
   skin/classic/browser/pageInfo.png
   skin/classic/browser/page-livemarks.png
-* skin/classic/browser/panelUIOverlay.css
   skin/classic/browser/pointerLock-16.png
   skin/classic/browser/pointerLock-64.png
   skin/classic/browser/Privacy-16.png
@@ -58,6 +57,7 @@ browser.jar:
   skin/classic/browser/webRTC-shareDevice-16.png
   skin/classic/browser/webRTC-shareDevice-64.png
   skin/classic/browser/webRTC-sharingDevice-16.png
+* skin/classic/browser/customizableui/panelUIOverlay.css (customizableui/panelUIOverlay.css)
   skin/classic/browser/downloads/buttons.png          (downloads/buttons.png)
   skin/classic/browser/downloads/download-glow.png    (downloads/download-glow.png)
   skin/classic/browser/downloads/download-glow-small.png (downloads/download-glow-small.png)

browser/themes/osx/browser.css

@@ -9,7 +9,7 @@
 %define fgTabTexture linear-gradient(hsla(0,0%,100%,0.6), hsla(0,0%,100%,0.6) 0px, hsl(0,0%,99%) 1px, hsl(0,0%,92%))
 %define fgTabBackgroundMiddle linear-gradient(transparent, transparent)
 %define forwardTransitionLength 150ms
-%define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button
+%define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button
 %define conditionalForwardWithUrlbarWidth 27
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@@ -78,11 +78,6 @@ toolbox[tabsontop=true] > toolbar:not(#TabsToolbar):not(#nav-bar):not(:-moz-lwth
   background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%);
 }
 
-/* We need more height when toolbar buttons show both icon and text. */
-toolbar[mode="full"] toolbarseparator {
-  min-height: 36px;
-}
-
 #nav-bar {
   padding-bottom: 4px !important;
 }
@@ -139,10 +134,6 @@ toolbarbutton.chevron > .toolbarbutton-text {
   display: none;
 }
 
-toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
-  display: -moz-box; /* display chevron icon in text mode */
-}
-
 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
@@ -188,7 +179,7 @@ toolbarbutton.bookmark-item {
 }
 
 .bookmark-item > .toolbarbutton-text {
-  display: -moz-box !important; /* prevent [mode="icons"] from hiding the label */
+  display: -moz-box !important; /* Force the display of the label for bookmarks */
   margin: 0 !important;
 }
 
@@ -444,30 +435,12 @@ toolbarbutton.bookmark-item > menupopup {
   }
 }
 
-toolbar:not([mode="icons"]) .toolbarbutton-1:not([type="menu-button"]),
-toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
-toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
-toolbar:not([mode="icons"]) #restore-button {
-  -moz-appearance: none;
-  padding: 0;
-  height: auto;
-  border: none;
-  box-shadow: none;
-  background: none;
-}
-
 .toolbarbutton-1:not([type="menu-button"]),
 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 #restore-button {
   min-width: 28px;
 }
 
-toolbar:not([mode="icons"]) .toolbarbutton-1:not([type="menu-button"]),
-toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
-toolbar:not([mode="icons"]) #restore-button {
-  min-width: 0;
-}
-
 .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   margin: 2px;
@@ -530,11 +503,6 @@ toolbar:not([mode="icons"]) #restore-button {
   -moz-border-start: none !important;
 }
 
-toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-  width: auto;
-  padding-top: 0;
-}
-
 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
   border-top-left-radius: 0;
@@ -547,36 +515,32 @@ toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmar
   border-bottom-right-radius: 0;
 }
 
-toolbar:not([mode="icons"]) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-dropmarker {
-  opacity: .7;
-}
-
 .toolbarbutton-1 > .toolbarbutton-text,
 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
   margin: 2px 0 0;
 }
 
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):active:hover:-moz-lwtheme,
+.toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):active:hover:-moz-lwtheme,
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"])[open="true"]:-moz-lwtheme,
+.toolbarbutton-1:not([type="menu-button"])[open="true"]:-moz-lwtheme,
-toolbar[mode="icons"] .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button:active:hover:-moz-lwtheme,
+.toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button:active:hover:-moz-lwtheme,
-toolbar[mode="icons"] .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme,
+.toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme,
-toolbar[mode="icons"] #restore-button:not([disabled="true"]):active:hover:-moz-lwtheme {
+#restore-button:not([disabled="true"]):active:hover:-moz-lwtheme {
   text-shadow: @loweredShadow@;
   background-color: rgba(0,0,0,0.2);
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
 }
 
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:-moz-lwtheme {
+.toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:-moz-lwtheme {
   background-color: rgba(0,0,0,0.4);
   box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 1px rgba(255,255,255,0.2);
 }
 
-toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not([disabled="true"]):active:hover:-moz-lwtheme {
+.toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not([disabled="true"]):active:hover:-moz-lwtheme {
   background-color: rgba(0, 0, 0, 0.6);
   box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.2);
 }
 
-toolbar[mode="icons"] .toolbarbutton-1 > menupopup {
+.toolbarbutton-1 > menupopup {
   margin-top: 1px;
 }
 
@@ -593,42 +557,42 @@ toolbar[mode="icons"] .toolbarbutton-1 > menupopup {
 
 #back-button,
 #forward-button:-moz-locale-dir(rtl),
-toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl):-moz-lwtheme {
+#back-button:-moz-locale-dir(rtl):-moz-lwtheme {
   -moz-image-region: rect(0, 40px, 20px, 20px);
 }
 
 @media (min-resolution: 2dppx) {
   #back-button,
   #forward-button:-moz-locale-dir(rtl),
-  toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl):-moz-lwtheme {
+  #back-button:-moz-locale-dir(rtl):-moz-lwtheme {
     -moz-image-region: rect(0, 80px, 40px, 40px);
   }
 }
 
 #forward-button,
 #back-button:-moz-locale-dir(rtl),
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
+#navigator-toolbox[iconsize="large"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
-toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
+#forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
   -moz-image-region: rect(0, 60px, 20px, 40px);
 }
 
 @media (min-resolution: 2dppx) {
   #forward-button,
   #back-button:-moz-locale-dir(rtl),
-  #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
+  #navigator-toolbox[iconsize="large"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
-  toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
+  #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
     -moz-image-region: rect(0, 120px, 40px, 80px);
   }
 }
 
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:-moz-locale-dir(rtl),
+#navigator-toolbox[iconsize="large"] > #nav-bar #back-button:-moz-locale-dir(rtl),
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
+#navigator-toolbox[iconsize="large"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
-toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl):-moz-lwtheme,
+#back-button:-moz-locale-dir(rtl):-moz-lwtheme,
-toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
+#forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
   transform: scaleX(-1);
 }
 
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
+#navigator-toolbox[iconsize="large"] > #nav-bar #back-button {
   -moz-appearance: none;
   -moz-margin-end: -7px;
   position: relative;
@@ -641,12 +605,12 @@ toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
 }
 
 @media (min-resolution: 2dppx) {
-  #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
+  #navigator-toolbox[iconsize="large"] > #nav-bar #back-button {
     -moz-image-region: rect(0, 40px, 40px, 0);
   }
 }
 
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not(:-moz-lwtheme) {
+#navigator-toolbox[iconsize="large"] > #nav-bar #back-button:not(:-moz-lwtheme) {
   height: 31px;
   padding: 4px 5px 5px 3px;
   margin-bottom: -1px;
@@ -655,32 +619,32 @@ toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
 }
 
 @media (min-resolution: 2dppx) {
-  #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not(:-moz-lwtheme) {
+  #navigator-toolbox[iconsize="large"] > #nav-bar #back-button:not(:-moz-lwtheme) {
     background-image: url(chrome://browser/skin/keyhole-circle@2x.png);
     background-size: 90px;
   }
 }
 
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:-moz-window-inactive:not(:-moz-lwtheme) {
+#navigator-toolbox[iconsize="large"] > #nav-bar #back-button:-moz-window-inactive:not(:-moz-lwtheme) {
   background-position: -60px 0;
 }
 
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not([disabled="true"]):active:hover:not(:-moz-lwtheme),
+#navigator-toolbox[iconsize="large"] > #nav-bar #back-button:not([disabled="true"]):active:hover:not(:-moz-lwtheme),
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button[open="true"]:not(:-moz-lwtheme) {
+#navigator-toolbox[iconsize="large"] > #nav-bar #back-button[open="true"]:not(:-moz-lwtheme) {
   background-position: -30px 0;
 }
 
-toolbar[mode="icons"] #forward-button {
+#forward-button {
   -moz-margin-start: 0;
 }
 
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button > .toolbarbutton-icon {
+#navigator-toolbox[iconsize="large"] > #nav-bar #forward-button > .toolbarbutton-icon {
   /* shift the icon away from the back button */
   margin-left: 3px;
   margin-right: -1px;
 }
 
-#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button {
+#navigator-toolbox[iconsize="large"] > #nav-bar #forward-button {
   clip-path: url(chrome://browser/content/browser.xul#osx-keyhole-forward-clip-path);
 }
 
@@ -749,25 +713,25 @@ toolbar[mode="icons"] #forward-button {
   }
 }
 
-#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button {
+#navigator-toolbox[iconsize="small"] > #nav-bar #forward-button {
   width: 27px;
 }
 
-#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button:-moz-lwtheme {
+#navigator-toolbox[iconsize="small"] > #nav-bar #forward-button:-moz-lwtheme {
   padding-left: 2px;
 }
 
-toolbar[mode="icons"] #forward-button:-moz-lwtheme {
+#forward-button:-moz-lwtheme {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #back-button {
+#navigator-toolbox[iconsize="small"] > #nav-bar #back-button {
   -moz-margin-end: 0;
   width: 26px;
 }
 
-#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #back-button:-moz-lwtheme {
+#navigator-toolbox[iconsize="small"] > #nav-bar #back-button:-moz-lwtheme {
   padding-right: 2px;
   border-right-width: 0;
   border-top-right-radius: 0;
@@ -1065,11 +1029,11 @@ toolbar[mode="icons"] #forward-button:-moz-lwtheme {
   }
 }
 
-toolbar[mode="icons"] #zoom-out-button {
+#zoom-out-button {
   -moz-margin-end: 0;
 }
 
-toolbar[mode="icons"] #zoom-in-button {
+#zoom-in-button {
   -moz-border-start: none;
   -moz-margin-start: 0;
 }
@@ -3497,11 +3461,11 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   right: auto;
 }
 
-toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
+.toolbarbutton-badge[badge]:not([badge=""])::after {
   right: -2px;
 }
 
-toolbar[mode="icons"] > *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
+.toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
   left: -2px;
 }
 
@@ -3609,7 +3573,7 @@ chatbox {
 
 /* Customization mode */
 
-%include ../shared/customization.inc.css
+%include ../shared/customizableui/customizeMode.inc.css
 
 /* End customization mode */
 

browser/themes/osx/customizableui/panelUIOverlay.css

@@ -5,7 +5,7 @@
 %filter substitution
 %define menuPanelWidth 26em
 
-%include ../shared/panelUIOverlay.inc.css
+%include ../../shared/customizableui/panelUIOverlay.inc.css
 
 .PanelUI-pageControls toolbarbutton {
   list-style-image: url("chrome://browser/skin/Toolbar.png");

browser/themes/osx/jar.mn

@@ -21,7 +21,7 @@ browser.jar:
   skin/classic/browser/appmenu.png
 * skin/classic/browser/browser.css                          (browser.css)
   skin/classic/browser/click-to-play-warning-stripes.png
-  skin/classic/browser/customization/customization-mode-background.jpg (customization/customization-mode-background.jpg)
+  skin/classic/browser/customizableui/customization-mode-background.jpg (customizableui/customization-mode-background.jpg)
 * skin/classic/browser/engineManager.css                    (engineManager.css)
   skin/classic/browser/Geolocation-16.png
   skin/classic/browser/Geolocation-16@2x.png
@@ -60,7 +60,6 @@ browser.jar:
   skin/classic/browser/page-livemarks.png
   skin/classic/browser/page-livemarks@2x.png
   skin/classic/browser/pageInfo.css
-* skin/classic/browser/panelUIOverlay.css
   skin/classic/browser/pointerLock-16.png
   skin/classic/browser/pointerLock-16@2x.png
   skin/classic/browser/pointerLock-64.png
@@ -93,6 +92,7 @@ browser.jar:
   skin/classic/browser/webRTC-shareDevice-64@2x.png
   skin/classic/browser/webRTC-sharingDevice-16.png
   skin/classic/browser/webRTC-sharingDevice-16@2x.png
+* skin/classic/browser/customizableui/panelUIOverlay.css    (customizableui/panelUIOverlay.css)
   skin/classic/browser/downloads/buttons.png                (downloads/buttons.png)
   skin/classic/browser/downloads/buttons@2x.png             (downloads/buttons@2x.png)
   skin/classic/browser/downloads/download-glow.png          (downloads/download-glow.png)

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

@@ -5,7 +5,7 @@
 /* Customization mode */
 
 #main-window[customizing] {
-  background-image: url("chrome://browser/skin/customization/customization-mode-background.jpg");
+  background-image: url("chrome://browser/skin/customizableui/customization-mode-background.jpg");
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }

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

@@ -84,6 +84,7 @@
   margin-left: 38px;
   transform: translateX(@menuPanelWidth@);
   transition: transform 150ms;
+  overflow-y: hidden;
 }
 
 #PanelUI-subViews > .PanelUI-subView:not([current]) {
@@ -226,3 +227,10 @@
 #PanelUI-historyItems > toolbarbutton {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 }
+
+#PanelUI-contents > toolbarbutton.panelui-mainview-anchor {
+  background-color: Highlight;
+  background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
+  background-repeat: repeat-x;
+  color: HighlightText;
+}

browser/themes/windows/browser.css

@@ -13,9 +13,9 @@
 %define toolbarShadowColor hsla(209,67%,12%,0.35)
 %define fgTabBackgroundMiddle linear-gradient(transparent, transparent 2px, -moz-dialog 2px, -moz-dialog)
 %define navbarTextboxCustomBorder border-color: rgba(0,0,0,.32);
-%define navbarLargeIcons #navigator-toolbox[iconsize=large][mode=icons] > #nav-bar
+%define navbarLargeIcons #navigator-toolbox[iconsize=large] > #nav-bar
 %define forwardTransitionLength 150ms
-%define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button
+%define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button
 %define conditionalForwardWithUrlbarWidth 27
 
 %ifdef MOZ_OFFICIAL_BRANDING
@@ -652,7 +652,7 @@ toolbarbutton.bookmark-item[open="true"] {
   height: 16px;
 }
 
-/* Prevent [mode="icons"] from hiding the label */
+/* Force the display of the label for bookmarks */
 .bookmark-item > .toolbarbutton-text {
   display: -moz-box !important;
 }
@@ -784,15 +784,6 @@ menuitem.bookmark-item {
   -moz-margin-end: 0;
 }
 
-toolbar[mode=full] .toolbarbutton-1:not([type=menu-button]) {
-  -moz-box-orient: vertical;
-}
-
-toolbar[mode=full] .toolbarbutton-1,
-toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-  min-width: 57px;
-}
-
 #nav-bar {
   /* force iconsize="small" on this toolbar */
   counter-reset: smallicons;
@@ -2174,10 +2165,6 @@ toolbarbutton.chevron > .toolbarbutton-icon {
   margin: 0;
 }
 
-toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
-  display: -moz-box; /* display chevron icon in text mode */
-}
-
 #sidebar-throbber[loading="true"] {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
   -moz-margin-end: 4px;
@@ -2934,7 +2921,7 @@ chatbox {
 
 /* Customization mode */
 
-%include ../shared/customization.inc.css
+%include ../shared/customizableui/customizeMode.inc.css
 
 /* End customization mode */
 

browser/themes/windows/customizableui/panelUIOverlay.css

@@ -5,7 +5,7 @@
 %filter substitution
 %define menuPanelWidth 23em
 
-%include ../shared/panelUIOverlay.inc.css
+%include ../../shared/customizableui/panelUIOverlay.inc.css
 
 .PanelUI-pageControls toolbarbutton {
   list-style-image: url("chrome://browser/skin/Toolbar.png");

browser/themes/windows/jar.mn

@@ -26,7 +26,7 @@ browser.jar:
 *       skin/classic/browser/browser.css
 *       skin/classic/browser/browser-lightweightTheme.css
         skin/classic/browser/click-to-play-warning-stripes.png
-        skin/classic/browser/customization/customization-mode-background.jpg (customization/customization-mode-background.jpg)
+        skin/classic/browser/customizableui/customization-mode-background.jpg (customizableui/customization-mode-background.jpg)
 *       skin/classic/browser/engineManager.css
         skin/classic/browser/Geolocation-16.png
         skin/classic/browser/Geolocation-64.png
@@ -50,7 +50,6 @@ browser.jar:
         skin/classic/browser/pageInfo.css
         skin/classic/browser/pageInfo.png
         skin/classic/browser/page-livemarks.png                      (feeds/feedIcon16.png)
-*       skin/classic/browser/panelUIOverlay.css
         skin/classic/browser/pointerLock-16.png
         skin/classic/browser/pointerLock-64.png
         skin/classic/browser/Privacy-16.png
@@ -76,6 +75,7 @@ browser.jar:
         skin/classic/browser/webRTC-shareDevice-16.png
         skin/classic/browser/webRTC-shareDevice-64.png
         skin/classic/browser/webRTC-sharingDevice-16.png
+*       skin/classic/browser/customizableui/panelUIOverlay.css       (customizableui/panelUIOverlay.css)
         skin/classic/browser/downloads/buttons.png                   (downloads/buttons.png)
         skin/classic/browser/downloads/download-glow.png             (downloads/download-glow.png)
         skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)
@@ -284,7 +284,7 @@ browser.jar:
 *       skin/classic/aero/browser/browser.css                        (browser-aero.css)
 *       skin/classic/aero/browser/browser-lightweightTheme.css
         skin/classic/aero/browser/click-to-play-warning-stripes.png
-        skin/classic/aero/browser/customization/customization-mode-background.jpg (customization/customization-mode-background.jpg)
+        skin/classic/aero/browser/customizableui/customization-mode-background.jpg (customizableui/customization-mode-background.jpg)
 *       skin/classic/aero/browser/engineManager.css
         skin/classic/aero/browser/Geolocation-16.png
         skin/classic/aero/browser/Geolocation-64.png
@@ -308,7 +308,6 @@ browser.jar:
         skin/classic/aero/browser/pageInfo.css
         skin/classic/aero/browser/pageInfo.png                       (pageInfo-aero.png)
         skin/classic/aero/browser/page-livemarks.png                 (feeds/feedIcon16-aero.png)
-*       skin/classic/aero/browser/panelUIOverlay.css
         skin/classic/aero/browser/pointerLock-16.png                 (pointerLock-16.png)
         skin/classic/aero/browser/pointerLock-64.png                 (pointerLock-64.png)
         skin/classic/aero/browser/Privacy-16.png                     (Privacy-16-aero.png)
@@ -334,6 +333,7 @@ browser.jar:
         skin/classic/aero/browser/webRTC-shareDevice-16.png
         skin/classic/aero/browser/webRTC-shareDevice-64.png
         skin/classic/aero/browser/webRTC-sharingDevice-16.png
+*       skin/classic/aero/browser/customizableui/panelUIOverlay.css  (customizableui/panelUIOverlay.css)
         skin/classic/aero/browser/downloads/buttons.png              (downloads/buttons-aero.png)
         skin/classic/aero/browser/downloads/download-glow.png        (downloads/download-glow.png)
         skin/classic/aero/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)