Bug 1412591 - Implement Google Chrome frame_inactive property. r=jaws
authorBogdan Pozderca <bogdan@pozderca.com>
Tue, 23 Jan 2018 21:33:57 -0500
changeset 457102 902bc8e0b638e6631567f28ea2818a97fa211b70
parent 457101 ace32c1626126c245acf42ecc16acbf7e1981d48
child 457103 ee905270a20a07b8a12344f1e56d55df466f2329
push id1683
push usersfraser@mozilla.com
push dateThu, 26 Apr 2018 16:43:40 +0000
treeherdermozilla-release@5af6cb21869d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1412591
milestone60.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1412591 - Implement Google Chrome frame_inactive property. r=jaws MozReview-Commit-ID: Dd204fZV7Yh
browser/base/content/browser.css
toolkit/components/extensions/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser_ext_themes_chromeparity.js
toolkit/modules/LightweightThemeConsumer.jsm
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -18,16 +18,20 @@
 
 :root:-moz-lwtheme {
   background-color: var(--lwt-accent-color) !important;
   background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
   background-position: var(--lwt-background-alignment) !important;
   background-repeat: var(--lwt-background-tiling) !important;
 }
 
+:root:-moz-lwtheme:-moz-window-inactive {
+  background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
+}
+
 #main-window:not([chromehidden~="toolbar"]) {
 %ifdef XP_MACOSX
   min-width: 335px;
 %else
   min-width: 300px;
 %endif
 }
 
--- a/toolkit/components/extensions/ext-theme.js
+++ b/toolkit/components/extensions/ext-theme.js
@@ -124,16 +124,19 @@ class Theme {
         cssColor = "rgb" + (val.length > 3 ? "a" : "") + "(" + val.join(",") + ")";
       }
 
       switch (color) {
         case "accentcolor":
         case "frame":
           this.lwtStyles.accentcolor = cssColor;
           break;
+        case "frame_inactive":
+          this.lwtStyles.accentcolorInactive = cssColor;
+          break;
         case "textcolor":
         case "background_tab_text":
           this.lwtStyles.textcolor = cssColor;
           break;
         case "toolbar":
           this.lwtStyles.toolbarColor = cssColor;
           break;
         case "toolbar_text":
@@ -269,16 +272,17 @@ class Theme {
       }
     }
   }
 
   static unload(windowId) {
     let lwtStyles = {
       headerURL: "",
       accentcolor: "",
+      accentcolorInactive: "",
       additionalBackgrounds: "",
       backgroundsAlignment: "",
       backgroundsTiling: "",
       textcolor: "",
       icons: {},
     };
 
     if (windowId) {
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -72,16 +72,20 @@
               "accentcolor": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "frame": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
+              "frame_inactive": {
+                "$ref": "ThemeColor",
+                "optional": true
+              },
               "textcolor": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "background_tab_text": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_chromeparity.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_chromeparity.js
@@ -41,8 +41,90 @@ add_task(async function test_support_the
                "Expected correct background color");
   Assert.equal(style.color, "rgba(" + TAB_TEXT_COLOR.join(", ") + ")",
                "Expected correct text color");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
 });
+
+add_task(async function test_support_theme_frame_inactive() {
+  const FRAME_COLOR = [71, 105, 91];
+  const FRAME_COLOR_INACTIVE = [255, 0, 0];
+  const TAB_TEXT_COLOR = [207, 221, 192, .9];
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "theme_frame": "image1.png",
+        },
+        "colors": {
+          "frame": FRAME_COLOR,
+          "frame_inactive": FRAME_COLOR_INACTIVE,
+          "background_tab_text": TAB_TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let docEl = window.document.documentElement;
+  let style = window.getComputedStyle(docEl);
+
+  Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
+               "Window background is set to the colors.frame property");
+
+  // Now we'll open a new window to see if the inactive browser accent color changed
+  let window2 = await BrowserTestUtils.openNewBrowserWindow();
+
+  Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR_INACTIVE.join(", ") + ")",
+               `Inactive window background color should be ${FRAME_COLOR_INACTIVE}`);
+
+  await BrowserTestUtils.closeWindow(window2);
+  await extension.unload();
+
+  Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
+});
+
+add_task(async function test_lack_of_theme_frame_inactive() {
+  const FRAME_COLOR = [71, 105, 91];
+  const TAB_TEXT_COLOR = [207, 221, 192, .9];
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      "theme": {
+        "images": {
+          "theme_frame": "image1.png",
+        },
+        "colors": {
+          "frame": FRAME_COLOR,
+          "background_tab_text": TAB_TEXT_COLOR,
+        },
+      },
+    },
+    files: {
+      "image1.png": BACKGROUND,
+    },
+  });
+
+  await extension.startup();
+
+  let docEl = window.document.documentElement;
+  let style = window.getComputedStyle(docEl);
+
+  Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
+               "Window background is set to the colors.frame property");
+
+  // Now we'll open a new window to make sure the inactive browser accent color stayed the same
+  let window2 = await BrowserTestUtils.openNewBrowserWindow();
+
+  Assert.equal(style.backgroundColor, "rgb(" + FRAME_COLOR.join(", ") + ")",
+               "Inactive window background should not change if colors.frame_inactive isn't set");
+
+  await BrowserTestUtils.closeWindow(window2);
+  await extension.unload();
+
+  Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
+});
--- a/toolkit/modules/LightweightThemeConsumer.jsm
+++ b/toolkit/modules/LightweightThemeConsumer.jsm
@@ -9,16 +9,17 @@ const {utils: Cu, interfaces: Ci, classe
 ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
 ChromeUtils.import("resource://gre/modules/Services.jsm");
 ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
 
 ChromeUtils.defineModuleGetter(this, "LightweightThemeImageOptimizer",
   "resource://gre/modules/addons/LightweightThemeImageOptimizer.jsm");
 
 const kCSSVarsMap = new Map([
+  ["--lwt-accent-color-inactive", "accentcolorInactive"],
   ["--lwt-background-alignment", "backgroundsAlignment"],
   ["--lwt-background-tiling", "backgroundsTiling"],
   ["--lwt-tab-text", "tab_text"],
   ["--toolbar-bgcolor", "toolbarColor"],
   ["--toolbar-color", "toolbar_text"],
   ["--url-and-searchbar-background-color", "toolbar_field"],
   ["--url-and-searchbar-color", "toolbar_field_text"],
   ["--lwt-toolbar-field-border-color", "toolbar_field_border"],