Adds text/image/both modes for the main toolbar. Bug 22056, patch by

neil@parkwaycc.co.uk, r=timeless, sr=bzbarsky, moa=blake,hyatt

modules/libpref/src/init/all.js

@@ -108,6 +108,7 @@ pref("browser.chrome.site_icons", true);
 pref("browser.chrome.favicons", false);
 
 pref("browser.chrome.toolbar_tips",         true);
+// 0 = Pictures Only, 1 = Text Only, 2 = Pictures and Text
 pref("browser.chrome.toolbar_style",        2);
 
 pref("browser.toolbars.showbutton.bookmarks", true);

themes/classic/communicator/brand.css

@@ -56,11 +56,15 @@
   list-style-image: url("chrome://communicator/skin/brand/throbber-anim.gif");
 }
   
+#navigator-throbber[buttonstyle="text"],
+#navigator-throbber[buttonstyle="pictures"],
 #navigator-throbber[toolbarmode="small"] {
-  margin: 0 5px 0 0;
+  margin: 0 5px;
   list-style-image: url("chrome://communicator/skin/brand/throbber16-single.gif");
 }
 
+#navigator-throbber[buttonstyle="text"][busy="true"],
+#navigator-throbber[buttonstyle="pictures"][busy="true"],
 #navigator-throbber[toolbarmode="small"][busy="true"] {
   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.gif");
 }

themes/classic/communicator/button.css

@@ -61,6 +61,23 @@
   display: none;
 }
 
+.toolbarbutton-1[buttonstyle="pictures"],
+.toolbarbutton-1[buttonstyle="pictures"] > .toolbarbutton-menubutton-button {
+  min-width: 0px;
+}
+
+.toolbarbutton-1[buttonstyle="pictures"] > .toolbarbutton-menubutton-button
+    > .toolbarbutton-text,
+.toolbarbutton-1[buttonstyle="pictures"] > .toolbarbutton-text {
+  display: none;
+}
+
+.toolbarbutton-1[buttonstyle="text"] > .toolbarbutton-menubutton-button
+    > .toolbarbutton-icon,
+.toolbarbutton-1[buttonstyle="text"] > .toolbarbutton-icon {
+  display: none;
+}
+
 /* ::::: standard toolbar buttons ::::: */
 
 .button-toolbar {

themes/classic/navigator/navigator.css

@@ -150,15 +150,22 @@
   display: none;
 }
 
-#nav-bar[toolbarmode="small"] > #nav-bar-inner {
-  margin: 0;
-  border: none;
+.toolbarbutton-1[toolbarmode="small"] > .toolbarbutton-menubutton-button
+    > .toolbarbutton-icon,
+.toolbarbutton-1[toolbarmode="small"] > .toolbarbutton-icon {
+  display: inline;
 }
 
 #nav-bar[toolbarmode="small"] > .toolbar-primary-grippy {
   display: none;
 }
 
+.toolbarbutton-1[buttonstyle="text"] > .toolbarbutton-menubutton-button
+    > .toolbarbutton-text,
+.toolbarbutton-1[buttonstyle="text"] > .toolbarbutton-text {
+  padding: 4px 0;
+}
+
 /* ::::: fullscreen window controls ::::: */
 
 #window-controls {
@@ -185,7 +192,6 @@
 #nav-bar-inner {
   -moz-box-align: center;
   min-width: 0px;
-  margin: 4px 6px;
 }
 
 #urlbar {

themes/modern/communicator/brand.css

@@ -68,11 +68,13 @@
   background: url("chrome://communicator/skin/toolbar/prtb-bg-noline.gif") #B1BDC9 repeat-x top;
 }
 
+#navigator-throbber[buttonstyle="text"],
 #navigator-throbber[toolbarmode="small"] {
-  margin: 0 5px 0 0;
+  margin: 0 5px;
   list-style-image: url("chrome://communicator/skin/brand/throbber16-single.gif");
 }
 
+#navigator-throbber[buttonstyle="text"][busy="true"],
 #navigator-throbber[toolbarmode="small"][busy="true"] {
   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.gif");
 }

themes/modern/communicator/button.css

@@ -82,6 +82,28 @@
   display: none;
 }
 
+.toolbarbutton-1[buttonstyle="pictures"] > stack > .toolbarbutton-menubutton-button 
+  > .toolbarbutton-text,
+.toolbarbutton-1[buttonstyle="pictures"] > .toolbarbutton-text {
+  display: none;
+}
+
+.toolbarbutton-1[buttonstyle="text"] > stack > .toolbarbutton-menubutton-button 
+  > .toolbarbutton-icon,
+.toolbarbutton-1[buttonstyle="text"] > .toolbarbutton-icon {
+  display: none;
+}
+
+.toolbarbutton-1[buttonstyle="pictures"] > .toolbarbutton-menubutton-stack
+    > .toolbarbutton-menubutton-dropmarker {
+  margin: 20px 0px 0px 40px;
+}
+
+.toolbarbutton-1[buttonstyle="text"] > .toolbarbutton-menubutton-stack
+    > .toolbarbutton-menubutton-dropmarker {
+  margin: 8px 0px 0px 40px;
+}
+
 /* ::::: standard toolbar buttons ::::: */
  
 .button-toolbar {

themes/modern/communicator/toolbar.css

@@ -45,7 +45,6 @@
 
 .toolbar-primary {
   -moz-binding: url("chrome://communicator/skin/toolbar/toolbarBindings.xml#toolbar-primary");
-  min-height: 45px;
   background-color: #B1BDC9;
 }
 
@@ -64,9 +63,15 @@
   background-position: top;
 }
 
