summaryrefslogtreecommitdiffstats
path: root/toolkit/components/extensions/test/browser/browser_ext_themes_toolbars.js
blob: ee31d80888117d67d33a0762cefb4e822116fd3a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
"use strict";

// This test checks whether applied WebExtension themes that attempt to change
// the background color of toolbars are applied properly.

add_task(async function test_support_toolbar_property() {
  const TOOLBAR_COLOR = "#ff00ff";
  const TOOLBAR_TEXT_COLOR = "#9400ff";
  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      theme: {
        colors: {
          frame: ACCENT_COLOR,
          tab_background_text: TEXT_COLOR,
          toolbar: TOOLBAR_COLOR,
          toolbar_text: TOOLBAR_TEXT_COLOR,
        },
      },
    },
  });

  let toolbox = document.querySelector("#navigator-toolbox");
  let toolbars = [
    ...toolbox.querySelectorAll("toolbar:not(#TabsToolbar)"),
  ].filter(toolbar => {
    let bounds = toolbar.getBoundingClientRect();
    return bounds.width > 0 && bounds.height > 0;
  });

  let transitionPromise = waitForTransition(toolbars[0], "background-color");
  await extension.startup();
  await transitionPromise;

  info(`Checking toolbar colors for ${toolbars.length} toolbars.`);
  for (let toolbar of toolbars) {
    info(`Testing ${toolbar.id}`);
    Assert.equal(
      window.getComputedStyle(toolbar).backgroundColor,
      hexToCSS(TOOLBAR_COLOR),
      "Toolbar background color should be set."
    );
    Assert.equal(
      window.getComputedStyle(toolbar).color,
      hexToCSS(TOOLBAR_TEXT_COLOR),
      "Toolbar text color should be set."
    );
  }

  info("Checking selected tab colors");
  let selectedTab = document.querySelector(".tabbrowser-tab[selected]");
  Assert.equal(
    window.getComputedStyle(selectedTab).color,
    hexToCSS(TOOLBAR_TEXT_COLOR),
    "Selected tab text color should be set."
  );

  await extension.unload();
});

add_task(async function test_bookmark_text_property() {
  const TOOLBAR_COLOR = [255, 0, 255];
  const TOOLBAR_TEXT_COLOR = [48, 0, 255];
  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      theme: {
        colors: {
          frame: ACCENT_COLOR,
          tab_background_text: TEXT_COLOR,
          toolbar: TOOLBAR_COLOR,
          bookmark_text: TOOLBAR_TEXT_COLOR,
        },
      },
    },
  });

  await extension.startup();

  let toolbox = document.querySelector("#navigator-toolbox");
  let toolbars = [
    ...toolbox.querySelectorAll("toolbar:not(#TabsToolbar)"),
  ].filter(toolbar => {
    let bounds = toolbar.getBoundingClientRect();
    return bounds.width > 0 && bounds.height > 0;
  });

  info(`Checking toolbar colors for ${toolbars.length} toolbars.`);
  for (let toolbar of toolbars) {
    info(`Testing ${toolbar.id}`);
    Assert.equal(
      window.getComputedStyle(toolbar).color,
      rgbToCSS(TOOLBAR_TEXT_COLOR),
      "bookmark_text should be an alias for toolbar_text"
    );
  }

  info("Checking selected tab colors");
  let selectedTab = document.querySelector(".tabbrowser-tab[selected]");
  Assert.equal(
    window.getComputedStyle(selectedTab).color,
    rgbToCSS(TOOLBAR_TEXT_COLOR),
    "Selected tab text color should be set."
  );

  await extension.unload();
});