Bug 22056 Show toolbars as text/icons/both

patch by neil@parkwaycc.co.uk r=timeless sr=bz
using xbl:inherits

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,16 @@
   display: none;
 }
 
+.toolbarbutton-1[buttonstyle="pictures"],
+.toolbarbutton-menubutton-button[buttonstyle="pictures"] {
+  min-width: 0px;
+}
+
+.toolbarbutton-text[buttonstyle="pictures"],
+.toolbarbutton-icon[buttonstyle="text"] {
+  display: none;
+}
+
 /* ::::: standard toolbar buttons ::::: */
 
 .button-toolbar {

themes/classic/navigator/navigator.css

@@ -140,9 +140,7 @@
   min-width: 0;
 }
 
-.toolbarbutton-1[toolbarmode="small"] > .toolbarbutton-menubutton-button
-    > .toolbarbutton-text,
-.toolbarbutton-1[toolbarmode="small"] > .toolbarbutton-text {
+.toolbarbutton-text[toolbarmode="small"] {
   display: none;
 }
 
@@ -150,15 +148,18 @@
   display: none;
 }
 
-#nav-bar[toolbarmode="small"] > #nav-bar-inner {
-  margin: 0;
-  border: none;
+.toolbarbutton-icon[toolbarmode="small"] {
+  display: inline;
 }
 
 #nav-bar[toolbarmode="small"] > .toolbar-primary-grippy {
   display: none;
 }
 
+.toolbarbutton-text[buttonstyle="text"] {
+  padding: 4px 0;
+}
+
 /* ::::: fullscreen window controls ::::: */
 
 #window-controls {
@@ -185,7 +186,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,19 @@
   display: none;
 }
 
+.toolbarbutton-text[buttonstyle="pictures"],
+.toolbarbutton-icon[buttonstyle="text"] {
+  display: none;
+}
+
+.toolbarbutton-menubutton-dropmarker[buttonstyle="pictures"] {
+  margin: 20px 0px 0px 40px;
+}
+
+.toolbarbutton-menubutton-dropmarker[buttonstyle="text"] {
+  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;
 }
 
@@ -57,6 +56,11 @@
   border-left: none;
 }
 
+.toolbar-primary-holder[buttonstyle="pictures"],
+.toolbar-primary-holder[buttonstyle="text"] {
+  background-image: url("chrome://communicator/skin/toolbar/prtb-bg-noline.gif");
+}
+
 .toolbar-primary-icon {
   width: 77px;
   height: 50px;
@@ -64,9 +68,15 @@
   background-position: top;
 }
 
+.toolbar-primary-icon[buttonstyle="pictures"],
+.toolbar-primary-icon[buttonstyle="text"] {
+  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 +84,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 +101,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,12 +6,12 @@
           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"/>
-      <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient">
-        <xul:image class="toolbar-primary-icon"/>
+      <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle">
+        <xul:image class="toolbar-primary-icon" xbl:inherits="buttonstyle"/>
         <xul:hbox class="toolbar-button-box" flex="1">
           <children/>
         </xul:hbox>
@@ -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/global/globalBindings.xml

@@ -16,8 +16,8 @@
         <xul:toolbarbutton class="box-inherit toolbarbutton-menubutton-button"
              anonid="button" allowevents="true"
              xbl:inherits="disabled,image,label,crop,accesskey,command,
-                           buttonover,buttondown,align,dir,pack,orient"/>
-        <xul:dropmarker type="menu-button" xbl:inherits="open,disabled"
+                           buttonover,buttondown,align,dir,pack,orient,toolbarmode,buttonstyle"/>
+        <xul:dropmarker type="menu-button" xbl:inherits="open,disabled,toolbarmode,buttonstyle"
                         class="toolbarbutton-menubutton-dropmarker"/>
       </xul:stack>
     </content>

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 ::::: */
@@ -216,12 +222,8 @@
   -moz-image-region: rect(57px 76px 76px 57px) !important;
 } 
 
