Bug 885086: constrain max width of overflowItems, correct layout and centering of elements and update zoom/ edit controls in overflow panel. r=jaws

2013-09-18 14:48:19 +02:00 · 2013-09-18 14:48:19 +02:00 · 29e7eabed7
--- a/browser/components/customizableui/src/CustomizableWidgets.jsm
+++ b/browser/components/customizableui/src/CustomizableWidgets.jsm
@ -357,7 +357,7 @@ const CustomizableWidgets = [{
      if (inPanel && this.currentArea) {
        let panel = aDocument.getElementById(kPanelId);
        panel.addEventListener("popupshowing", updateZoomResetButton);
-      } else if (!this.currentArea) {
+      } else {
        updateZoomResetButton();
      }

@ -371,8 +371,7 @@ const CustomizableWidgets = [{
          setAttributes(node.childNodes[i], attrs);
        }

-        if (inPanel || !aArea)
-          updateZoomResetButton();
+        updateZoomResetButton();
      }

      let listener = {
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@ -56,18 +56,6 @@
  -moz-image-region: rect(-5px, 12px, 11px, -4px);
 }

-#widget-overflow-list > .overflowedItem {
-  width: 100%;
-  min-height: 36px;
-  background-repeat: no-repeat;
-  background-position: 0 center;
-}
-
-#widget-overflow-list > .overflowedItem > .toolbarbutton-text {
-  -moz-padding-start: 10px;
-  text-align: start;
-}
-
 #personal-bookmarks {
  min-height: 29px;
 }
@ -619,32 +607,32 @@ toolbar > .customization-target > toolbarpaletteitem > #history-panelmenu {
  -moz-image-region: rect(0px 120px 24px 96px);
 }

-#edit-controls[customizableui-areatype="toolbar"] > #cut-button {
+#edit-controls:not(@inAnyPanel@) > #cut-button {
  list-style-image: url("moz-icon://stock/gtk-cut?size=toolbar") !important;
 }
-#edit-controls[customizableui-areatype="toolbar"] > #cut-button[disabled="true"] {
+#edit-controls:not(@inAnyPanel@) > #cut-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-cut?size=toolbar&state=disabled") !important;
 }

-#edit-controls[customizableui-areatype="toolbar"] > #copy-button {
+#edit-controls:not(@inAnyPanel@) > #copy-button {
  list-style-image: url("moz-icon://stock/gtk-copy?size=toolbar") !important;
 }
-#edit-controls[customizableui-areatype="toolbar"] > #copy-button[disabled="true"] {
+#edit-controls:not(@inAnyPanel@) > #copy-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-copy?size=toolbar&state=disabled") !important;
 }

-#edit-controls[customizableui-areatype="toolbar"] > #paste-button {
+#edit-controls:not(@inAnyPanel@) > #paste-button {
  list-style-image: url("moz-icon://stock/gtk-paste?size=toolbar") !important;
 }
-#edit-controls[customizableui-areatype="toolbar"] > #paste-button[disabled="true"] {
+#edit-controls:not(@inAnyPanel@) > #paste-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-paste?size=toolbar&state=disabled") !important;
 }

-#zoom-controls[customizableui-areatype="toolbar"] > #zoom-out-button {
+#zoom-controls:not(@inAnyPanel@) > #zoom-out-button {
  list-style-image: url("moz-icon://stock/gtk-zoom-out?size=toolbar") !important;
 }

-#zoom-controls[customizableui-areatype="toolbar"] > #zoom-in-button {
+#zoom-controls:not(@inAnyPanel@) > #zoom-in-button {
  list-style-image: url("moz-icon://stock/gtk-zoom-in?size=toolbar") !important;
 }

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@ -111,18 +111,6 @@ toolbarseparator {
  background-color: -moz-mac-chrome-inactive;
 }

-#widget-overflow-list > .overflowedItem {
-  width: 100%;
-  min-height: 36px;
-  background-repeat: no-repeat;
-  background-position: 0 center;
-}
-
-#widget-overflow-list > .overflowedItem > .toolbarbutton-text {
-  -moz-padding-start: 10px;
-  text-align: start;
-}
-
 /* ----- BOOKMARK TOOLBAR ----- */

 #personal-bookmarks {
@ -1009,34 +997,34 @@ toolbarbutton.bookmark-item > menupopup {
  }

  /* Footer and wide panel control icons */
-  #edit-controls[customizableui-areatype="menu-panel"] > toolbarbutton,
-  #zoom-controls[customizableui-areatype="menu-panel"] > toolbarbutton,
+  #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);
  }

-  #edit-controls[customizableui-areatype="menu-panel"] > #cut-button,
+  #edit-controls@inAnyPanel@ > #cut-button,
  toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
    -moz-image-region: rect(0px, 64px, 32px, 32px);
  }

