Backed out 2 changesets (bug 1443561) for causing bc perma failures in toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js
authorMargareta Eliza Balazs <ebalazs@mozilla.com>
Tue, 21 Aug 2018 14:05:22 +0300
changeset 432562 3e1ff98d5aab
parent 432561 973b58266e44
child 432563 993d8d079fb3
push id106779
push userebalazs@mozilla.com
push dateTue, 21 Aug 2018 11:05:29 +0000
treeherdermozilla-inbound@3e1ff98d5aab [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1443561
milestone63.0a1
backs out1d748613485f
37b4dc3bc73a
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
Backed out 2 changesets (bug 1443561) for causing bc perma failures in toolkit/components/extensions/test/browser/browser_ext_themes_sanitization.js Backed out changeset 1d748613485f (bug 1443561) Backed out changeset 37b4dc3bc73a (bug 1443561)
browser/base/content/browser.css
browser/themes/osx/browser.css
browser/themes/shared/browser.inc.css
toolkit/components/extensions/parent/ext-theme.js
toolkit/components/extensions/test/browser/browser.ini
toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js
toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -3,30 +3,33 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
   --panelui-subview-transition-duration: 150ms;
   --lwt-additional-images: none;
+  --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
 }
 
 :root:-moz-lwtheme {
   color: var(--lwt-text-color) !important;
 }
 
 :root:-moz-lwtheme {
   background-color: var(--lwt-accent-color) !important;
+  background-image: var(--lwt-additional-images) !important;
+  background-position: var(--lwt-background-alignment) !important;
+  background-repeat: var(--lwt-background-tiling) !important;
 }
 
 :root:-moz-lwtheme[lwtheme-image] {
-  background-image: var(--lwt-header-image) !important;
-  background-position: right top !important;
+  background-image: var(--lwt-header-image), var(--lwt-additional-images) !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
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -42,35 +42,19 @@
   --panel-separator-color: rgba(249,249,250,.1);
 
   --arrowpanel-dimmed: rgba(249,249,250,.1);
   --arrowpanel-dimmed-further: rgba(249,249,250,.15);
   --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
 }
 
 #navigator-toolbox {
-  -moz-appearance: none;
   --tabs-border-color: rgba(0,0,0,.3);
 }
 
-/*
-  This is a workaround for Bug 1482157
-  -moz-appearance: toolbox; makes the macOS sheets attached to the element's
-  bottom border. We cannot put this property on the toolbox itself as it
-  cancels all backgrounds that are there, so we set it on the toolbox bottom
-  border.
-*/
-#navigator-toolbox::after {
-  -moz-appearance: toolbox;
-  height: 1px;
-  /* use inset box-shadow instead of border because -moz-appearance hides the border */
-  border: none;
-  box-shadow: inset 0 -1px var(--toolbox-border-bottom-color);
-}
-
 #tabbrowser-tabs {
   --tab-line-color: #0a84ff;
 }
 
 #navigator-toolbox toolbarbutton:-moz-lwtheme {
   color: inherit;
   text-shadow: inherit;
 }
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -19,29 +19,20 @@
   --space-above-tabbar: 8px;
 }
 
 :root[sessionrestored]:-moz-lwtheme {
   transition: @themeTransition@;
 }
 
 /* Increase contrast of UI links on dark themes */
-
 :root[lwt-popup-brighttext] panel .text-link {
   color: @lwtPopupBrighttextLinkColor@;
 }
 
