Bug 626382 - Allow themes to set the iconsize on specific toolbars. r=dao a=b
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Fri, 04 Feb 2011 09:09:04 +0100
changeset 61926 847a825087f209993654ab1ff726998b9cb91a04
parent 61925 dca717e815337ddc3dbd20d293f283b57488e69c
child 61927 f2a6a78478dc6692fc06cb85a97d130650676018
push id18541
push userdgottwald@mozilla.com
push dateFri, 04 Feb 2011 08:10:28 +0000
treeherdermozilla-central@847a825087f2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, b
bugs626382
milestone2.0b12pre
first release with
nightly linux32
847a825087f2 / 4.0b12pre / 20110204030345 / files
nightly linux64
847a825087f2 / 4.0b12pre / 20110204030345 / files
nightly mac
847a825087f2 / 4.0b12pre / 20110204030345 / files
nightly win32
847a825087f2 / 4.0b12pre / 20110204030345 / files
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
releases
nightly linux32
nightly linux64
nightly mac
nightly win32
Bug 626382 - Allow themes to set the iconsize on specific toolbars. r=dao a=b
browser/base/content/browser.js
browser/base/content/browser.xul
browser/themes/pinstripe/browser/browser.css
browser/themes/winstripe/browser/browser.css
toolkit/content/customizeToolbar.js
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1322,16 +1322,18 @@ function BrowserStartup() {
   TabsOnTop.syncCommand();
 
   BookmarksMenuButton.init();
 
   TabsInTitlebar.init();
 
   gPrivateBrowsingUI.init();
 
+  retrieveToolbarIconsizesFromTheme();
+
   setTimeout(delayedStartup, 0, isLoadingBlank, mustLoadSidebar);
 }
 
 function HandleAppCommandEvent(evt) {
   evt.stopPropagation();
   switch (evt.command) {
   case "Back":
     BrowserBack();
@@ -3611,20 +3613,53 @@ function BrowserToolboxCustomizeDone(aTo
 
   // make sure to re-enable click-and-hold
   if (!getBoolPref("ui.click_hold_context_menus", false))
     SetClickAndHoldHandlers();
 
   window.content.focus();
 }
 
-function BrowserToolboxCustomizeChange() {
-  gHomeButton.updatePersonalToolbarStyle();
-  BookmarksMenuButton.customizeChange();
-  allTabs.readPref();
+function BrowserToolboxCustomizeChange(aType) {
+  switch (aType) {
+    case "iconsize":
+    case "mode":
+      retrieveToolbarIconsizesFromTheme();
+      break;
+    default:
+      gHomeButton.updatePersonalToolbarStyle();
+      BookmarksMenuButton.customizeChange();
+      allTabs.readPref();
+  }
+}
+
+/**
+ * Allows themes to override the "iconsize" attribute on toolbars.
+ */
+function retrieveToolbarIconsizesFromTheme() {
+  function retrieveToolbarIconsize(aToolbar) {
+    if (aToolbar.localName != "toolbar")
+      return;
+
+    // The theme indicates that it wants to override the "iconsize" attribute
+    // by specifying a special value for the "counter-reset" property on the
+    // toolbar. A custom property cannot be used because getComputedStyle can
+    // only return the values of standard CSS properties.
+    let counterReset = getComputedStyle(aToolbar).counterReset;
+    if (counterReset == "smallicons 0") {
+      aToolbar.setAttribute("iconsize", "small");
+      document.persist(aToolbar.id, "iconsize");
+    } else if (counterReset == "largeicons 0") {
+      aToolbar.setAttribute("iconsize", "large");
+      document.persist(aToolbar.id, "iconsize");
+    }
+  }
+
+  Array.forEach(gNavToolbox.childNodes, retrieveToolbarIconsize);
+  gNavToolbox.externalToolbars.forEach(retrieveToolbarIconsize);
 }
 
 /**
  * Update the global flag that tracks whether or not any edit UI (the Edit menu,
  * edit-related items in the context menu, and edit-related toolbar buttons
  * is visible, then update the edit commands' enabled state accordingly.  We use
  * this flag to skip updating the edit commands on focus or selection changes
  * when no UI is visible to improve performance (including pageload performance,
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -462,16 +462,18 @@
 
 <deck flex="1" id="tab-view-deck">
 <vbox flex="1">
 
   <toolbox id="navigator-toolbox"
            defaultmode="icons" mode="icons"
 #ifdef WINCE
            defaulticonsize="small" iconsize="small"
+#else
+           iconsize="large"
 #endif
            tabsontop="true"
            persist="tabsontop">
     <!-- Menu -->
     <toolbar type="menubar" id="toolbar-menubar" class="chromeclass-menubar" customizable="true"
              defaultset="menubar-items"
              mode="icons" iconsize="small" defaulticonsize="small"
              lockiconsize="true"
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@@ -444,33 +444,38 @@ toolbar[mode="icons"] .toolbarbutton-1:n
   background: #8E8E8E;
   box-shadow: inset rgba(0, 0, 0, 0.5) 0 3px 3.5px, @loweredShadow@;
 }
 
 toolbar[mode="icons"] .toolbarbutton-1 > menupopup {
   margin-top: 1px;
 }
 
+#navigator-toolbox > toolbar {
+  /* force iconsize="small" on these toolbars */
+  counter-reset: smallicons;
+}
+
 /* unified back/forward button */
 
 #unified-back-forward-button {
   -moz-box-align: center;
 }
 
 #back-button,
 toolbar:not([mode="icons"]) #forward-button:-moz-locale-dir(rtl) {
   -moz-image-region: rect(0, 40px, 20px, 20px);
 }
 
 #forward-button,
 toolbar:not([mode="icons"]) #back-button:-moz-locale-dir(rtl) {
   -moz-image-region: rect(0, 60px, 20px, 40px);
 }
 
