Fix for rtm++ 54574, fixing broken back and forward button feedback behaviour to work with either implementation of :hover, and repair

stretched icons. r=blakeross@telocity.com, a=hyatt

themes/classic/communicator/win/menubutton.css

@@ -6,17 +6,33 @@
     -moz-user-focus       : ignore !important;
   }
 
+.menubutton-dual.toolbar.left
+  {
+    -moz-binding          : url("chrome://global/content/menulistBindings.xml#menubutton-dual-ex-left");
+    border                : 1px solid transparent;
+    -moz-user-focus       : ignore !important;
+  }
+
 /* internal button */  
 .menubutton-dual-ex-button.top
   {
     -moz-binding          : url("chrome://global/skin/buttonBindings.xml#simplebutton");
-    border                : 1px solid transparent; 
+    border                : 1px solid transparent;
     min-width             : 47px;
     margin                : 0px;
     padding               : 2px 7px 2px 6px;
     -moz-user-focus       : ignore !important;
   }  
 
+.menubutton-dual-ex-button.left
+  {
+    -moz-binding          : url("chrome://global/skin/buttonBindings.xml#simplebutton");
+    border                : 1px solid transparent;
+    margin                : 0px;
+    padding               : 2px 7px 2px 6px;
+    -moz-user-focus       : ignore !important;
+  }  
+
 /* dropmarker */
 .menubutton-dropmarker
   {
@@ -30,7 +46,7 @@
   }
 
 /** disabled **/
-.menubutton-dual-ex-button.top[disabled="true"]
+.menubutton-dual-ex-button[disabled="true"]
   {
     color                 : graytext;
   }  
@@ -60,7 +76,41 @@
       color                 : graytext;
     }
     
-  .menubutton-dual.toolbar[disabled="true"]:hover > .menubutton-dual-ex-button
+/**
+ * XXX - this is a hack. :hover does not work to spec and so we're using a binding
+ *       with JS that lives in xpfe/global/resources/content/menulistBindings.xml
+ *       to set attributes on various parts of the button when mouse down/over 
+ *       events fire. When :hover works correctly, this can be removed (see
+ *       revision 1.21 of this file for details.
+ */
+
+  /* 2) menubutton gets black border */
+  .menubutton-dual.toolbar[buttonover="true"]
+    {
+      border                : 1px solid threeddarkshadow;
+    }
+    
+  .menubutton-dual.toolbar[buttonover="true"][disabled="true"]
+    {
+      border                : 1px solid transparent;
+    }
+    
+  .menubutton-dual.toolbar[disabled="true"]:hover > .menubutton-dual-ex-button,
+  .menubutton-dual.toolbar[disabled="true"][buttonover="true"] > .menubutton-dual-ex-button
+    {
+      border                : 1px solid transparent;
+    }
+
+  /* 3) dropmarker gets outset border */
+  .menubutton-dual.toolbar[buttonover="true"] > .menubutton-dual-dropmarker-box
+    {
+      border-left           : 1px solid threedhighlight;
+      border-top            : 1px solid threedhighlight;
+      border-right          : 1px solid threedshadow;
+      border-bottom         : 1px solid threedshadow;
+    }    
+    
+  .menubutton-dual.toolbar[buttonover="true"][disabled="true"] > .menubutton-dual-dropmarker-box
     {
       border                : 1px solid transparent;
     }
@@ -74,14 +124,30 @@
       border-top            : 1px solid threedshadow !important;
       border-right          : 1px solid threedhighlight !important;
       border-bottom         : 1px solid threedhighlight !important;
-      padding               : 3px 6px 1px 7px;
+      padding               : 3px 6px 1px 7px !important;
       color                 : #000080 !important;
     }
     
   .menubutton-dual-ex-button[disabled="true"]:hover:active
     {
       border                : 1px solid transparent !important;
-      padding               : 2px 7px 2px 6px;
+      padding               : 2px 7px 2px 6px !important;
+    }
+    
+  /* 2). dropmarker gets inset border */
+  .menubutton-dual.toolbar[buttondown="true"] > .menubutton-dual-dropmarker-box
+    {
+      border-left           : 1px solid threedshadow !important;
+      border-top            : 1px solid threedshadow !important;
+      border-right          : 1px solid threedhighlight !important;
+      border-bottom         : 1px solid threedhighlight !important;
+      padding               : 2px 0px 0px 0px !important;
+    }    
+    
+  .menubutton-dual.toolbar[buttondown="true"][disabled="true"] > .menubutton-dual-dropmarker-box
+    {
+      border                : 1px solid transparent !important;
+      padding               : 0px !important;
     }
     
 /* ACTION: mouse over the menu */

xpfe/global/resources/content/menulistBindings.xml

@@ -46,7 +46,7 @@
   <binding id="menubutton-single-right">
     <content includes="menupopup">
       <xul:box class="menubutton-internal-box" autostretch="never">
-        <xul:text class="menubutton-single-text" inherits="value,crop,accesskey,disabled"/>
+        <xul:text class="menubutton-single-text" inherits="value,crop,accesskey"/>
         <xul:image class="menubutton-single-icon"/>
       </xul:box>
     </content>
@@ -56,7 +56,7 @@
     <content includes="menupopup">
       <xul:box class="menubutton-internal-box" autostretch="never">
         <xul:image class="menubutton-single-icon"/>
