Bug 1424422 - Use built-in icons on titlebar on lwt themes, r?dao draft
authorMartin Stransky <stransky@redhat.com>
Thu, 22 Feb 2018 13:00:51 +0100
changeset 760267 515e7bdb0cb2a559f0e2ee6bd64c395ffae5efbc
parent 758791 f7c5598e45c323547dc6d030bf8442850c15813b
push id100600
push userstransky@redhat.com
push dateTue, 27 Feb 2018 10:36:58 +0000
reviewersdao
bugs1424422
milestone60.0a1
Bug 1424422 - Use built-in icons on titlebar on lwt themes, r?dao MozReview-Commit-ID: FwGPeUPxHmL
browser/base/content/browser.js
browser/themes/linux/browser.css
browser/themes/linux/jar.mn
browser/themes/linux/window-controls/close-themes.svg
browser/themes/linux/window-controls/maximize-themes.svg
browser/themes/linux/window-controls/minimize-themes.svg
browser/themes/linux/window-controls/restore-themes.svg
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1248,16 +1248,19 @@ var gBrowserInit = {
     gBrowser.updateBrowserRemoteness(initBrowser, isRemote, {
       remoteType, sameProcessAsFrameLoader
     });
 
     gUIDensity.init();
 
     if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
       gDragSpaceObserver.init();
+      if (AppConstants.platform == "linux") {
+        gLightThemeObserver.init();
+      }
     }
 
     // Hack to ensure that the about:home favicon is loaded
     // instantaneously, to avoid flickering and improve perceived performance.
     this._callWithURIToLoad(uriToLoad => {
       if (uriToLoad == "about:home") {
         gBrowser.setIcon(gBrowser.selectedTab, "chrome://branding/content/icon32.png");
       } else if (uriToLoad == "about:privatebrowsing") {
@@ -1796,16 +1799,19 @@ var gBrowserInit = {
       uriToLoad.then(callback);
   },
 
   onUnload() {
     gUIDensity.uninit();
 
     if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
       gDragSpaceObserver.uninit();
+      if (AppConstants.platform == "linux") {
+        gLightThemeObserver.uninit();
+      }
     }
 
     TabsInTitlebar.uninit();
 
     // In certain scenarios it's possible for unload to be fired before onload,
     // (e.g. if the window is being closed after browser.js loads but before the
     // load completes). In that case, there's nothing to do here.
     if (!this._loadHandled)
@@ -5584,16 +5590,34 @@ var gDragSpaceObserver = {
       document.documentElement.setAttribute("extradragspace", "true");
     } else {
       document.documentElement.removeAttribute("extradragspace");
     }
     TabsInTitlebar.updateAppearance(true);
   },
 };
 
+var gLightThemeObserver = {
+  init() {
+    Services.obs.addObserver(this, "lightweight-theme-styling-update");
+  },
+
+  uninit() {
+    Services.obs.removeObserver(this, "lightweight-theme-styling-update");
+  },
+
+  observe(aSubject, aTopic, aData) {
+    switch (aTopic) {
+      case "lightweight-theme-styling-update":
+        TabsInTitlebar.updateAppearance(true);
+        break;
+    }
+  },
+};
+
 // Updates the UI density (for touch and compact mode) based on the uidensity pref.
 var gUIDensity = {
   MODE_NORMAL: 0,
   MODE_COMPACT: 1,
   MODE_TOUCH: 2,
   uiDensityPref: "browser.uidensity",
   autoTouchModePref: "browser.touchmode.auto",
 
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -675,47 +675,81 @@ notification[value="translation"] menuli
    */
   #titlebar-buttonbox {
     z-index: 1;
     -moz-box-align: center;
     padding-top: 2px;
     padding-bottom: 2px;
   }
 
+  /* When default theme is used render titlebar command buttons
+   * according to system config.
+   *
+   * When -moz-lwtheme is enabled use similar approach as on Windows platform.
+   */
+  .titlebar-button:-moz-lwtheme {
+    border: none;
+    margin: 0 !important;
+    padding: 8px 17px;
+  }
+  .titlebar-button:-moz-lwtheme > .toolbarbutton-icon {
+    width: 12px;
+    height: 12px;
+  }
+  .titlebar-button:hover:-moz-lwtheme {
+    background-color: Highlight;
+  }
+
   /* Render titlebar command buttons according to system config.
    * Use full scale icons here as the Gtk+ does.
    */
   @media (-moz-gtk-csd-minimize-button) {
-    #titlebar-min {
-      -moz-appearance: -moz-window-button-minimize;
+    #titlebar-min:not(:-moz-lwtheme) {
+     -moz-appearance: -moz-window-button-minimize;
+   }
+    #titlebar-min:-moz-lwtheme {
+      -moz-appearance: none !important;
+      list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
     }
   }
   @media (-moz-gtk-csd-minimize-button: 0) {
     #titlebar-min {
       display: none;
     }
   }
 
   @media (-moz-gtk-csd-maximize-button) {
-    #titlebar-max {
+    #titlebar-max:not(:-moz-lwtheme) {
       -moz-appearance: -moz-window-button-maximize;
     }