-toolbar:not([iconsize="small"])[mode="icons"] #back-button {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
   -moz-margin-end: -5px;
   position: relative;
   z-index: 1;
   -moz-image-region: rect(0, 20px, 20px, 0);
   width: 30px;
   height: 30px;
   padding: 4px 5px 4px 3px;
   border-radius: 10000px;
@@ -480,47 +485,41 @@ toolbar[mode="icons"] #back-button:-moz-
 toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl) {
   -moz-transform: scaleX(-1);
 }
 
 toolbar[mode="icons"] #forward-button {
   -moz-margin-start: 0;
 }
 
-toolbar[mode="icons"]:not([iconsize="small"]) #forward-button {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button {
   /* 1px to the right */
   padding-left: 4px;
   padding-right: 2px;
 }
 
-toolbar[mode="icons"]:not([iconsize="small"]) #forward-button:-moz-lwtheme {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-lwtheme {
   mask: url(chrome://browser/content/browser.xul#pinstripe-keyhole-forward-mask);
 }
 
-toolbar[iconsize="small"][mode="icons"] #back-button {
-  -moz-margin-end: 0;
-}
-
-toolbar[iconsize="small"][mode="icons"] #back-button {
-  width: 26px;
-  border-right-width: 0;
-  padding-right: 2px;
-}
-
-toolbar[iconsize="small"][mode="icons"] #forward-button  {
+#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button {
   width: 27px;
   padding-left: 2px;
 }
 
 toolbar[mode="icons"] #forward-button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-toolbar[iconsize="small"][mode="icons"] #back-button {
+#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #back-button {
+  -moz-margin-end: 0;
+  width: 26px;
+  padding-right: 2px;
+  border-right-width: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
 }