-  #edit-controls[customizableui-areatype="menu-panel"] > #copy-button,
+  #edit-controls@inAnyPanel@ > #copy-button,
  toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
    -moz-image-region: rect(0px, 96px, 32px, 64px);
  }

-  #edit-controls[customizableui-areatype="menu-panel"] > #paste-button,
+  #edit-controls@inAnyPanel@ > #paste-button,
  toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
    -moz-image-region: rect(0px, 128px, 32px, 96px);
  }

-  #zoom-controls[customizableui-areatype="menu-panel"] > #zoom-out-button,
+  #zoom-controls@inAnyPanel@ > #zoom-out-button,
  toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
    -moz-image-region: rect(0px, 160px, 32px, 128px);
  }

-  #zoom-controls[customizableui-areatype="menu-panel"] > #zoom-in-button,
+  #zoom-controls@inAnyPanel@ > #zoom-in-button,
  toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
    -moz-image-region: rect(0px, 192px, 32px, 160px);
  }
--- a/browser/themes/osx/customizableui/panelUIOverlay.css
+++ b/browser/themes/osx/customizableui/panelUIOverlay.css
@ -44,22 +44,19 @@
  }
 }

-#edit-controls[customizableui-areatype="menu-panel"] > toolbarbutton:not(:first-child),
-#zoom-controls[customizableui-areatype="menu-panel"] > toolbarbutton:not(:first-child) {
-  -moz-margin-start: 0;
+#edit-controls@inAnyPanel@ > toolbarbutton:not(:first-child),
+#zoom-controls@inAnyPanel@ > toolbarbutton:not(:first-child) {
+  margin-left: 0;
+  margin-right: 0;
 }
-#edit-controls[customizableui-areatype="menu-panel"] > toolbarbutton:not(:last-child),
-#zoom-controls[customizableui-areatype="menu-panel"] > toolbarbutton:not(:last-child) {
-  -moz-margin-end: 0;
-}
-#edit-controls[customizableui-areatype="menu-panel"] > toolbarbutton:not(:first-child):not(:last-child),
-#zoom-controls[customizableui-areatype="menu-panel"] > toolbarbutton:not(:first-child):not(:last-child) {
+#edit-controls@inAnyPanel@ > toolbarbutton:not(:first-child):not(:last-child),
+#zoom-controls@inAnyPanel@ > toolbarbutton:not(:first-child):not(:last-child) {
  margin-left: 0;
  margin-right: 0;
 }

-#zoom-controls[customizableui-areatype="menu-panel"] > #zoom-in-button,
-#zoom-controls[customizableui-areatype="menu-panel"] > #zoom-out-button,
+#zoom-controls@inAnyPanel@ > #zoom-in-button,
+#zoom-controls@inAnyPanel@ > #zoom-out-button,
 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button,
 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
  padding-left: 12px;
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@ -1,3 +1,4 @@
 %filter substitution

 %define primaryToolbarButtons #back-button, #forward-button, #home-button, #print-button, #downloads-button, #downloads-indicator, #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, #alltabs-button, #tabview-button, #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button
+%define inAnyPanel :-moz-any(:not([customizableui-areatype="toolbar"]),.overflowedItem)
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@ -2,6 +2,8 @@
 * 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/. */

+%include ../browser.inc
+
 .panel-subviews {
  background-image: linear-gradient(to bottom, white 1px, rgba(255, 255, 255, 0) 15px);
  background-color: -moz-dialog;
@ -65,7 +67,6 @@
  font-size: 10px;
 }

-
 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
  -moz-margin-start: 0;
@ -99,8 +100,8 @@ panelview:not([mainview]) .toolbarbutton-text,
  padding-right: 5px;
 }

-#edit-controls:not([customizableui-areatype="toolbar"]) > toolbarbutton > .toolbarbutton-icon,
-#zoom-controls:not([customizableui-areatype="toolbar"]) > toolbarbutton > .toolbarbutton-icon {
+#edit-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon,
+#zoom-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
  -moz-margin-end: 0;
  min-width: 0;
  min-height: 0;
@ -146,6 +147,18 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton,
  height: auto;
 }

+#widget-overflow-list > #edit-controls > toolbarbutton,
+#widget-overflow-list > #zoom-controls > toolbarbutton {
+  -moz-box-orient: horizontal;
+  -moz-box-align: start;
+  max-height: none;
+  height: auto;
+  padding-left: .5em;
+  padding-right: .5em;
+}
+
+#widget-overflow-list > #edit-controls,
+#widget-overflow-list > #zoom-controls,
 .panel-combined-item[customizableui-areatype="menu-panel"] {
  -moz-box-align: stretch;
  padding: .5em 0 .5em;
@ -180,8 +193,8 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
  -moz-box-flex: 1;
 }

