Bug 1768150 - [devtools] Don't use ui._* properties from styleeditor tests. r=bomsy.

This is some prep work to make those loosely private properties
actually be private fields.

Differential Revision: https://phabricator.services.mozilla.com/D145854

devtools/client/styleeditor/test/browser_styleeditor_copyurl.js

@@ -8,35 +8,36 @@
 const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
 
 add_task(async function() {
-  const { ui } = await openStyleEditorForURL(TESTCASE_URI);
+  const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);
+
+  const doc = panel.panelWindow.document;
+  const contextMenu = getContextMenuElement(panel);
+  const copyUrlItem = doc.getElementById("context-copyurl");
 
   const onContextMenuShown = new Promise(resolve => {
-    ui._contextMenu.addEventListener(
-      "popupshown",
-      () => {
-        resolve();
-      },
-      { once: true }
-    );
+    contextMenu.addEventListener("popupshown", resolve, { once: true });
   });
 
   info("Right-click the first stylesheet editor.");
   const editor = ui.editors[0];
+
+  is(editor.friendlyName, "simple.css", "editor is the expected one");
+
   const stylesheetEl = editor.summary.querySelector(".stylesheet-name");
   await EventUtils.synthesizeMouseAtCenter(
     stylesheetEl,
     { button: 2, type: "contextmenu" },
-    ui._window
+    panel.panelWindow
   );
   await onContextMenuShown;
 
-  ok(!ui._copyUrlItem.hidden, "Copy URL menu item should be showing.");
+  ok(!copyUrlItem.hidden, "Copy URL menu item should be showing.");
 
   info(
     "Click on Copy URL menu item and wait for the URL to be copied to the clipboard."
   );
   await waitForClipboardPromise(
-    () => ui._contextMenu.activateItem(ui._copyUrlItem),
-    ui._contextMenuStyleSheet.href
+    () => contextMenu.activateItem(copyUrlItem),
+    `${TEST_BASE_HTTPS}simple.css`
   );
 });

devtools/client/styleeditor/test/browser_styleeditor_filter.js