-/* Set additional backgrounds alignment relative to toolbox*/
-
-#navigator-toolbox:-moz-lwtheme {
-  background-image: var(--lwt-additional-images);
-  background-position: var(--lwt-background-alignment);
-  background-repeat: var(--lwt-background-tiling);
-}
-
 /* Toolbar / content area border */
 
 #navigator-toolbox::after {
   content: "";
   display: -moz-box;
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 
--- a/toolkit/components/extensions/parent/ext-theme.js
+++ b/toolkit/components/extensions/parent/ext-theme.js
@@ -297,25 +297,32 @@ class Theme {
       }
 
       switch (property) {
         case "additional_backgrounds_alignment": {
           if (!assertValidAdditionalBackgrounds(property, val.length)) {
             break;
           }
 
-          this.lwtStyles.backgroundsAlignment = val.join(",");
+          let alignment = [];
+          if (this.lwtStyles.headerURL) {
+            alignment.push("right top");
+          }
+          this.lwtStyles.backgroundsAlignment = alignment.concat(val).join(",");
           break;
         }
         case "additional_backgrounds_tiling": {
           if (!assertValidAdditionalBackgrounds(property, val.length)) {
             break;
           }
 
           let tiling = [];
+          if (this.lwtStyles.headerURL) {
+            tiling.push("no-repeat");
+          }
           for (let i = 0, l = this.lwtStyles.additionalBackgrounds.length; i < l; ++i) {
             tiling.push(val[i] || "no-repeat");
           }
           this.lwtStyles.backgroundsTiling = tiling.join(",");
           break;
         }
         default: {
           if (this.experiment && this.experiment.properties && property in this.experiment.properties) {
--- a/toolkit/components/extensions/test/browser/browser.ini
+++ b/toolkit/components/extensions/test/browser/browser.ini
@@ -1,15 +1,14 @@
 [DEFAULT]
 support-files =
   head.js
 
 [browser_ext_management_themes.js]
 skip-if = verify
-[browser_ext_themes_additional_backgrounds_alignment.js]
 [browser_ext_themes_alpha_accentcolor.js]
 [browser_ext_themes_chromeparity.js]
 [browser_ext_themes_dynamic_getCurrent.js]
 [browser_ext_themes_dynamic_onUpdated.js]
 [browser_ext_themes_dynamic_updates.js]
 [browser_ext_themes_experiment.js]
 [browser_ext_themes_getCurrent_differentExt.js]
 [browser_ext_themes_lwtsupport.js]
deleted file mode 100644
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_additional_backgrounds_alignment.js
+++ /dev/null
@@ -1,105 +0,0 @@
-"use strict";
-
-/* globals InspectorUtils */
-
-// Case 1 - When there is a headerURL image and additional_backgrounds_alignment is not specified.
-// So background-position should default to "left top"
-add_task(async function test_default_additional_backgrounds_alignment() {
-  const LEFT_TOP = "0% 0%";
-  const RIGHT_TOP = "100% 0%";
-
-  let extension = ExtensionTestUtils.loadExtension({
-    manifest: {
-      "theme": {
-        "images": {
-          "headerURL": "image1.png",
-          "additional_backgrounds": ["image1.png", "image1.png"],
-        },
-        "colors": {
-          "accentcolor": ACCENT_COLOR,
-          "textcolor": TEXT_COLOR,
-        },
-      },
-    },
-    files: {
-      "image1.png": BACKGROUND,
-    },
-
-  });
-
-  await extension.startup();
-
-  let docEl = document.documentElement;
-  let rootCS = window.getComputedStyle(docEl);
-
-  Assert.equal(
-    rootCS.getPropertyValue("background-position"),
-    RIGHT_TOP,
-    "root only contains headerURL alignment property"
-  );
-
-
-  let toolbox = document.querySelector("#navigator-toolbox");
-  let toolboxCS = window.getComputedStyle(toolbox);
-
-  Assert.equal(
-    toolboxCS.getPropertyValue("background-position"),
-    LEFT_TOP,
-    toolbox.id + " only contains default additional backgrounds alignment property"
-  );
-
-  await extension.unload();
-});
-
-
-// Case 2 - When there is a headerURL image and additional_backgrounds_alignment is specified.
-add_task(async function test_additional_backgrounds_alignment() {
-  const LEFT_BOTTOM = "0% 100%";
-  const CENTER_CENTER = "50% 50%";
-  const RIGHT_TOP = "100% 0%";
-
-  let extension = ExtensionTestUtils.loadExtension({
-    manifest: {
-      "theme": {
-        "images": {
-          "headerURL": "image1.png",
-          "additional_backgrounds": ["image1.png", "image1.png", "image1.png"],
-        },
-        "colors": {
-          "accentcolor": ACCENT_COLOR,
-          "textcolor": TEXT_COLOR,
-        },
-        "properties": {
-          additional_backgrounds_alignment: ["left bottom", "center center", "right top"],
-        },
-      },
-    },
-    files: {
-      "image1.png": BACKGROUND,
-    },
-
-  });
-
-  await extension.startup();
-
-  let docEl = document.documentElement;
-  let rootCS = window.getComputedStyle(docEl);
-
-  Assert.equal(
-    rootCS.getPropertyValue("background-position"),
-    RIGHT_TOP,
-    "root only contains headerURL alignment property"
-  );
-
-
-  let toolbox = document.querySelector("#navigator-toolbox");
-  let toolboxCS = window.getComputedStyle(toolbox);
-
-  Assert.equal(
-    toolboxCS.getPropertyValue("background-position"),
-    LEFT_BOTTOM + ", " + CENTER_CENTER + ", " + RIGHT_TOP,
-    toolbox.id + " contains additional backgrounds alignment properties"
-  );
-
-  await extension.unload();
-});
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_multiple_backgrounds.js
@@ -1,67 +1,59 @@
 "use strict";
 
 add_task(async function test_support_backgrounds_position() {
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
-          "headerURL": "face1.png",
-          "additional_backgrounds": ["face2.png", "face2.png", "face2.png"],
+          "headerURL": "face.png",
+          "additional_backgrounds": ["face.png", "face.png", "face.png"],
         },
         "colors": {
           "accentcolor": `rgb(${FRAME_COLOR.join(",")})`,
           "textcolor": `rgb(${TAB_BACKGROUND_TEXT_COLOR.join(",")})`,
         },
         "properties": {
           "additional_backgrounds_alignment": ["left top", "center top", "right bottom"],
         },
       },
     },
     files: {
-      "face1.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
-      "face2.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
+      "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
     },
   });
 
   await extension.startup();
 
   let docEl = window.document.documentElement;
