Bug 391856 - button-images are outside the button and squeezed (new DM). r=mconnor/sdwilsh

toolkit/mozapps/downloads/content/download.xml

@@ -131,7 +131,7 @@
           <xul:spacer flex="1"/>
         </xul:vbox>
         <xul:vbox pack="center">
-          <xul:button class="cancel" tooltiptext="&cmd.cancel.label;"
+          <xul:button class="cancel mini-button" tooltiptext="&cmd.cancel.label;"
                       command="cmd_cancel"/>
         </xul:vbox>
       </xul:hbox>
@@ -156,9 +156,9 @@
                                  anonid="progressmeter"
                                  xbl:inherits="value=progress,mode=progressmode"/>
             </xul:vbox>
-            <xul:button class="pause" tooltiptext="&cmd.pause.label;"
+            <xul:button class="pause mini-button" tooltiptext="&cmd.pause.label;"
                         command="cmd_pause"/>
-            <xul:button class="cancel" tooltiptext="&cmd.cancel.label;"
+            <xul:button class="cancel mini-button" tooltiptext="&cmd.cancel.label;"
                         command="cmd_cancel"/>
           </xul:hbox>
           <xul:label xbl:inherits="value=status,tooltiptext=status" flex="1"
@@ -187,9 +187,9 @@
                                  anonid="progressmeter"
                                  xbl:inherits="value=progress,mode=progressmode"/>
             </xul:vbox>
-            <xul:button class="resume" tooltiptext="&cmd.resume.label;"
+            <xul:button class="resume mini-button" tooltiptext="&cmd.resume.label;"
                         command="cmd_resume"/>
-            <xul:button class="cancel" tooltiptext="&cmd.cancel.label;"
+            <xul:button class="cancel mini-button" tooltiptext="&cmd.cancel.label;"
                         command="cmd_cancel"/>
           </xul:hbox>
           <xul:label xbl:inherits="value=target,tooltiptext=target" flex="1"
@@ -217,9 +217,9 @@
         </xul:vbox>
         <xul:vbox pack="center">
           <xul:hbox>
-            <xul:button class="open" tooltiptext="&cmd.open.label;"
+            <xul:button class="open mini-button" tooltiptext="&cmd.open.label;"
                         command="cmd_open"/>
-            <xul:button class="info" tooltiptext="&cmd.info.label;"
+            <xul:button class="info mini-button" tooltiptext="&cmd.info.label;"
                         command="cmd_showInfo" anonid="info"/>
           </xul:hbox>
         </xul:vbox>
@@ -244,9 +244,9 @@
         </xul:vbox>
         <xul:vbox pack="center">
           <xul:hbox>
-            <xul:button class="retry" tooltiptext="&cmd.retry.label;"
+            <xul:button class="retry mini-button" tooltiptext="&cmd.retry.label;"
                         command="cmd_retry"/>
-            <xul:button class="info" tooltiptext="&cmd.info.label;"
+            <xul:button class="info mini-button" tooltiptext="&cmd.info.label;"
                         command="cmd_showInfo" anonid="info"/>
           </xul:hbox>
         </xul:vbox>
@@ -270,9 +270,9 @@
           <xul:label value="&failed.label;" class="status"/>
         </xul:vbox>
         <xul:vbox pack="start">
-          <xul:button class="retry" tooltiptext="&cmd.retry.label;"
+          <xul:button class="retry mini-button" tooltiptext="&cmd.retry.label;"
                       command="cmd_retry"/>
-          <xul:button class="info" tooltiptext="&cmd.info.label;"
+          <xul:button class="info mini-button" tooltiptext="&cmd.info.label;"
                       command="cmd_showInfo" anonid="info"/>
         </xul:vbox>
       </xul:hbox>

toolkit/mozapps/downloads/content/downloads.xul

@@ -149,8 +149,8 @@
   <!--Information popup-->
   <panel id="information" orient="vertical" align="start">
     <label id="information-title" flex="1"/>
-    <button type="image" crop="center" id="information-uri" flex="1"/>
-    <button type="image" crop="center" id="information-location" flex="1" command="cmd_show"/>
+    <button type="image" crop="center" id="information-uri" class="mini-button" flex="1"/>
+    <button type="image" crop="center" id="information-location" class="mini-button" flex="1" command="cmd_show"/>
   </panel>
 
   <richlistbox id="downloadView" flex="1" context="downloadContextMenu"

toolkit/themes/winstripe/mozapps/downloads/downloads.css

@@ -15,23 +15,13 @@
 /* Download View Items */
 richlistitem[type="download"] {
   padding: 4px 8px 4px 4px;
-  min-height: 46px !important;
+  min-height: 46px;
 }
 
 richlistitem[type="download"] .name {
   font-size: larger;
 }
 
-richlistitem[type="download"] button {
-  -moz-appearance: none;
-  min-height: 16px;
-  min-width: 16px;
-  max-height: 16px;
-  max-width: 16px;
-  padding: 0;
-  margin: 0 1px 0 1px;
-}
-
 #information {
   -moz-appearance: none;
   background-color: white;
@@ -39,26 +29,32 @@ richlistitem[type="download"] button {
   max-width: 300px;
 }
 
-#information > button {
-  -moz-appearance: none;
-  margin: 0;
-  padding: 0;
-  width: 300px;
-}
-
 #information > button .button-text {
   -moz-box-flex: 1;
   text-align: left;
+  padding-left: 2px;
 }
 
-/**
- * Images for buttons in the interface
- */
-richlistitem[type="download"] button,
-#information-uri,
-#information-location {
+.mini-button {
+  -moz-appearance: none;
   list-style-image: url(chrome://mozapps/skin/downloads/buttons.png);
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+  min-height: 0;
 }
+
+.mini-button > .button-box {
+  padding: 0 !important;
+}
+
+.mini-button > image {
+  width: 16px;
+  height: 16px;
+}
+
 .cancel {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }