Bug 658530 - Part 1: Move button-related shared styles into inContentUI. r=dao
authorBlair McBride <bmcbride@mozilla.com>
Thu, 11 Aug 2011 12:41:46 +1200
changeset 74303 fd84808b1eddbf3e09cba3c2f06999fc482ee278
parent 74104 248aed2b337d2c9a0012f21c055fddc1cd0f851a
child 74304 c14bbf65c00efb0e7e68dde2525ca8f6fbb1f6d6
push id2
push userbsmedberg@mozilla.com
push dateFri, 19 Aug 2011 14:38:13 +0000
reviewersdao
bugs658530
milestone8.0a1
Bug 658530 - Part 1: Move button-related shared styles into inContentUI. r=dao HG: Enter/resume commit message. Lines beginning with 'HG:' are removed. HG: You can save this message, and edit it again later before committing. HG: After exiting the editor, you will return to the crecord patch view. HG: -- HG: user: Blair McBride <bmcbride@mozilla.com>
toolkit/mozapps/extensions/content/extensions.xul
toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
toolkit/themes/pinstripe/global/inContentUI.css
toolkit/themes/pinstripe/mozapps/extensions/extensions.css
toolkit/themes/winstripe/global/inContentUI.css
toolkit/themes/winstripe/mozapps/extensions/extensions.css
--- a/toolkit/mozapps/extensions/content/extensions.xul
+++ b/toolkit/mozapps/extensions/content/extensions.xul
@@ -321,17 +321,17 @@
             </hbox>
             <spacer class="alert-spacer-after"/>
           </vbox>
           <vbox id="search-list-empty" class="alert-container"
                 flex="1" hidden="true">
             <spacer class="alert-spacer-before"/>
             <vbox class="alert">
               <label value="&listEmpty.search.label;"/>
-              <button label="&listEmpty.button.label;" class="addon-control"
+              <button label="&listEmpty.button.label;"
                       command="cmd_goToDiscoverPane"/>
             </vbox>
             <spacer class="alert-spacer-after"/>
           </vbox>
           <richlistbox id="search-list" class="list" flex="1">
             <hbox pack="center">
               <label id="search-allresults-link" class="text-link"/>
             </hbox>
@@ -381,17 +381,17 @@
               <spacer flex="5000"/> <!-- Necessary to allow the message to wrap -->
             </hbox>
           </hbox>
           <vbox id="addon-list-empty" class="alert-container"
                 flex="1" hidden="true">
             <spacer class="alert-spacer-before"/>
             <vbox class="alert">
               <label value="&listEmpty.installed.label;"/>
-              <button label="&listEmpty.button.label;" class="addon-control"
+              <button label="&listEmpty.button.label;"
                       command="cmd_goToDiscoverPane"/>
             </vbox>
             <spacer class="alert-spacer-after"/>
           </vbox>
           <richlistbox id="addon-list" class="list" flex="1"/>
         </vbox>
 
         <!-- updates view -->
@@ -432,17 +432,17 @@
                   ascending="false"/>
           </hbox>
           <vbox id="updates-list-empty" class="alert-container"
                 flex="1" hidden="true">
             <spacer class="alert-spacer-before"/>
             <vbox class="alert">
               <label id="empty-availableUpdates-msg" value="&listEmpty.availableUpdates.label;"/>
               <label id="empty-recentUpdates-msg" value="&listEmpty.recentUpdates.label;"/>
-              <button label="&listEmpty.findUpdates.label;" class="addon-control"
+              <button label="&listEmpty.findUpdates.label;"
                       command="cmd_findAllUpdates"/>
             </vbox>
             <spacer class="alert-spacer-after"/>
           </vbox>
           <hbox id="update-actions" pack="center">
             <button id="update-selected-btn" hidden="true"
                     label="&updates.updateSelected.label;"
                     tooltiptext="&updates.updateSelected.tooltip;"/>
--- a/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/gnomestripe/mozapps/extensions/extensions.css
@@ -131,17 +131,17 @@
 }
 
 .alert .alert-title {
   font-weight: bold;
   font-size: 200%;
   margin-bottom: 15px;
 }
 
