Bug 1596947 - Stop using XUL <stack> in style editor. r=gl
authorTim Nguyen <ntim.bugs@gmail.com>
Mon, 18 Nov 2019 13:51:52 +0000
changeset 502417 fcb6a78740f837e54e53ca967009b0690a1ad5e7
parent 502416 9afdb269ce04e3673bddf950f96a2b7f1306b55a
child 502418 63a9116eca768e552ff13fce5237fc6696dd7790
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1596947
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1596947 - Stop using XUL <stack> in style editor. r=gl I believe <stack> was used for the CSS coverage tool which needed to be overlaid on top of the main UI. The code for the CSS coverage tool has however been removed since, so the UI no longer needs to use <stack>. Differential Revision: https://phabricator.services.mozilla.com/D53285
devtools/client/styleeditor/StyleEditorUI.jsm
devtools/client/styleeditor/index.xhtml
devtools/client/styleeditor/test/browser_styleeditor_loading.js
devtools/client/styleeditor/test/browser_styleeditor_nostyle.js
--- a/devtools/client/styleeditor/StyleEditorUI.jsm
+++ b/devtools/client/styleeditor/StyleEditorUI.jsm
@@ -169,19 +169,17 @@ StyleEditorUI.prototype = {
       );
     }
   },
 
   /**
    * Build the initial UI and wire buttons with event handlers.
    */
   createUI: function() {
-    const viewRoot = this._root.parentNode.querySelector(".splitview-root");
-
-    this._view = new SplitView(viewRoot);
+    this._view = new SplitView(this._root);
 
     wire(this._view.rootElement, ".style-editor-newButton", () => {
       this._debuggee.addStyleSheet(null);
     });
 
     wire(this._view.rootElement, ".style-editor-importButton", () => {
       this._importFromFile(this._mockImportFile || null, this._window);
     });
--- a/devtools/client/styleeditor/index.xhtml
+++ b/devtools/client/styleeditor/index.xhtml
@@ -81,83 +81,78 @@
   <commandset id="sourceEditorCommands">
     <command id="cmd_gotoLine" oncommand="goDoCommand('cmd_gotoLine')"/>
     <command id="cmd_find" oncommand="goDoCommand('cmd_find')"/>
     <command id="cmd_findAgain" oncommand="goDoCommand('cmd_findAgain')"/>
   </commandset>
 
   <keyset id="sourceEditorKeys"/>
 
-  <stack id="style-editor-chrome" class="loading theme-body">
-
-    <box class="splitview-root devtools-responsive-container" context="sidebar-context">
-      <box class="splitview-controller">
-        <box class="splitview-main">
-          <toolbar class="devtools-toolbar">
-             <hbox class="devtools-toolbarbutton-group">
-              <toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
-                          accesskey="&newButton.accesskey;"
-                          tooltiptext="&newButton.tooltip;"/>
-              <toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
-                          accesskey="&importButton.accesskey;"
-                          tooltiptext="&importButton.tooltip;"/>
-            </hbox>
-            <spacer/>
-            <toolbarbutton id="style-editor-options"
-                        class="devtools-toolbarbutton devtools-option-toolbarbutton"
-                        tooltiptext="&optionsButton.tooltip;"/>
-          </toolbar>
-        </box>
-        <box id="splitview-resizer-target" class="theme-sidebar splitview-nav-container"
-                persist="height">
-          <html:ol class="splitview-nav" tabindex="0"></html:ol>
-          <html:div class="splitview-nav placeholder empty">
-            <html:p><html:strong>&noStyleSheet.label;</html:strong></html:p>
-            <html:p>&noStyleSheet-tip-start.label;
-              <html:a href="#"
-                class="style-editor-newButton">&noStyleSheet-tip-action.label;</html:a>
-              &noStyleSheet-tip-end.label;</html:p>
-          </html:div>
-        </box> <!-- .splitview-nav-container -->
-      </box>   <!-- .splitview-controller -->
-      <splitter class="devtools-side-splitter devtools-invisible-splitter"/>
-      <box class="splitview-side-details devtools-main-content"/>
+  <box id="style-editor-chrome" class="devtools-responsive-container loading theme-body" context="sidebar-context">
+    <box class="splitview-controller">
+      <box class="splitview-main">
+        <toolbar class="devtools-toolbar">
+          <hbox class="devtools-toolbarbutton-group">
+            <toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
+                        accesskey="&newButton.accesskey;"
+                        tooltiptext="&newButton.tooltip;"/>
+            <toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
+                        accesskey="&importButton.accesskey;"
+                        tooltiptext="&importButton.tooltip;"/>
+          </hbox>
+          <spacer/>
+          <toolbarbutton id="style-editor-options"
+                      class="devtools-toolbarbutton devtools-option-toolbarbutton"
+                      tooltiptext="&optionsButton.tooltip;"/>
+        </toolbar>
+      </box>
+      <box id="splitview-resizer-target" class="theme-sidebar splitview-nav-container"
+              persist="height">
+        <html:ol class="splitview-nav" tabindex="0"></html:ol>
+        <html:div class="splitview-nav placeholder empty">
+          <html:p><html:strong>&noStyleSheet.label;</html:strong></html:p>
+          <html:p>&noStyleSheet-tip-start.label;
+            <html:a href="#"
+              class="style-editor-newButton">&noStyleSheet-tip-action.label;</html:a>
+            &noStyleSheet-tip-end.label;</html:p>
+        </html:div>
+      </box> <!-- .splitview-nav-container -->
+    </box>   <!-- .splitview-controller -->
+    <splitter class="devtools-side-splitter devtools-invisible-splitter"/>
+    <box class="splitview-side-details devtools-main-content"/>
 
-      <html:div id="splitview-templates" hidden="true">
-        <html:li id="splitview-tpl-summary-stylesheet" tabindex="0">
-          <label class="stylesheet-enabled" tabindex="0"
-            tooltiptext="&visibilityToggle.tooltip;"
-            accesskey="&saveButton.accesskey;"></label>
-          <html:hgroup class="stylesheet-info">
-            <html:h1><html:a class="stylesheet-name" tabindex="0"><label crop="center"/></html:a></html:h1>
-            <html:div class="stylesheet-more">
-              <html:h3 class="stylesheet-title"></html:h3>
-              <html:h3 class="stylesheet-linked-file"></html:h3>
-              <html:h3 class="stylesheet-rule-count"></html:h3>
-              <spacer/>
-              <html:h3><label class="stylesheet-saveButton"
-                    tooltiptext="&saveButton.tooltip;"
-                    accesskey="&saveButton.accesskey;">&saveButton.label;</label></html:h3>
-            </html:div>
-          </html:hgroup>
-        </html:li>
+    <html:div id="splitview-templates" hidden="true">
+      <html:li id="splitview-tpl-summary-stylesheet" tabindex="0">
+        <label class="stylesheet-enabled" tabindex="0"
+          tooltiptext="&visibilityToggle.tooltip;"
+          accesskey="&saveButton.accesskey;"></label>
+        <html:hgroup class="stylesheet-info">
+          <html:h1><html:a class="stylesheet-name" tabindex="0"><label crop="center"/></html:a></html:h1>
+          <html:div class="stylesheet-more">
+            <html:h3 class="stylesheet-title"></html:h3>
+            <html:h3 class="stylesheet-linked-file"></html:h3>
+            <html:h3 class="stylesheet-rule-count"></html:h3>
+            <spacer/>
+            <html:h3><label class="stylesheet-saveButton"
+                  tooltiptext="&saveButton.tooltip;"
+                  accesskey="&saveButton.accesskey;">&saveButton.label;</label></html:h3>
+          </html:div>
+        </html:hgroup>
+      </html:li>
 
-        <box id="splitview-tpl-details-stylesheet" class="splitview-details">
-          <hbox class="stylesheet-details-container">
-            <box class="stylesheet-editor-input textbox"
-                 data-placeholder="&editorTextbox.placeholder;"/>
-            <splitter class="devtools-side-splitter"/>
-            <vbox class="stylesheet-sidebar theme-sidebar" hidden="true">
-              <toolbar class="devtools-toolbar">
-                &mediaRules.label;
-              </toolbar>
-              <vbox class="stylesheet-media-container" flex="1">
-                <html:div class="stylesheet-media-list" />
-              </vbox>
+      <box id="splitview-tpl-details-stylesheet" class="splitview-details">
+        <hbox class="stylesheet-details-container">
+          <box class="stylesheet-editor-input textbox"
+               data-placeholder="&editorTextbox.placeholder;"/>
+          <splitter class="devtools-side-splitter"/>
+          <vbox class="stylesheet-sidebar theme-sidebar" hidden="true">
+            <toolbar class="devtools-toolbar">
+              &mediaRules.label;
+            </toolbar>
+            <vbox class="stylesheet-media-container" flex="1">
+              <html:div class="stylesheet-media-list" />
             </vbox>
-          </hbox>
-        </box>
-      </html:div> <!-- #splitview-templates -->
-    </box>   <!-- .splitview-root -->
-
-  </stack>
-
+          </vbox>
+        </hbox>
+      </box>
+    </html:div> <!-- #splitview-templates -->
+  </box>
 </window>
--- a/devtools/client/styleeditor/test/browser_styleeditor_loading.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_loading.js
@@ -14,21 +14,20 @@ add_task(async function() {
   const tabAdded = addTab(TESTCASE_URI);
   const target = await TargetFactory.forTab(gBrowser.selectedTab);
   const styleEditorLoaded = gDevTools.showToolbox(target, "styleeditor");
 
   await Promise.all([tabAdded, styleEditorLoaded]);
 
   const toolbox = gDevTools.getToolbox(target);
   const panel = toolbox.getPanel("styleeditor");
-  const { panelWindow } = panel;
+  const { panelWindow, UI: ui } = panel;
 
-  const root = panelWindow.document.querySelector(".splitview-root");
   ok(
-    !root.classList.contains("loading"),
+    !ui._root.classList.contains("loading"),
     "style editor root element does not have 'loading' class name anymore"
   );
 
   let button = panelWindow.document.querySelector(".style-editor-newButton");
   ok(!button.hasAttribute("disabled"), "new style sheet button is enabled");
 
   button = panelWindow.document.querySelector(".style-editor-importButton");
   ok(!button.hasAttribute("disabled"), "import button is enabled");
--- a/devtools/client/styleeditor/test/browser_styleeditor_nostyle.js
+++ b/devtools/client/styleeditor/test/browser_styleeditor_nostyle.js
@@ -3,25 +3,27 @@
 "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() {
-  const { panel } = await openStyleEditorForURL(TESTCASE_URI);
+  const { panel, ui } = await openStyleEditorForURL(TESTCASE_URI);
   const { panelWindow } = panel;
 
-  const root = panelWindow.document.querySelector(".splitview-root");
   ok(
-    !root.classList.contains("loading"),
+    !ui._root.classList.contains("loading"),
     "style editor root element does not have 'loading' class name anymore"
   );
 
-  ok(root.querySelector(".empty.placeholder"), "showing 'no style' indicator");
+  ok(
+    ui._root.querySelector(".empty.placeholder"),
+    "showing 'no style' indicator"
+  );
 
   let button = panelWindow.document.querySelector(".style-editor-newButton");
   ok(!button.hasAttribute("disabled"), "new style sheet button is enabled");
 
   button = panelWindow.document.querySelector(".style-editor-importButton");
   ok(!button.hasAttribute("disabled"), "import button is enabled");
 });