-#back-button[toolbarmode="small"] > .toolbarbutton-menubutton-stack
-    > .toolbarbutton-menubutton-dropmarker,
-#forward-button[toolbarmode="small"] > .toolbarbutton-menubutton-stack
-    > .toolbarbutton-menubutton-dropmarker
-{
-  margin: 8px 0px 0px 14px;
+.toolbarbutton-menubutton-dropmarker[toolbarmode="small"] {
+  margin: 8px 0px 0px 14px !important;
 }
 
 /* temporary - still don't have small print icons */

xpfe/components/prefwindow/resources/content/pref-appearance.xul

@@ -37,7 +37,7 @@
   <script type="application/x-javascript">
   <![CDATA[
     var panel = "chrome://communicator/content/pref/pref-appearance.xul";
-    var _elementIDs = ["generalStartupBrowser", "showHideTooltips", "useSiteIcons"];
+    var _elementIDs = ["generalStartupBrowser", "toolbarStyle", "showHideTooltips", "useSiteIcons"];
   ]]>
   </script>
           
@@ -50,6 +50,16 @@
     <!-- XXX -->
   </groupbox>
   
+  <groupbox id="toolbarStyleBox">
+    <caption label="&showToolsLegend.label;"/>
+    <radiogroup id="toolbarStyle" align="start"
+                prefstring="browser.chrome.toolbar_style">
+      <radio group="toolbarStyle" value="2" label="&picsNtextRadio.label;" accesskey="&picsNtextRadio.accesskey;"/>
+      <radio group="toolbarStyle" value="0" label="&picsOnlyRadio.label;" accesskey="&picsOnlyRadio.accesskey;"/>
+      <radio group="toolbarStyle" value="1" label="&textonlyRadio.label;" accesskey="&textonlyRadio.accesskey;"/>
+    </radiogroup>
+  </groupbox>
+
   <vbox class="box-padded" align="start">
     <separator class="thin" />
 

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

@@ -165,6 +165,59 @@
     </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", null];
+              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);
+        if (this.prefs.getIntPref(this.domain) != 2)
+          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"/>

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

@@ -13,9 +13,9 @@
     
     <content>
       <children includes="observes|template|menupopup|tooltip"/>
-      <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image"/>
+      <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,toolbarmode,buttonstyle"/>
       <xul:label class="toolbarbutton-text" crop="right" flex="1"
-                 xbl:inherits="value=label,accesskey,crop"/>
+                 xbl:inherits="value=label,accesskey,crop,toolbarmode,buttonstyle"/>
     </content>
   </binding>
 
@@ -23,9 +23,9 @@
            extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
     <content>
       <children includes="observes|template|menupopup|tooltip"/>
-      <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image"/>
+      <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=image,toolbarmode,buttonstyle"/>
       <xul:label class="toolbarbutton-text" crop="right" flex="1"
-                 xbl:inherits="value=label,accesskey,crop,dragover-top"/>
+                 xbl:inherits="value=label,accesskey,crop,dragover-top,toolbarmode,buttonstyle"/>
       <xul:dropmarker type="menu" class="toolbarbutton-menu-dropmarker" xbl:inherits="disabled"/>
     </content>
   </binding>
@@ -41,9 +41,9 @@
       <xul:toolbarbutton class="box-inherit toolbarbutton-menubutton-button"
                          anonid="button" flex="1" allowevents="true"
                          xbl:inherits="disabled,crop,image,label,accessKey,command,
-                                       align,dir,pack,orient"/>
+                                       align,dir,pack,orient,toolbarmode,buttonstyle"/>
       <xul:dropmarker type="menu-button" class="toolbarbutton-menubutton-dropmarker"
-                      xbl:inherits="align,dir,pack,orient,disabled"/>
+                      xbl:inherits="align,dir,pack,orient,disabled,toolbarmode,buttonstyle"/>
     </content>
   </binding>