Bug 1139949 - Make the small swatch of current theme in the themes button smaller and rounded. ui-r=phlsa, r=Gijs, a=lizzard
authorBlake Winton <bwinton@latte.ca>
Fri, 27 Mar 2015 13:34:27 -0400
changeset 265367 bb9ade69b666c43748bea083fe074c3c7220d5b0
parent 265366 e7bb84d2392185eab733dbb0333a81f0910375d5
child 265368 4ad0c7cad3bfd44ae240890b18ec65359c2ed637
push id4718
push userraliiev@mozilla.com
push dateMon, 11 May 2015 18:39:53 +0000
treeherdermozilla-beta@c20c4ef55f08 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersphlsa, Gijs, lizzard
bugs1139949
milestone39.0a2
Bug 1139949 - Make the small swatch of current theme in the themes button smaller and rounded. ui-r=phlsa, r=Gijs, a=lizzard
browser/components/customizableui/CustomizeMode.jsm
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -126,20 +126,22 @@ CustomizeMode.prototype = {
       this.exit();
     } else {
       this.enter();
     }
   },
 
   swatchForTheme: function(aDocument) {
    let lwthemeButton = aDocument.getElementById("customization-lwtheme-button");
+   let lwthemeIcon = aDocument.getAnonymousElementByAttribute(lwthemeButton,
+          "class", "button-icon");
    let imageURL = LightweightThemeManager.currentTheme === null ?
           "chrome://browser/skin/theme-switcher-icon.png" :
           LightweightThemeManager.currentTheme.iconURL;
-    lwthemeButton.setAttribute("image", imageURL);
+    lwthemeIcon.style.backgroundImage = "url(" + imageURL + ")";
   },
 
   enter: function() {
     this._wantToBeInCustomizeMode = true;
 
     if (this._customizing || this._handler.isEnteringCustomizeMode) {
       return;
     }
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -159,16 +159,23 @@
 }
 
 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
 #customization-titlebar-visibility-button > .button-box > .button-text {
   /* Sadly, button.css thinks its margins are perfect for everyone. */
   -moz-margin-start: 6px !important;
 }
 
+#customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  background-size: contain;
+}
+
 #customization-titlebar-visibility-button > .button-box > .button-icon {
   vertical-align: middle;
 }
 
 #customization-titlebar-visibility-button[checked] {
   -moz-image-region: rect(0, 48px, 24px, 24px);
 }