-#edit-controls:not([customizableui-areatype="toolbar"]) > #copy-button,
-#zoom-controls:not([customizableui-areatype="toolbar"]) > #zoom-reset-button {
+#edit-controls@inAnyPanel@ > #copy-button,
+#zoom-controls@inAnyPanel@ > #zoom-reset-button {
  border-left: none;
  border-right: none;
  border-radius: 0;
@ -285,7 +298,6 @@ toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {

 panelview toolbarbutton,
 #widget-overflow-list > toolbarbutton,
-#widget-overflow-list > toolbaritem > toolbarbutton,
 .customizationmode-button {
  -moz-appearance: none;
  padding: 2px 6px;
@ -303,8 +315,8 @@ panelview toolbarbutton,

 panelview toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
 #widget-overflow-list > toolbarbutton:not([disabled]):not([checked]):not([open]):not(:active):hover,
-#edit-controls:not([customizableui-areatype="toolbar"]) > toolbarbutton,
-#zoom-controls:not([customizableui-areatype="toolbar"]) > toolbarbutton,
+#edit-controls@inAnyPanel@ > toolbarbutton,
+#zoom-controls@inAnyPanel@ > toolbarbutton,
 .customizationmode-button {
  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.2) hsla(210,54%,20%,.25);
@ -356,43 +368,82 @@ toolbarbutton.panel-multiview-anchor {
  display: none;
 }

-#edit-controls[customizableui-areatype="menu-panel"],
-#edit-controls[customizableui-areatype="menu-panel"] > toolbarbutton,
-#zoom-controls[customizableui-areatype="menu-panel"],
-#zoom-controls[customizableui-areatype="menu-panel"] > toolbarbutton {
+#edit-controls@inAnyPanel@,
+#edit-controls@inAnyPanel@ > toolbarbutton,
+#zoom-controls@inAnyPanel@,
+#zoom-controls@inAnyPanel@ > toolbarbutton {
  -moz-box-flex: 1;
 }

-#zoom-controls[customizableui-areatype="toolbar"] > #zoom-reset-button {
+#edit-controls@inAnyPanel@ > toolbarbutton,
+#zoom-controls@inAnyPanel@ > toolbarbutton {
+  -moz-appearance: none;
+}
+
+#edit-controls@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon,
+#zoom-controls@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
+  opacity: .25;
+}
+
+#edit-controls.overflowedItem > toolbarbutton > .toolbarbutton-text {
  display: none;
 }

-#zoom-controls:not([customizableui-areatype="toolbar"]) > #zoom-reset-button {
+#zoom-controls[customizableui-areatype="toolbar"]:not(.overflowedItem) > #zoom-reset-button {
+  display: none;
+}
+
+#zoom-controls@inAnyPanel@ > #zoom-reset-button {
  list-style-image: none;
 }

-#edit-controls:not([customizableui-areatype="toolbar"]) > #paste-button,
-#zoom-controls:not([customizableui-areatype="toolbar"]) > #zoom-in-button {
+#edit-controls@inAnyPanel@ > #paste-button,
+#zoom-controls@inAnyPanel@ > #zoom-in-button {
  -moz-border-start-width: 1px;
  -moz-border-start-style: solid;
 }

-#edit-controls:not([customizableui-areatype="toolbar"]) > #cut-button:-moz-locale-dir(ltr),
-#edit-controls:not([customizableui-areatype="toolbar"]) > #paste-button:-moz-locale-dir(rtl),
-#zoom-controls:not([customizableui-areatype="toolbar"]) > #zoom-out-button:-moz-locale-dir(ltr),
-#zoom-controls:not([customizableui-areatype="toolbar"]) > #zoom-in-button:-moz-locale-dir(rtl) {
+#edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(ltr),
+#edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(rtl),
+#zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(ltr),
+#zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(rtl) {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
 }

-#edit-controls:not([customizableui-areatype="toolbar"]) > #cut-button:-moz-locale-dir(rtl),
-#edit-controls:not([customizableui-areatype="toolbar"]) > #paste-button:-moz-locale-dir(ltr),
-#zoom-controls:not([customizableui-areatype="toolbar"]) > #zoom-out-button:-moz-locale-dir(rtl),
-#zoom-controls:not([customizableui-areatype="toolbar"]) > #zoom-in-button:-moz-locale-dir(ltr) {
+#edit-controls@inAnyPanel@ > #cut-button:-moz-locale-dir(rtl),
+#edit-controls@inAnyPanel@ > #paste-button:-moz-locale-dir(ltr),
+#zoom-controls@inAnyPanel@ > #zoom-out-button:-moz-locale-dir(rtl),
+#zoom-controls@inAnyPanel@ > #zoom-in-button:-moz-locale-dir(ltr) {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
 }