+.toolbar-primary[buttonstyle="pictures"] > .toolbar-primary-holder > .toolbar-primary-icon,
+.toolbar-primary[buttonstyle="text"] > .toolbar-primary-holder > .toolbar-primary-icon {
+  display: none;
+}
+
 /* ::::: toolbargrippy ::::: */
  
 .toolbar-primary-grippy { 
+  -moz-binding: url("chrome://communicator/skin/toolbar/toolbarBindings.xml#toolbargrippy-primary");
   border: none;
   background: url("chrome://communicator/skin/toolbar/prtb-grip-mid.gif") repeat-y;
   list-style-image: url("chrome://communicator/skin/toolbar/prtb-grip-btm.gif");
@@ -74,8 +79,8 @@
 
 .toolbar-primary-grippy > .toolbargrippy-texture {
   width: 13px;
-  height: 34px;
-  background: url("chrome://communicator/skin/toolbar/prtb-grip-top.gif") no-repeat top;
+  height: 0px;
+  list-style-image: url("chrome://communicator/skin/toolbar/prtb-grip-top.gif");
 }
 
 .toolbar-primary-grippy > .toolbargrippy-arrow {
@@ -91,7 +96,7 @@
 }
 
 .toolbar-primary-grippy:hover:active > .toolbargrippy-texture {
-  background-image: url("chrome://communicator/skin/toolbar/prtb-grip-top-act.gif");
+  list-style-image: url("chrome://communicator/skin/toolbar/prtb-grip-top-act.gif");
 }
 
 /* ::::: toolbar-primary separator ::::: */

themes/modern/communicator/toolbar/toolbarBindings.xml

@@ -6,7 +6,7 @@
           xmlns:xbl="http://www.mozilla.org/xbl">
 
   <binding id="toolbar-primary"
-           extends="chrome://global/content/bindings/toolbar.xml#toolbar">
+           extends="chrome://global/content/bindings/toolbar.xml#toolbar-primary">
     <content>
       <xul:toolbargrippy xbl:inherits="last-toolbar"
           tbattr="toolbar-grippy" class="toolbar-primary-grippy"/>
@@ -22,8 +22,8 @@
   <binding id="toolbargrippy-primary"
            extends="chrome://global/content/bindings/toolbar.xml#toolbargrippy">
     <content>
-      <xul:spacer class="toolbargrippy-primary-top" flex="1"/>
-      <xul:spacer class="toolbargrippy-primary-btm"/>
+      <xul:image class="toolbargrippy-arrow"/>
+      <xul:image class="toolbargrippy-texture" flex="1"/>
     </content>
   </binding>
 

themes/modern/navigator/navigator.css

@@ -142,7 +142,13 @@
 .toolbarbutton-1 > stack > .toolbarbutton-menubutton-button 
   > .toolbarbutton-text,
 .toolbarbutton-1 > .toolbarbutton-text {
-  display: none;
+  display: none !important;
+}
+
+.toolbarbutton-1 > stack > .toolbarbutton-menubutton-button 
+  > .toolbarbutton-icon,
+.toolbarbutton-1 > .toolbarbutton-icon {
+  display: inline !important;
 }
 
 /* ::::: small primary toolbar buttons ::::: */

xpfe/global/resources/content/bindings/toolbar.xml

@@ -165,6 +165,58 @@
     </implementation>
   </binding>
 
+  <binding id="toolbar-primary" extends="chrome://global/content/bindings/toolbar.xml#toolbar">
+    <implementation implements="nsIObserver">
+      <field name="domain" readonly="true">
+        "browser.chrome.toolbar_style"
+      </field>
+
+      <field name="prefs" readonly="true">
+        Components.classes["@mozilla.org/preferences-service;1"]
+                  .getService(Components.interfaces.nsIPrefBranchInternal)
+                  .QueryInterface(Components.interfaces.nsIPrefBranch)
+      </field>
+
+      <method name="observe">
+        <parameter name="subject"/>
+        <parameter name="topic"/>
+        <parameter name="name"/>
+        <body>
+          <![CDATA[
+            if (topic == "nsPref:changed" && name == this.domain) {
+              const styles = ["pictures", "text", "both"];
+              const style = styles[this.prefs.getIntPref(name)];
+              this.setAttribute("buttonstyle", style);
+              this.update("toolbarbutton", style);
+              this.update("button", style);
+            }
+          ]]>
+        </body>
+      </method>
+
+      <method name="update">
+        <parameter name="tag"/>
+        <parameter name="style"/>
+        <body>
+          <![CDATA[
+            var elements = this.getElementsByTagName(tag);
+            for (var i = 0; i < elements.length; i++)
+              elements[i].setAttribute("buttonstyle", style);
+          ]]>
+        </body>
+      </method>
+
+      <constructor>
+        this.prefs.addObserver(this.domain, this, false);
+        this.observe(this.prefs, "nsPref:changed", this.domain);
+      </constructor>
+
+      <destructor>
+        this.prefs.removeObserver(this.domain, this);
+      </destructor>
+    </implementation>
+  </binding>
+
   <binding id="menubar" extends="xul:menubar">
     <resources>
       <stylesheet src="chrome://global/skin/toolbar.css"/>