1 files changed, 107 insertions, 0 deletions
diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
new file mode 100644
index 0000000000..ff6af3ade7
--- /dev/null
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
@@ -0,0 +1,107 @@
+"use strict";
+
+add_setup(async function () {
+  // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
+  document.documentElement.removeAttribute("remotecontrol");
+  registerCleanupFunction(() => {
+    document.documentElement.setAttribute("remotecontrol", "true");
+  });
+});
+
+add_task(async function test_toolbar_field_focus() {
+  const TOOLBAR_FIELD_BACKGROUND = "#FF00FF";
+  const TOOLBAR_FIELD_COLOR = "#00FF00";
+  const TOOLBAR_FOCUS_BACKGROUND = "#FF0000";
+  const TOOLBAR_FOCUS_TEXT = "#9400FF";
+  const TOOLBAR_FOCUS_BORDER = "#FFFFFF";
+
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: "#FF0000",
+          tab_background_color: "#ffffff",
+          toolbar_field: TOOLBAR_FIELD_BACKGROUND,
+          toolbar_field_text: TOOLBAR_FIELD_COLOR,
+          toolbar_field_focus: TOOLBAR_FOCUS_BACKGROUND,
+          toolbar_field_text_focus: TOOLBAR_FOCUS_TEXT,
+          toolbar_field_border_focus: TOOLBAR_FOCUS_BORDER,
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+
+  info("Checking toolbar field's focus color");
+
+  let urlBar = document.querySelector("#urlbar-background");
+  gURLBar.textbox.setAttribute("focused", "true");
+  let style = window.getComputedStyle(urlBar);
+
+  Assert.equal(
+    style.backgroundColor,
+    `rgb(${hexToRGB(TOOLBAR_FOCUS_BACKGROUND).join(", ")})`,
+    "Background Color is changed"
+  );
+  Assert.equal(
+    style.color,
+    `rgb(${hexToRGB(TOOLBAR_FOCUS_TEXT).join(", ")})`,
+    "Text Color is changed"
+  );
+  Assert.equal(
+    style.outlineColor,
+    `rgb(${hexToRGB(TOOLBAR_FOCUS_BORDER).join(", ")})`,
+    "Focus ring color"
+  );
+
+  gURLBar.textbox.removeAttribute("focused");
+
+  Assert.equal(
+    style.backgroundColor,
+    `rgb(${hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ")})`,
+    "Background Color is set back to initial"
+  );
+  Assert.equal(
+    style.color,
+    `rgb(${hexToRGB(TOOLBAR_FIELD_COLOR).join(", ")})`,
+    "Text Color is set back to initial"
+  );
+  await extension.unload();
+});
+
+add_task(async function test_toolbar_field_focus_low_alpha() {
+  let extension = ExtensionTestUtils.loadExtension({
+    manifest: {
+      theme: {
+        colors: {
+          frame: "#FF0000",
+          tab_background_color: "#ffffff",
+          toolbar_field: "#FF00FF",
+          toolbar_field_text: "#00FF00",
+          toolbar_field_focus: "rgba(0, 0, 255, 0.4)",
+          toolbar_field_text_focus: "red",
+          toolbar_field_border_focus: "#FFFFFF",
+        },
+      },
+    },
+  });
+
+  await extension.startup();
+  gURLBar.textbox.setAttribute("focused", "true");
+
+  let urlBar = document.querySelector("#urlbar-background");
+  Assert.equal(
+    window.getComputedStyle(urlBar).backgroundColor,
+    `rgba(0, 0, 255, 0.9)`,
+    "Background color has minimum opacity enforced"
+  );
+  Assert.equal(
+    window.getComputedStyle(urlBar).color,
+    `rgb(255, 255, 255)`,
+    "Text color has been overridden to match background"
+  );
+
+  gURLBar.textbox.removeAttribute("focused");
+  await extension.unload();
+});