+#widget-overflow-list > .overflowedItem {
+  width: 100%;
+  max-width: @menuPanelWidth@;
+  min-height: 36px;
+  background-repeat: no-repeat;
+  background-position: 0 center;
+}
+
+#widget-overflow-list > toolbarbutton,
+#widget-overflow-list > toolbarbutton > toolbarbutton {
+  -moz-box-align: center;
+  -moz-box-orient: horizontal;
+}
+
+#widget-overflow-list > toolbarbutton > .toolbarbutton-text,
+#widget-overflow-list > #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text {
+  text-align: start;
+  -moz-padding-start: .5em;
+}
+
+#widget-overflow-list > #edit-controls,
+#widget-overflow-list > #zoom-controls {
+  min-height: 28px;
+}
+
 .PanelUI-characterEncodingView-list > toolbarbutton[current] {
  -moz-padding-start: 2px;
 }
--- a/browser/themes/shared/menupanel.inc.css
+++ b/browser/themes/shared/menupanel.inc.css
@ -107,34 +107,34 @@ toolbarpaletteitem[place="palette"] > #preferences-button {

 /* Wide panel control icons */

-#edit-controls[customizableui-areatype="menu-panel"] > toolbarbutton,
-#zoom-controls[customizableui-areatype="menu-panel"] > toolbarbutton,
+#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);
 }

-#edit-controls[customizableui-areatype="menu-panel"] > #cut-button,
+#edit-controls@inAnyPanel@ > #cut-button,
 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
 }

-#edit-controls[customizableui-areatype="menu-panel"] > #copy-button,
+#edit-controls@inAnyPanel@ > #copy-button,
 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
  -moz-image-region: rect(0px, 48px, 16px, 32px);
 }

-#edit-controls[customizableui-areatype="menu-panel"] > #paste-button,
+#edit-controls@inAnyPanel@ > #paste-button,
 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
  -moz-image-region: rect(0px, 64px, 16px, 48px);
 }

-#zoom-controls[customizableui-areatype="menu-panel"] > #zoom-out-button,
+#zoom-controls@inAnyPanel@ > #zoom-out-button,
 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
  -moz-image-region: rect(0px, 80px, 16px, 64px);
 }

-#zoom-controls[customizableui-areatype="menu-panel"] > #zoom-in-button,
+#zoom-controls@inAnyPanel@ > #zoom-in-button,
 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
  -moz-image-region: rect(0px, 96px, 16px, 80px);
 }
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@ -109,27 +109,27 @@
  -moz-image-region: rect(0, 486px, 18px, 468px);
 }

-#edit-controls[customizableui-areatype="toolbar"] > #cut-button {
+#edit-controls:not(@inAnyPanel@) > #cut-button {
  -moz-image-region: rect(0, 504px, 18px, 486px);
 }

-#edit-controls[customizableui-areatype="toolbar"] > #copy-button {
+#edit-controls:not(@inAnyPanel@) > #copy-button {
  -moz-image-region: rect(0, 522px, 18px, 504px);
 }

-#edit-controls[customizableui-areatype="toolbar"] > #paste-button {
+#edit-controls:not(@inAnyPanel@) > #paste-button {
  -moz-image-region: rect(0, 540px, 18px, 522px);
 }

-#zoom-controls[customizableui-areatype="toolbar"] > #zoom-out-button {
+#zoom-controls:not(@inAnyPanel@) > #zoom-out-button {
  -moz-image-region: rect(0, 558px, 18px, 540px);
 }

-#zoom-controls[customizableui-areatype="toolbar"] > #zoom-in-button {
+#zoom-controls:not(@inAnyPanel@) > #zoom-in-button {
  -moz-image-region: rect(0, 576px, 18px, 558px);
 }

-#webrtc-status-button[customizableui-areatype="toolbar"] {
+#webrtc-status-button:not(@inAnyPanel@) {
  -moz-image-region: rect(0, 594px, 18px, 576px);
 }

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@ -107,18 +107,6 @@
  margin-top: -1px; /* Move up 1px into the TabsToolbar */
 }

-#widget-overflow-list > .overflowedItem {
-  width: 100%;
-  min-height: 36px;
-  background-repeat: no-repeat;
-  background-position: 0 center;
-}
-
-#widget-overflow-list > .overflowedItem > .toolbarbutton-text {
-  -moz-padding-start: 10px;
-  text-align: start;
-}
-
 #personal-bookmarks {
  min-height: 24px;
 }