-        <xul:text class="menubutton-single-text" inherits="value,crop,accesskey,disabled"/>
+        <xul:text class="menubutton-single-text" inherits="value,crop,accesskey"/>
       </xul:box>
     </content>
   </binding>
@@ -81,7 +81,7 @@
     <content includes="menupopup">
       <xul:box class="menubutton-internal-box">
         <xul:button class="menubutton-dual-button top" allowevents="true" 
-                    inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey,disabled"/>
+                    inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey"/>
         <xul:box class="menubutton-dual-dropmarker-box" autostretch="never" valign="middle">
           <xul:image class="menubutton-dropmarker"/>
         </xul:box>
@@ -93,7 +93,7 @@
     <content includes="menupopup">
       <xul:box class="menubutton-internal-box">
         <xul:button class="menubutton-dual-button left" allowevents="true" 
-                    inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey,disabled"/>
+                    inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey"/>
         <xul:box class="menubutton-dual-dropmarker-box" autostretch="never" valign="middle">
           <xul:image class="menubutton-dropmarker"/>
         </xul:box>
@@ -105,7 +105,7 @@
     <content includes="menupopup">
       <xul:box class="menubutton-internal-box">
         <xul:button class="menubutton-dual-button right" allowevents="true" 
-                    inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey,disabled"/>
+                    inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey"/>
         <xul:box class="menubutton-dual-dropmarker-box" autostretch="never" valign="middle">
           <xul:image class="menubutton-dropmarker"/>
         </xul:box>
@@ -117,7 +117,7 @@
     <content includes="menupopup">
       <xul:box class="menubutton-internal-box">
         <xul:button class="menubutton-dual-button bottom" allowevents="true" 
-                    inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey,disabled"/>
+                    inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey"/>
         <xul:box class="menubutton-dual-dropmarker-box" autostretch="never" valign="middle">
           <xul:image class="menubutton-dropmarker"/>
         </xul:box>
@@ -127,18 +127,62 @@
 
   <binding id="menubutton-dual-ex" extends="chrome://global/content/menulistBindings.xml#menubutton-dual-top">
     <content includes="menupopup">
-      <xul:button class="menubutton-dual-ex-button top" allowevents="true" 
-                  inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey,disabled"/>
+      <xul:button class="menubutton-dual-ex-button top" allowevents="true" autostretch="never" align="center"
+                  inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey,disabled"
+                  onmouseover="this.parentNode.buttonover = true;"
+                  onmouseout="this.parentNode.buttonover = false;"
+                  onmousedown="this.parentNode.buttondown = true;"
+                  onmouseup="this.parentNode.buttondown = false;"/>
       <xul:box class="menubutton-dual-dropmarker-box" autostretch="never" valign="middle" inherits="disabled">
         <xul:image class="menubutton-dropmarker" inherits="disabled"/>
       </xul:box>
     </content>
+    <implementation>
+      <property name="buttonover">
+        <getter>
+          return this.getAttribute("buttonover");
+        </getter>
+        <setter>
+        <![CDATA[
+          if (!val && this.getAttribute("buttondown") == "true") { 
+            this.removeAttribute("buttondown");
+            this._pendingActive = true;
+          } 
+          else {
+            if (this._pendingActive && this._buttonIsDown) {
+              this.setAttribute("buttondown", "true");
+              this._pendingActive = false;
+              this._buttonIsDown = false;
+            }
+          }
+          this.setAttribute("buttonover", val);
+          return val;
+        ]]>
+        </setter>
+      </property>
+      <property name="buttondown">
+        <getter>
+          return this.getAttribute("buttondown");
+        </getter>
+        <setter>
+          if (val) this._buttonIsDown = true;
+          this.setAttribute("buttondown", val);
+          return val;
+        </setter>
+      </property>
+      <property name="_pendingActive">false</property>
+      <property name="_buttonIsDown">false</property>
+    </implementation>
   </binding>
   
   <binding id="menubutton-dual-ex-left" extends="chrome://global/content/menulistBindings.xml#menubutton-dual-ex">
-    <content excludes="template,observes,menupopup">
-      <xul:button class="menubutton-dual-ex-button left" allowevents="true" 
-                  inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey,disabled"/>
+    <content excludes="menupopup">
+      <xul:button class="menubutton-dual-ex-button left" allowevents="true" autostretch="never" 
+                  inherits="tooltiptext=buttontooltiptext,oncommand=buttonaction,src,value,crop,accesskey,disabled"
+                  onmouseover="this.parentNode.buttonover = true;"
+                  onmouseout="this.parentNode.buttonover = false;"
+                  onmousedown="this.parentNode.buttondown = true;"
+                  onmouseup="this.parentNode.buttondown = false;"/>
       <xul:box class="menubutton-dual-dropmarker-box" autostretch="never" valign="middle" inherits="disabled">
         <xul:image class="menubutton-dropmarker" inherits="disabled"/>
       </xul:box>
@@ -151,7 +195,7 @@
   -->  
   <binding id="menubutton-item">
     <content autostretch="never" includes="menupopup">
-      <xul:text class="menubutton-text" flex="1" inherits="value,accesskey,crop,disabled" crop="right"/>
+      <xul:text class="menubutton-text" flex="1" inherits="value,accesskey,crop" crop="right"/>
     </content>
   </binding>