"use strict";

// Nova being enabled changes some of the styling that is being tested here.
const novaEnabled = Services.prefs.getBoolPref(
  "browser.nova.enabled",
  true // If the pref isn't set to false, assume Nova styles are enabled by default.
);

info(`Run with Nova browser styles ${novaEnabled ? "enabled" : "disabled"}`);

// This test checks whether applied WebExtension themes that attempt to change
// the separator colors are applied properly.

add_task(async function test_support_separator_properties() {
  const SEPARATOR_TOP_COLOR = "#ff00ff";
  const SEPARATOR_VERTICAL_COLOR = "#f0000f";
  const SEPARATOR_FIELD_COLOR = "#9400ff";
  const SEPARATOR_BOTTOM_COLOR = "#3366cc";

  let extension = ExtensionTestUtils.loadExtension({
    manifest: {
      theme: {
        images: {
          theme_frame: "image1.png",
        },
        colors: {
          frame: ACCENT_COLOR,
          tab_background_text: TEXT_COLOR,
          toolbar_top_separator: SEPARATOR_TOP_COLOR,
          toolbar_vertical_separator: SEPARATOR_VERTICAL_COLOR,
          // This property is deprecated, but left in to check it doesn't
          // unexpectedly break the theme installation.
          toolbar_field_separator: SEPARATOR_FIELD_COLOR,
          toolbar_bottom_separator: SEPARATOR_BOTTOM_COLOR,
        },
      },
    },
    files: {
      "image1.png": BACKGROUND,
    },
  });

  // Test the deprecated color property.
  let deprecatedMessagePromise = new Promise(resolve => {
    Services.console.registerListener(function listener(msg) {
      if (msg.message.includes("toolbar_field_separator")) {
        resolve();
        Services.console.unregisterListener(listener);
      }
    });
  });
  ExtensionTestUtils.failOnSchemaWarnings(false);
  await extension.startup();
  ExtensionTestUtils.failOnSchemaWarnings(true);
  info("Wait for property deprecation message");
  await deprecatedMessagePromise;

  let navbar = document.querySelector("#nav-bar");
  Assert.equal(
    window.getComputedStyle(navbar).borderTopColor,
    `rgb(${hexToRGB(SEPARATOR_TOP_COLOR).join(", ")})`,
    "Top separator color properly set"
  );

  let panelUIButton = document.querySelector("#PanelUI-button");
  // Bug 1712334: This should test bookmark item toolbar separators instead
  Assert.equal(
    window
      .getComputedStyle(panelUIButton)
      .getPropertyValue("border-image-source"),
    "none",
    "No vertical separator on app menu"
  );

  let separatorColor;

  if (novaEnabled) {
    // only the top border will be shown if the window is maximized.
    separatorColor = window.getComputedStyle(
      document.querySelector("#tabbrowser-tabbox .browserContainer")
    ).borderTopColor;
  } else {
    separatorColor = Services.prefs.getBoolPref("sidebar.revamp", false)
      ? window.getComputedStyle(
          document.querySelector("#tabbrowser-tabbox .browserContainer")
        ).outlineColor
      : window.getComputedStyle(document.querySelector("#navigator-toolbox"))
          .borderBottomColor;
  }
  Assert.equal(
    separatorColor,
    `rgb(${hexToRGB(SEPARATOR_BOTTOM_COLOR).join(", ")})`,
    `Bottom separator color properly set`
  );

  await extension.unload();
});