-  let toolbox = document.querySelector("#navigator-toolbox");
 
   Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
 
-  let toolboxCS = window.getComputedStyle(toolbox);
-  let rootCS = window.getComputedStyle(docEl);
-  let rootBgImage = rootCS.backgroundImage.split(",")[0].trim();
-  let bgImage = toolboxCS.backgroundImage.split(",")[0].trim();
-  Assert.ok(rootBgImage.includes("face1.png"),
-            `The backgroundImage should use face1.png. Actual value is: ${rootBgImage}`);
-  Assert.equal(toolboxCS.backgroundImage, Array(3).fill(bgImage).join(", "),
-               "The backgroundImage should use face2.png three times.");
-  Assert.equal(toolboxCS.backgroundPosition, "0% 0%, 50% 0%, 100% 100%",
-               "The backgroundPosition should use the three values provided.");
-  Assert.equal(toolboxCS.backgroundRepeat, "no-repeat",
+  let style = window.getComputedStyle(docEl);
+  let bgImage = style.backgroundImage.split(",")[0].trim();
+  Assert.ok(bgImage.includes("face.png"),
+            `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
+  Assert.equal(Array(4).fill(bgImage).join(", "), style.backgroundImage,
+               "The backgroundImage should use face.png four times.");
+  Assert.equal(style.backgroundPosition, "100% 0%, 0% 0%, 50% 0%, 100% 100%",
+               "The backgroundPosition should use the four values provided.");
+  Assert.equal(style.backgroundRepeat, "no-repeat",
                "The backgroundPosition should use the default value.");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
-  toolboxCS = window.getComputedStyle(toolbox);
-
+  style = window.getComputedStyle(docEl);
   // Styles should've reverted to their initial values.
-  Assert.equal(rootCS.backgroundImage, "none");
-  Assert.equal(rootCS.backgroundPosition, "0% 0%");
-  Assert.equal(rootCS.backgroundRepeat, "repeat");
-  Assert.equal(toolboxCS.backgroundImage, "none");
-  Assert.equal(toolboxCS.backgroundPosition, "0% 0%");
-  Assert.equal(toolboxCS.backgroundRepeat, "repeat");
+  Assert.equal(style.backgroundImage, "none");
+  Assert.equal(style.backgroundPosition, "0% 0%");
+  Assert.equal(style.backgroundRepeat, "repeat");
 });
 
 add_task(async function test_support_backgrounds_repeat() {
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       "theme": {
         "images": {
           "theme_frame": "face0.png",
@@ -82,37 +74,31 @@ add_task(async function test_support_bac
       "face2.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
       "face3.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
     },
   });
 
   await extension.startup();
 
   let docEl = window.document.documentElement;
-  let toolbox = document.querySelector("#navigator-toolbox");
 
   Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
 
-  let rootCS = window.getComputedStyle(docEl);
-  let toolboxCS = window.getComputedStyle(toolbox);
-  let bgImage = rootCS.backgroundImage.split(",")[0].trim();
+  let style = window.getComputedStyle(docEl);
+  let bgImage = style.backgroundImage.split(",")[0].trim();
   Assert.ok(bgImage.includes("face0.png"),
             `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
-  Assert.equal([1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
-               toolboxCS.backgroundImage, "The backgroundImage should use face.png three times.");
-  Assert.equal(rootCS.backgroundPosition, "100% 0%",
-               "The backgroundPosition should use the default value for root.");
-  Assert.equal(toolboxCS.backgroundPosition, "0% 0%",
-               "The backgroundPosition should use the default value for navigator-toolbox.");
-  Assert.equal(rootCS.backgroundRepeat, "no-repeat",
-               "The backgroundRepeat should use the default values for root.");
-  Assert.equal(toolboxCS.backgroundRepeat, "repeat-x, repeat-y, repeat",
-               "The backgroundRepeat should use the three values provided for navigator-toolbox.");
+  Assert.equal([0, 1, 2, 3].map(num => bgImage.replace(/face[\d]*/, `face${num}`)).join(", "),
+               style.backgroundImage, "The backgroundImage should use face.png four times.");
+  Assert.equal(style.backgroundPosition, "100% 0%",
+               "The backgroundPosition should use the default value.");
+  Assert.equal(style.backgroundRepeat, "no-repeat, repeat-x, repeat-y, repeat",
+               "The backgroundPosition should use the four values provided.");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
 });
 
 add_task(async function test_additional_images_check() {
   let extension = ExtensionTestUtils.loadExtension({
@@ -133,30 +119,28 @@ add_task(async function test_additional_
     files: {
       "face.png": imageBufferFromDataURI(ENCODED_IMAGE_DATA),
     },
   });
 
   await extension.startup();
 
   let docEl = window.document.documentElement;
-  let toolbox = document.querySelector("#navigator-toolbox");
 
   Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
   Assert.equal(docEl.getAttribute("lwthemetextcolor"), "bright",
                "LWT text color attribute should be set");
 
-  let rootCS = window.getComputedStyle(docEl);
-  let toolboxCS = window.getComputedStyle(toolbox);
-  let bgImage = rootCS.backgroundImage.split(",")[0];
+  let style = window.getComputedStyle(docEl);
+  let bgImage = style.backgroundImage.split(",")[0];
   Assert.ok(bgImage.includes("face.png"),
             `The backgroundImage should use face.png. Actual value is: ${bgImage}`);
-  Assert.equal("none", toolboxCS.backgroundImage,
-               "The backgroundImage should not use face.png.");
-  Assert.equal(rootCS.backgroundPosition, "100% 0%",
+  Assert.equal(bgImage + ", none", style.backgroundImage,
+               "The backgroundImage should use face.png only once.");
+  Assert.equal(style.backgroundPosition, "100% 0%",
                "The backgroundPosition should use the default value.");
-  Assert.equal(rootCS.backgroundRepeat, "no-repeat",
+  Assert.equal(style.backgroundRepeat, "no-repeat",
                "The backgroundPosition should use only one (default) value.");
 
   await extension.unload();
 
   Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
 });