-    :root[sizemode="maximized"] #titlebar-max {
+    #titlebar-max:-moz-lwtheme {
+      -moz-appearance: none !important;
+      list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
+    }
+    :root[sizemode="maximized"] #titlebar-max:not(:-moz-lwtheme) {
       -moz-appearance: -moz-window-button-restore;
     }
+    :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
+      -moz-appearance: none !important;
+      list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
+    }
   }
   @media (-moz-gtk-csd-maximize-button: 0) {
     #titlebar-max {
       display: none;
     }
   }
 
   @media (-moz-gtk-csd-close-button) {
-    #titlebar-close {
+    #titlebar-close:not(:-moz-lwtheme) {
       -moz-appearance: -moz-window-button-close;
     }
+    #titlebar-close:-moz-lwtheme {
+      -moz-appearance: none !important;
+      list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
+    }
   }
   @media (-moz-gtk-csd-close-button: 0) {
     #titlebar-close {
       display: none;
     }
   }
 }
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -46,18 +46,21 @@ browser.jar:
   skin/classic/browser/places/unsortedBookmarks.png   (places/unsortedBookmarks.png)
   skin/classic/browser/places/downloads.png           (places/downloads.png)
   skin/classic/browser/preferences/alwaysAsk.png      (preferences/alwaysAsk.png)
   skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
 * skin/classic/browser/preferences/in-content/preferences.css (preferences/in-content/preferences.css)
 * skin/classic/browser/preferences/in-content/dialog.css      (preferences/in-content/dialog.css)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
   skin/classic/browser/tabbrowser/tabDragIndicator.png      (tabbrowser/tabDragIndicator.png)
-
   skin/classic/browser/sync-desktopIcon.svg  (../shared/sync-desktopIcon.svg)
   skin/classic/browser/sync-mobileIcon.svg  (../shared/sync-mobileIcon.svg)
+  skin/classic/browser/window-controls/close-themes.svg     (window-controls/close-themes.svg)
+  skin/classic/browser/window-controls/maximize-themes.svg  (window-controls/maximize-themes.svg)
+  skin/classic/browser/window-controls/minimize-themes.svg  (window-controls/minimize-themes.svg)
+  skin/classic/browser/window-controls/restore-themes.svg   (window-controls/restore-themes.svg)
   skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png)
 
 [extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}] chrome.jar:
 % override chrome://browser/skin/feeds/audioFeedIcon.png              chrome://browser/skin/feeds/feedIcon.png
 % override chrome://browser/skin/feeds/audioFeedIcon16.png            chrome://browser/skin/feeds/feedIcon16.png
 % override chrome://browser/skin/feeds/videoFeedIcon.png              chrome://browser/skin/feeds/feedIcon.png
 % override chrome://browser/skin/feeds/videoFeedIcon16.png            chrome://browser/skin/feeds/feedIcon16.png
new file mode 100644
--- /dev/null
+++ b/browser/themes/linux/window-controls/close-themes.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="black" stroke-width="3.6" stroke-opacity=".75" d="M1,1 l 10,10 M1,11 l 10,-10"/>
+  <path stroke="white" stroke-width="1.9" d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/linux/window-controls/maximize-themes.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" fill="none">
+  <rect stroke="black" stroke-width="3.6" stroke-opacity=".75" x="2" y="2" width="8" height="8"/>
+  <rect stroke="white" stroke-width="1.9" x="2" y="2" width="8" height="8"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/linux/window-controls/minimize-themes.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
+  <line stroke="black" stroke-width="3.6" stroke-opacity=".75" x1="0" y1="6" x2="12" y2="6"/>
+  <line stroke="white" stroke-width="1.9" x1="1" y1="6" x2="11" y2="6"/>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/linux/window-controls/restore-themes.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" fill="none" stroke="white">
+  <path stroke="black" stroke-width="3.6" stroke-opacity=".75" d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8"/>
+  <rect stroke-width="1.9" x="2" y="4" width="6" height="6"/>
+  <polyline stroke-width=".9" points="3.5,1.5 10.5,1.5 10.5,8.5"/>
+</svg>