--- a/browser/themes/winstripe/browser/browser.css
+++ b/browser/themes/winstripe/browser/browser.css
@@ -103,18 +103,18 @@
   #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
     visibility: visible;
   }
 %ifdef WINSTRIPE_AERO
 }
 %endif
 
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[iconsize="small"],
-#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[defaulticonsize="small"]:not([iconsize]) {
+#navigator-toolbox[iconsize="small"] > #nav-bar,
+#navigator-toolbox > toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar)[iconsize="small"] {
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
 #nav-bar:not(:-moz-lwtheme),
 #nav-bar[collapsed="true"] + toolbar:not(:-moz-lwtheme),
 #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme),
 #navigator-toolbox[tabsontop="true"] > #nav-bar,
@@ -567,16 +567,21 @@ menuitem.bookmark-item {
   -moz-box-orient: vertical;
 }
 
 .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon {
   opacity: .4;
 }
 
+#nav-bar {
+  /* force iconsize="small" on this toolbar */
+  counter-reset: smallicons;
+}
+
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 #nav-bar .toolbarbutton-1 {
   -moz-appearance: none;
   padding: 1px 5px;
   background: rgba(151,152,153,.05)
               -moz-linear-gradient(rgba(251,252,253,.95), rgba(246,247,248,.47) 49%, 
                                    rgba(231,232,233,.45) 51%, rgba(225,226,229,.3));
@@ -587,35 +592,35 @@ menuitem.bookmark-item {
   box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
               0 0 0 2px rgba(255,255,255,.1) inset,
               0 1px 0 rgba(0,0,0,.15);
   color: black;
   text-shadow: 0 0 2px white;
 }
 
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
-#nav-bar[iconsize="small"][mode="icons"] .toolbarbutton-1 > .toolbarbutton-menubutton-button,
-#nav-bar[iconsize="small"][mode="icons"] .toolbarbutton-1 {
+#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
+#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar .toolbarbutton-1 {
   padding-left: 3px;
   padding-right: 3px;
 }
 
 #nav-bar .toolbarbutton-1[type="menu-button"] {
   -moz-appearance: none;
   padding: 0;
   background: none !important;
   border: none !important;
   box-shadow: none !important;
 }
 
 #nav-bar .toolbarbutton-1 {
   margin: 1px 3px;
 }
 
-#nav-bar[iconsize="small"][mode="icons"] .toolbarbutton-1 {
+#navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar .toolbarbutton-1 {
   margin-left: 2px;
   margin-right: 2px;
 }
 
 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-border-start-style: none;
 }
 
@@ -727,47 +732,47 @@ toolbar[mode="full"] .toolbarbutton-1 > 
 #back-button {
   -moz-image-region: rect(0, 18px, 18px, 0);
 }
 
 #forward-button {
   -moz-image-region: rect(0, 36px, 18px, 18px);
 }
 
-toolbar:not([iconsize="small"])[mode="icons"] #back-button {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
   -moz-image-region: rect(18px, 20px, 38px, 0);
 }
 
 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 #forward-button:-moz-locale-dir(rtl),
 #forward-button:-moz-locale-dir(rtl) > .toolbarbutton-text {
   -moz-transform: scaleX(-1);
 }
 
 #nav-bar #back-button {
-  -moz-margin-end: 0;
+  -moz-margin-end: 0 !important;
 }
 
 #nav-bar #forward-button {
-  border-left: none;
-  -moz-margin-start: 0;
+  border-left-style: none;
+  -moz-margin-start: 0 !important;
 }
 
 #nav-bar #back-button:-moz-locale-dir(ltr) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 #nav-bar #back-button:-moz-locale-dir(rtl),
 #nav-bar #forward-button {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-#nav-bar:not([iconsize="small"])[mode="icons"] #back-button {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
   border-radius: 10000px;
   padding: 0;
   width: 30px;
   height: 30px;
   position: relative;
   z-index: 1;
   margin-top: -2px;
   margin-bottom: -2px;
@@ -777,54 +782,54 @@ toolbar:not([iconsize="small"])[mode="ic
   box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
               0 0 0 2px rgba(255,255,255,.1) inset,
               0 0 0 1px rgba(0,0,0,.15),
               0 1px 0 rgba(0,0,0,.4),
               0 1px 1px rgba(0,0,0,.3),
               1px 2px 1px rgba(0,0,0,.2);
 }
 
