browser_styleeditor_nostyle.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

   http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test that 'no styles' indicator is shown if a page doesn't contain any style

// sheets.

const TESTCASE_URI = TEST_BASE_HTTP + "nostyle.html";

add_task(async function () {

  // Make enough room for the "append style sheet" link to not wrap,

  // as it messes up with EvenEventUtils.synthesizeMouse

  await pushPref("devtools.styleeditor.navSidebarWidth", 500);

  const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);

  const { panelWindow } = panel;

ok(

    !getRootElement(panel).classList.contains("loading"),

    "style editor root element does not have 'loading' class name anymore"

);

  const newButton = panelWindow.document.querySelector(

    "toolbarbutton.style-editor-newButton"

);

  ok(!newButton.hasAttribute("disabled"), "new style sheet button is enabled");

  const importButton = panelWindow.document.querySelector(

    ".style-editor-importButton"

);

  ok(!importButton.hasAttribute("disabled"), "import button is enabled");

  const emptyPlaceHolderEl =

    getRootElement(panel).querySelector(".empty.placeholder");

  isnot(

    emptyPlaceHolderEl.ownerGlobal.getComputedStyle(emptyPlaceHolderEl).display,

    "none",

    "showing 'no style' indicator"

);

  info(

    "Check that clicking on the append new stylesheet link do add a stylesheet"

);

  const onEditorAdded = ui.once("editor-added");

  const newLink = emptyPlaceHolderEl.querySelector("a.style-editor-newButton");

  // Use synthesizeMouse to also check that the element is visible

  EventUtils.synthesizeMouseAtCenter(newLink, {}, newLink.ownerGlobal);

  await onEditorAdded;

  ok(true, "A stylesheet was added");

is(

    emptyPlaceHolderEl.ownerGlobal.getComputedStyle(emptyPlaceHolderEl).display,

    "none",

    "The empty placeholder element is now hidden"

);

});