@@ -38,8 +38,10 @@ add_task(async function() {
     "correct number of editors"
   );
 
-  const filterInput = ui._root.querySelector(".devtools-filterinput");
-  const filterInputClearButton = ui._root.querySelector(
+  const doc = panel.panelWindow.document;
+
+  const filterInput = doc.querySelector(".devtools-filterinput");
+  const filterInputClearButton = doc.querySelector(
     ".devtools-searchinput-clear"
   );
   ok(filterInput, "There's a filter input");
@@ -66,7 +68,7 @@ add_task(async function() {
     "The clear button is visible when the input isn't empty"
   );
   Assert.deepEqual(
-    getVisibleStyleSheetsNames(ui._panelDoc),
+    getVisibleStyleSheetsNames(doc),
     ["pretty.css"],
     "Only pretty.css is now displayed"
   );
@@ -93,7 +95,7 @@ add_task(async function() {
     panel.panelWindow
   );
   is(filterInput.value, "", "input was cleared");
-  ok(!isListFiltered(ui._panelDoc), "List isn't filtered anymore");
+  ok(!isListFiltered(doc), "List isn't filtered anymore");
   ok(
     filterInputClearButton.hasAttribute("hidden"),
     "The clear button is hidden after clicking on it"
@@ -103,7 +105,7 @@ add_task(async function() {
   onEditorSelected = ui.once("editor-selected");
   setFilterInputValue("#1");
   Assert.deepEqual(
-    getVisibleStyleSheetsNames(ui._panelDoc),
+    getVisibleStyleSheetsNames(doc),
     [
       "<inline style sheet #1>",
       "<inline style sheet #10>",
@@ -165,9 +167,7 @@ add_task(async function() {
   });
   await onEditorAdded;
   ok(
-    getVisibleStyleSheetsNames(ui._panelDoc).includes(
-      "<inline style sheet #101>"
-    ),
+    getVisibleStyleSheetsNames(doc).includes("<inline style sheet #101>"),
     "New inline stylesheet is visible as it matches the search"
   );
 
@@ -188,7 +188,7 @@ add_task(async function() {
   await onEditorAdded;
 
   ok(
-    !getVisibleStyleSheetsNames(ui._panelDoc).includes("doc_short_string.css"),
+    !getVisibleStyleSheetsNames(doc).includes("doc_short_string.css"),
     "doc_short_string.css is not visible as its name does not match the search"
   );
 
@@ -199,14 +199,14 @@ add_task(async function() {
   await createNewStyleSheet(ui, panel.panelWindow);
   is(filterInput.value, "", "Filter input was cleared");
 
-  ok(!isListFiltered(ui._panelDoc), "List is not filtered anymore");
+  ok(!isListFiltered(doc), "List is not filtered anymore");
   is(ui.selectedEditor, ui.editors.at(-1), "The new stylesheet got selected");
 
   info(
     "Check that when no stylesheet matches the search, a class is added to the nav"
   );
   setFilterInputValue("sync_with_csp");
-  ok(navHasAllFilteredClass(ui), `"splitview-all-filtered" was added`);
+  ok(navHasAllFilteredClass(panel), `"splitview-all-filtered" was added`);
   ok(
     filterInput
       .closest(".devtools-searchbox")
@@ -231,7 +231,7 @@ add_task(async function() {
     }
   );
   await onEditorAdded;
-  ok(!navHasAllFilteredClass(ui), `"splitview-all-filtered" was removed`);
+  ok(!navHasAllFilteredClass(panel), `"splitview-all-filtered" was removed`);
   ok(
     !filterInput
       .closest(".devtools-searchbox")
@@ -243,17 +243,16 @@ add_task(async function() {
     "Check that reloading the page when the filter don't match anything won't select anything"
   );
   setFilterInputValue("XXXDONTMATCHANYTHING");
-  ok(navHasAllFilteredClass(ui), `"splitview-all-filtered" was added`);
+  ok(navHasAllFilteredClass(panel), `"splitview-all-filtered" was added`);
   await reloadPageAndWaitForStyleSheets(
     ui,
     INITIAL_INLINE_STYLE_SHEETS_COUNT + 2
   );
-  ok(navHasAllFilteredClass(ui), `"splitview-all-filtered" is still applied`);
-  is(
-    getVisibleStyleSheets(ui._panelDoc).length,
-    0,
-    "No stylesheets are displayed"
+  ok(
+    navHasAllFilteredClass(panel),
+    `"splitview-all-filtered" is still applied`
   );
+  is(getVisibleStyleSheets(doc).length, 0, "No stylesheets are displayed");
   is(ui.selectedEditor, null, "No editor was selected");
 
   info(
@@ -263,7 +262,7 @@ add_task(async function() {
   setFilterInputValue("pretty");
   await onEditorSelected;
   Assert.deepEqual(
-    getVisibleStyleSheetsNames(ui._panelDoc),
+    getVisibleStyleSheetsNames(doc),
     ["pretty.css"],
     "Only pretty.css is now displayed"
   );
@@ -275,7 +274,7 @@ add_task(async function() {
   );
   await onEditorSelected;
   Assert.deepEqual(
-    getVisibleStyleSheetsNames(ui._panelDoc),
+    getVisibleStyleSheetsNames(doc),
     ["pretty.css"],
     "pretty.css is still the only stylesheet displayed"
   );
@@ -291,7 +290,7 @@ add_task(async function() {
     {},
     panel.panelWindow
   );
-  ok(!isListFiltered(ui._panelDoc), "List is not filtered anymore");
+  ok(!isListFiltered(doc), "List is not filtered anymore");
   is(
     ui.selectedEditor.friendlyName,
     "pretty.css",
@@ -300,11 +299,13 @@ add_task(async function() {
 });
 
 /**
- * @param {StyleEditorUI} ui
+ * @param {StyleEditorPanel} panel
  * @returns Boolean
  */
-function navHasAllFilteredClass(ui) {
-  return ui._nav.classList.contains("splitview-all-filtered");
+function navHasAllFilteredClass(panel) {
+  return panel.panelWindow.document
+    .querySelector(".splitview-nav")
+    .classList.contains("splitview-all-filtered");
 }
 
 /**

devtools/client/styleeditor/test/browser_styleeditor_loading.js

@@ -21,10 +21,10 @@ add_task(async function() {
 
   const toolbox = await gDevTools.getToolboxForTab(tab);
   const panel = toolbox.getPanel("styleeditor");
-  const { panelWindow, UI: ui } = panel;
+  const { panelWindow } = panel;
 
   ok(
-    !ui._root.classList.contains("loading"),
+    !getRootElement(panel).classList.contains("loading"),
     "style editor root element does not have 'loading' class name anymore"
   );
 

devtools/client/styleeditor/test/browser_styleeditor_nostyle.js

@@ -8,16 +8,16 @@
 const TESTCASE_URI = TEST_BASE_HTTP + "nostyle.html";
 
 add_task(async function() {
-  const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);
+  const { panel } = await openStyleEditorForURL(TESTCASE_URI);
   const { panelWindow } = panel;
 
   ok(
-    !ui._root.classList.contains("loading"),
+    !getRootElement(panel).classList.contains("loading"),
     "style editor root element does not have 'loading' class name anymore"
   );
 
   ok(
-    ui._root.querySelector(".empty.placeholder"),
+    getRootElement(panel).querySelector(".empty.placeholder"),
     "showing 'no style' indicator"
   );
 

devtools/client/styleeditor/test/browser_styleeditor_opentab.js

@@ -8,20 +8,21 @@
 const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
 
 add_task(async function() {
-  const { ui } = await openStyleEditorForURL(TESTCASE_URI);
+  const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);
 
-  await rightClickStyleSheet(ui, ui.editors[0]);
+  const openLinkNewTabItem = panel.panelWindow.document.getElementById(
+    "context-openlinknewtab"
+  );
+
+  await rightClickStyleSheet(panel, ui.editors[0]);
   is(
-    ui._openLinkNewTabItem.getAttribute("disabled"),
+    openLinkNewTabItem.getAttribute("disabled"),
     "false",
     "The menu item is not disabled"
   );
-  ok(!ui._openLinkNewTabItem.hidden, "The menu item is not hidden");
+  ok(!openLinkNewTabItem.hidden, "The menu item is not hidden");
 
-  const url =
-    "https://example.com/browser/devtools/client/styleeditor/test/" +
-    "simple.css";
-  is(ui._contextMenuStyleSheet.href, url, "Correct URL for sheet");
+  const url = TEST_BASE_HTTPS + "simple.css";
 
   const browserWindow = Services.wm.getMostRecentWindow(
     gDevTools.chromeWindowType
@@ -37,21 +38,21 @@ add_task(async function() {
     };
   });
 
-  ui._openLinkNewTabItem.click();
+  openLinkNewTabItem.click();
 
   info(`Waiting for a tab to open - ${url}`);
   await tabOpenedDefer;
 
-  await rightClickInlineStyleSheet(ui, ui.editors[1]);
+  await rightClickInlineStyleSheet(panel, ui.editors[1]);
   is(
-    ui._openLinkNewTabItem.getAttribute("disabled"),
+    openLinkNewTabItem.getAttribute("disabled"),
     "true",
     "The menu item is disabled"
   );
-  ok(!ui._openLinkNewTabItem.hidden, "The menu item should not be hidden");
+  ok(!openLinkNewTabItem.hidden, "The menu item should not be hidden");
 
-  await rightClickNoStyleSheet(ui);
-  ok(ui._openLinkNewTabItem.hidden, "The menu item should be hidden");
+  await rightClickNoStyleSheet(panel);
+  ok(openLinkNewTabItem.hidden, "The menu item should be hidden");
 });
 
 function onPopupShow(contextMenu) {
@@ -78,53 +79,58 @@ function onPopupHide(contextMenu) {
   });
 }
 
-function rightClickStyleSheet(ui, editor) {
+function rightClickStyleSheet(panel, editor) {
+  const contextMenu = getContextMenuElement(panel);
   return new Promise(resolve => {
-    onPopupShow(ui._contextMenu).then(() => {
-      onPopupHide(ui._contextMenu).then(() => {
+    onPopupShow(contextMenu).then(() => {
+      onPopupHide(contextMenu).then(() => {
         resolve();
       });
-      ui._contextMenu.hidePopup();
+      contextMenu.hidePopup();
     });
 
     EventUtils.synthesizeMouseAtCenter(
       editor.summary.querySelector(".stylesheet-name"),
       { button: 2, type: "contextmenu" },
-      ui._window
+      panel.panelWindow
     );
   });
 }
 
-function rightClickInlineStyleSheet(ui, editor) {
+function rightClickInlineStyleSheet(panel, editor) {
+  const contextMenu = getContextMenuElement(panel);
   return new Promise(resolve => {
-    onPopupShow(ui._contextMenu).then(() => {
-      onPopupHide(ui._contextMenu).then(() => {
+    onPopupShow(contextMenu).then(() => {
+      onPopupHide(contextMenu).then(() => {
         resolve();
       });
-      ui._contextMenu.hidePopup();
+      contextMenu.hidePopup();
     });
 
     EventUtils.synthesizeMouseAtCenter(
       editor.summary.querySelector(".stylesheet-name"),
       { button: 2, type: "contextmenu" },
-      ui._window
+      panel.panelWindow
     );
   });
 }
 
-function rightClickNoStyleSheet(ui) {
+function rightClickNoStyleSheet(panel) {
+  const contextMenu = getContextMenuElement(panel);
   return new Promise(resolve => {
-    onPopupShow(ui._contextMenu).then(() => {
-      onPopupHide(ui._contextMenu).then(() => {
+    onPopupShow(contextMenu).then(() => {
+      onPopupHide(contextMenu).then(() => {
         resolve();
       });
-      ui._contextMenu.hidePopup();
+      contextMenu.hidePopup();
     });
 
     EventUtils.synthesizeMouseAtCenter(
-      ui._panelDoc.querySelector("#splitview-tpl-summary-stylesheet"),
+      panel.panelWindow.document.querySelector(
+        "#splitview-tpl-summary-stylesheet"
+      ),
       { button: 2, type: "contextmenu" },
-      ui._window
+      panel.panelWindow
     );
   });
 }

devtools/client/styleeditor/test/head.js

@@ -180,3 +180,23 @@ function createNewStyleSheet(ui, panelWindow) {
     }, panelWindow);
   });
 }
+
+/**
+ * Returns the panel root element (StyleEditorUI._root)
+ *
+ * @param {StyleEditorPanel} panel
+ * @returns {Element}
+ */
+function getRootElement(panel) {
+  return panel.panelWindow.document.getElementById("style-editor-chrome");
+}
+
+/**
+ * Returns the panel context menu element
+ *
+ * @param {StyleEditorPanel} panel
+ * @returns {Element}
+ */
+function getContextMenuElement(panel) {
+  return panel.panelWindow.document.getElementById("sidebar-context");
+}