-#nav-bar:not([iconsize="small"])[mode="icons"] #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover {
   box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
               0 0 0 2px rgba(255,255,255,.1) inset,
               0 0 0 1px hsla(190,50%,40%,.3),
               0 1px 0 rgba(0,0,0,.4),
               0 1px 1px rgba(0,0,0,.3),
               1px 2px 1px rgba(0,0,0,.2),
               0 0 5px 1px hsl(190,90%,80%);
 }
 
-#nav-bar:not([iconsize="small"])[mode="icons"] #back-button:not([disabled="true"]):hover:active,
-#nav-bar:not([iconsize="small"])[mode="icons"] #back-button[open="true"] {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not([disabled="true"]):hover:active,
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button[open="true"] {
   box-shadow: 0 0 6.5px rgba(0,0,0,.4) inset,
               0 0 2px rgba(0,0,0,.4) inset,
               0 0 0 1px rgba(0,0,0,.65),
               0 2px 0 rgba(255,255,255,.4);
 }
 
-#nav-bar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"],
-#nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button"],
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar:not([currentset]) {
   padding-top: 3px;
   padding-bottom: 5px;
 }
 
-#navigator-toolbox[tabsontop="true"] > #nav-bar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"],
-#navigator-toolbox[tabsontop="true"] > #nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) {
+#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] > #nav-bar[currentset*="unified-back-forward-button"],
+#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] > #nav-bar:not([currentset]) {
   padding-top: 5px;
 }
 
-#nav-bar:not([iconsize="small"])[mode="icons"] #forward-button {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button {
   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
   mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask);
-  -moz-margin-start: -6px;
+  -moz-margin-start: -6px !important;
   padding-left: 7px;
   padding-right: 3px;
 }
 
-#nav-bar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="true"]):not(:active):hover {
+#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:not([disabled="true"]):not(:active):hover {
   /*mask: url(keyhole-forward-mask.svg#mask-hover);*/
   mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask-hover);
   /* Don't animate the box shadow, as the blur and spread radii affect the mask. */
   -moz-transition: background-color .4s ease-in;
 }
 
 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
--- a/toolkit/content/customizeToolbar.js
+++ b/toolkit/content/customizeToolbar.js
@@ -162,21 +162,21 @@ function removeToolboxListeners()
  */
 function notifyParentComplete()
 {
   if ("customizeDone" in gToolbox)
     gToolbox.customizeDone(gToolboxChanged);
   dispatchCustomizationEvent("aftercustomization");
 }
 
-function toolboxChanged(aEvent)
+function toolboxChanged(aType)
 {
   gToolboxChanged = true;
   if ("customizeChange" in gToolbox)
-    gToolbox.customizeChange(aEvent);
+    gToolbox.customizeChange(aType);
   dispatchCustomizationEvent("customizationchange");
 }
 
 function dispatchCustomizationEvent(aEventName) {
   var evt = document.createEvent("Events");
   evt.initEvent(aEventName, true, true);
   gToolbox.dispatchEvent(evt);
 }
@@ -691,16 +691,18 @@ function updateToolboxProperty(aProp, aV
     if (toolbar.getAttribute("lock" + aProp) == "true" &&
         toolbar.getAttribute(aProp) == toolbarDefault)
       return;
 
     toolbar.setAttribute(aProp, aValue || toolbarDefault);
     gToolboxDocument.persist(toolbar.id, aProp);
   });
 
+  toolboxChanged(aProp);
+
   return aValue || toolboxDefault;
 }
 
 function forEachCustomizableToolbar(callback) {
   Array.filter(gToolbox.childNodes, isCustomizableToolbar).forEach(callback);
   Array.filter(gToolbox.externalToolbars, isCustomizableToolbar).forEach(callback);
 }