-.alert .addon-control {
+.alert button {
   margin: 1em 2em;
 }
 
 .loading {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
   padding-left: 20px;
   padding-right: 20px;
 }
--- a/toolkit/themes/pinstripe/global/inContentUI.css
+++ b/toolkit/themes/pinstripe/global/inContentUI.css
@@ -55,8 +55,108 @@
   /* Needed to allow the radius to clip the inner content, see bug 595656 */
   /* Disabled because of bug 623615
   overflow: hidden;
   */
   background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0.05));
   border: 1px solid rgba(50, 65, 92, 0.4);
   border-radius: 5px;
 }
+
+/* Buttons */
+button,
+menulist,
+colorpicker[type="button"] {
+  -moz-appearance: none;
+  padding: 1px 4px;
+  min-width: 60px;
+  border-radius: 3px;
+  border: 1px solid rgba(60,73,97,0.5);
+  box-shadow: inset 0 1px rgba(255,255,255,0.25), 0 1px rgba(255,255,255,0.25);
+  background-color: transparent;
+  background-image: -moz-linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.2));
+  background-clip: padding-box;
+  color: #252F3B;
+  text-shadow: @loweredShadow@;
+}
+
+button:-moz-focusring > .button-box,
+menulist:-moz-focusring:not([open="true"]) > .menulist-label-box,
+colorpicker[type="button"]:-moz-focusring:not([open="true"]) > .colorpicker-button-colorbox {
+  outline: 1px dotted #252F3B;
+}
+
+button[disabled="true"],
+menulist[disabled="true"],
+colorpicker[type="button"][disabled="true"] {
+  opacity: 0.8;
+  color: #505050;
+}
+
+button:not([disabled="true"]):active:hover,
+menulist[open="true"]:not([disabled="true"]),
+colorpicker[type="button"][open="true"]:not([disabled="true"]) {
+  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 1px rgba(255,255,255,0.25);
+  background-image: -moz-linear-gradient(rgba(45,54,71,0.3), rgba(45,54,71,0.1));
+  border-color: rgba(60,73,97,0.7);
+}
+
+menulist {
+  -moz-padding-end: 0;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+/* Tweak margins so the focus ring is in the right place. */
+menulist > .menulist-label-box {
+  -moz-margin-end: 3px;
+  margin-top: 1px;
+}
+
+menulist > .menulist-label-box > .menulist-label {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+
+menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  display: -moz-box;
+  background: transparent;
+  border: none;
+  -moz-border-start: 1px solid rgba(60,73,97,0.5);
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
+colorpicker[type="button"] {
+  margin: 1px 5px 2px 5px;
+  padding: 3px;
+  height: 25px;
+}
+
+spinbuttons {
+  -moz-appearance: none;
+}
+
+spinbuttons > .spinbuttons-box > .spinbuttons-button {
+  min-width: 12px;
+}
+
+.spinbuttons-button > .button-box > .button-text {
+  display: none;
+}
+
+.spinbuttons-button[disabled="true"] > .button-box > .button-icon {
+  opacity: 0.5;
+}
+
+spinbuttons > .spinbuttons-box > .spinbuttons-up {
+  list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
+  border-bottom-width: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+spinbuttons > .spinbuttons-box > .spinbuttons-down {
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
--- a/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/pinstripe/mozapps/extensions/extensions.css
@@ -162,17 +162,17 @@
 }
 
 .alert .alert-title {
   font-weight: bold;
   font-size: 200%;
   margin-bottom: 15px;
 }
 
-.alert .addon-control {
+.alert button {
   margin: 1em 2em;
 }
 
 .loading {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
   padding-left: 20px;
   padding-right: 20px;
 }
@@ -1077,71 +1077,48 @@ setting[type="string"] > .setting-input 
 
 #update-selected {
   margin: 12px;
 }
 
 
 /*** buttons ***/
 
-.addon-control,
-setting:not([type="integer"]) button,
-setting[type="control"] menulist,
-setting[type="color"] colorpicker[type="button"] {
-  -moz-appearance: none;
-  padding: 1px 4px;
-  min-width: 60px;
-  border-radius: 3px;
-  border: 1px solid rgba(60,73,97,0.5);
-  box-shadow: inset 0 1px rgba(255,255,255,0.25), 0 1px rgba(255,255,255,0.25);
-  background-image: -moz-linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.2));
-  background-clip: padding-box;
-  color: #252F3B;
-  text-shadow: @loweredShadow@;
-}
-
 .addon-control[disabled="true"] {
   display: none;
 }
 
-setting[type="color"] colorpicker[type="button"] {
-  margin: 1px 5px 2px 5px;
-  padding: 3px;
-  height: 25px;
-}
-
-.addon-control:active:hover,
-setting:not([type="integer"]) button:active:hover,
-setting[type="control"] menulist:active:hover,
-setting[type="color"] colorpicker[type="button"]:active:hover {
-  box-shadow: inset 0 1px 3px rgba(0,0,0,.2), 0 1px rgba(255,255,255,0.25);
-  background-image: -moz-linear-gradient(rgba(45,54,71,0.3), rgba(45,54,71,0.1));
-  border-color: rgba(60,73,97,0.7);
-}
-
-.button-link {
+button.button-link {
   -moz-appearance: none;
   background: transparent;
   border: none;
+  box-shadow: none;
   text-decoration: underline;
   color: #0066CC;
   cursor: pointer;
   min-width: 0;
   margin: 0 6px;
 }
 
 .text-link {
   color: #3386D5;
 }
 
 .button-link:hover,
 .text-link:hover {
   color: #3DA1FF;
 }
 
+/* Needed to override normal button style from inContent.css */
+button.button-link:not([disabled="true"]):active:hover {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
 .header-button {
   -moz-appearance: none;
   padding: 0 4px;
   margin: 0;
   height: 22px;
   border: 1px solid rgba(60,73,97,0.5);
   border-radius: @toolbarbuttonCornerRadius@;
   box-shadow: inset 0 1px rgba(255,255,255,0.25), 0 1px rgba(255,255,255,0.25);
--- a/toolkit/themes/winstripe/global/inContentUI.css
+++ b/toolkit/themes/winstripe/global/inContentUI.css
@@ -100,8 +100,80 @@
   */
   background-color: rgba(255, 255, 255, 0.35);
   background-image: -moz-linear-gradient(top,
                                          rgba(255, 255, 255, 0),
                                          rgba(255, 255, 255, 0.75));
   border: 1px solid #C3CEDF;
   border-radius: 5px;
 }
+
+%ifdef WINSTRIPE_AERO
+@media all and (-moz-windows-compositor) {
+  /* Buttons */
+  button,
+  menulist,
+  colorpicker[type="button"] {
+    -moz-appearance: none;
+    color: black;
+    padding: 0 5px;
+    background: -moz-linear-gradient(rgba(251, 252, 253, 0.95), rgba(246, 247, 248, 0) 49%, 
+                                     rgba(211, 212, 213, 0.45) 51%, rgba(225, 226, 229, 0.3));
+    background-clip: padding-box;
+    border-radius: 3px;
+    border: 1px solid rgba(31, 64, 100, 0.4);
+    border-top-color: rgba(31, 64, 100, 0.3);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset,
+                0 0 2px 1px rgba(255, 255, 255, 0.25) inset;
+  }
+
+  menulist {
+    -moz-padding-end: 0;
+  }
+
+  colorpicker[type="button"]:-moz-focusring:not([open="true"]) > .colorpicker-button-colorbox {
+    outline: 1px dotted ThreeDDarkShadow;
+  }
+
+  button[disabled="true"],
+  menulist[disabled="true"],
+  colorpicker[type="button"][disabled="true"] {
+    -moz-border-top-colors: rgba(31, 64, 100, 0.3) !important;
+    -moz-border-right-colors: rgba(31, 64, 100, 0.4) !important;
+    -moz-border-bottom-colors: rgba(31, 64, 100, 0.4) !important;
+    -moz-border-left-colors: rgba(31, 64, 100, 0.4) !important;
+    opacity: 0.8;
+    color: #505050;
+  }
+
+  button:not([disabled="true"]):active:hover,
+  menulist[open="true"]:not([disabled="true"]),
+  colorpicker[type="button"][open="true"]:not([disabled="true"]) {
+    background-color: rgba(61, 76, 92, 0.2);
+    border-color: rgba(39, 53, 68, 0.5);
+    box-shadow: 0 0 3px 1px rgba(39, 53, 68, 0.2) inset;
+  }
+
+  button > .button-box {
+    padding: 1px !important;
+  }
+
+  spinbuttons > .spinbuttons-box > .spinbuttons-button {
+    border-radius: 0;
+    padding: 0 4px;
+  }
+
+  spinbuttons > .spinbuttons-box > .spinbuttons-up {
+    list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
+    border-bottom-width: 0;
+  }
+
+  spinbuttons > .spinbuttons-box > .spinbuttons-down {
+    list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
+  }
+}
+%endif
+
+colorpicker[type="button"] {
+  margin: 1px 5px 2px 5px;
+  padding: 3px;
+  height: 25px;
+}
--- a/toolkit/themes/winstripe/mozapps/extensions/extensions.css
+++ b/toolkit/themes/winstripe/mozapps/extensions/extensions.css
@@ -174,17 +174,17 @@
 }
 
 .alert .alert-title {
   font-weight: bold;
   font-size: 200%;
   margin-bottom: 15px;
 }
 
-.alert .addon-control {
+.alert button {
   margin: 1em 2em;
 }
 
 .loading {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
   padding-left: 20px;
   padding-right: 20px;
 }
@@ -1078,77 +1078,48 @@ menulist { /* Fixes some styling inconsi
 
 #update-selected {
   margin: 12px;
 }
 
 
 /*** buttons ***/
 
-.addon-control,
-setting:not([type="integer"]) button,
-setting[type="control"] menulist,
-setting[type="color"] colorpicker[type="button"] {
-  -moz-appearance: none;
-  color: black;
-  padding: 0 5px;
-  background: -moz-linear-gradient(rgba(251, 252, 253, 0.95), rgba(246, 247, 248, 0) 49%, 
-                                   rgba(211, 212, 213, 0.45) 51%, rgba(225, 226, 229, 0.3));
-  background-clip: padding-box;
-  border-radius: 3px;
-  border: 1px solid rgba(31, 64, 100, 0.4);
-  border-top-color: rgba(31, 64, 100, 0.3);
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset,
-              0 0 2px 1px rgba(255, 255, 255, 0.25) inset;
-}
-
-setting[type="color"] colorpicker[type="button"] {
-  margin: 1px 5px 2px 5px;
-  padding: 3px;
-  height: 25px;
-}
-
-.addon-control:active:hover,
-setting:not([type="integer"]) button:active:hover,
-setting[type="control"] menulist:active:hover,
-setting[type="color"] colorpicker[type="button"]:active:hover {
-  background-color: rgba(61, 76, 92, 0.2);
-  border-color: rgba(39, 53, 68, 0.5);
-  box-shadow: 0 0 3px 1px rgba(39, 53, 68, 0.2) inset;
-}
-
-.addon-control > .button-box,
-setting:not([type="integer"]) button > .button-box {
-  padding: 1px;
-}
-
 .addon-control[disabled="true"] {
   display: none;
 }
 
-.button-link {
+button.button-link {
   -moz-appearance: none;
   background: transparent;
   border: none;
+  box-shadow: none;
   text-decoration: underline;
   color: #0066CC;
   cursor: pointer;
   min-width: 0;
   margin: 0 6px;
 }
 
 .text-link {
   color: #3386D5;
 }
 
 .button-link:hover,
 .text-link:hover {
   color: #3DA1FF;
 }
 
+/* Needed to override normal button style from inContent.css */
+button.button-link:not([disabled="true"]):active:hover {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
 .header-button {
   -moz-appearance: none;
   padding: 1px 3px;
   color: #444;
   text-shadow: 0 0 3px white;
   background: -moz-linear-gradient(rgba(251, 252, 253, 0.95), rgba(246, 247, 248, 0) 49%, 
                                    rgba(211, 212, 213, 0.45) 51%, rgba(225, 226, 229, 0.3));
   background-clip: padding-box;