Bug 1582786 - Append the devtools theme stylesheet sheet after global.css in document.head if it exists instead of using an XML ProcessingInstruction r=nchevobbe

Otherwise, what happens in documents like the webconsole is the theme file gets loaded before global.css, which isn't the intended behavior and makes overriding the styles from global.css more difficult. As an example, some buttons in the webconsole became stretched after Bug 1581914 changed some default styling in global.css. This patch restores the correct behavior by loading the theme afer global.css. global.css is currently loaded in devtools in docs that explicitly use XUL elements (such as storage inspector and style editor), and in docs that need to be supported as top level windows (webconsole, toolbox, and browser toolbox). Unless if we change how things like panels and context menus are styled, the latter group will continue to need to load global.css even as XUL/XBL usage goes away (since they are styled with global.css). Differential Revision: https://phabricator.services.mozilla.com/D46530 --HG-- extra : moz-landing-system : lando
2024-12-02 01:48:05 +00:00 · 2019-09-25 18:16:28 +00:00 · 2019-09-25 18:16:28 +00:00 · 3055031260
commit 3055031260
parent 710d2ef14f
9 changed files with 47 additions and 32 deletions
--- a/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
@ -2,7 +2,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
--- a/devtools/client/framework/toolbox-process-window.html
+++ b/devtools/client/framework/toolbox-process-window.html
@ -7,7 +7,7 @@
      width="900" height="350"
      persist="screenX screenY width height sizemode">
  <head>
-    <link rel="stylesheet" href="chrome://global/skin/"/>
+    <link rel="stylesheet" href="chrome://global/skin/global.css"/>
    <link rel="stylesheet" href="resource://devtools/client/themes/common.css"/>
    <link rel="stylesheet" href="chrome://devtools/content/framework/toolbox-process-window.css"/>
    <script src="chrome://global/content/globalOverlay.js"></script>
--- a/devtools/client/framework/toolbox-window.xul
+++ b/devtools/client/framework/toolbox-window.xul
@ -3,7 +3,7 @@
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>

 <!-- minwidth=50 is sum width of chevron and meatball menu button. -->
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
--- a/devtools/client/framework/toolbox.xul
+++ b/devtools/client/framework/toolbox.xul
@ -2,7 +2,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/toolbox.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/shared/components/NotificationBox.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/framework/components/DebugTargetErrorPage.css" type="text/css"?>
--- a/devtools/client/performance/index.xul
+++ b/devtools/client/performance/index.xul
@ -2,7 +2,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/performance.css" type="text/css"?>
--- a/devtools/client/shared/stylesheet-utils.js
+++ b/devtools/client/shared/stylesheet-utils.js
@ -5,11 +5,18 @@
 /* eslint-env browser */
 "use strict";

+function stylesheetLoadPromise(styleSheet, url) {
+  return new Promise((resolve, reject) => {
+    styleSheet.addEventListener("load", resolve, { once: true });
+    styleSheet.addEventListener("error", reject, { once: true });
+  });
+}
+
 /*
- * Append a stylesheet to the provided XUL document.
+ * Put the DevTools theme stylesheet into the provided chrome document.
 *
- * @param  {Document} xulDocument
- *         The XUL document where the stylesheet should be appended.
+ * @param  {Document} doc
+ *         The chrome document where the stylesheet should be appended.
 * @param  {String} url
 *         The url of the stylesheet to load.
 * @return {Object}
@ -17,28 +24,36 @@
 *         - loadPromise {Promise} that will resolve/reject when the stylesheet finishes
 *           or fails to load.
 */
-function appendStyleSheet(xulDocument, url) {
-  const styleSheetAttr = `href="${url}" type="text/css"`;
-  const styleSheet = xulDocument.createProcessingInstruction(
-    "xml-stylesheet",
-    styleSheetAttr
-  );
-  const loadPromise = new Promise((resolve, reject) => {
-    function onload() {
-      styleSheet.removeEventListener("load", onload);
-      styleSheet.removeEventListener("error", onerror);
-      resolve();
-    }
-    function onerror() {
-      styleSheet.removeEventListener("load", onload);
-      styleSheet.removeEventListener("error", onerror);
-      reject("Failed to load theme file " + url);
-    }
+function appendStyleSheet(doc, url) {
+  if (doc.head) {
+    const styleSheet = doc.createElement("link");
+    styleSheet.setAttribute("rel", "stylesheet");
+    styleSheet.setAttribute("href", url);
+    const loadPromise = stylesheetLoadPromise(styleSheet);

-    styleSheet.addEventListener("load", onload);
-    styleSheet.addEventListener("error", onerror);
-  });
-  xulDocument.insertBefore(styleSheet, xulDocument.documentElement);
+    // In order to make overriding styles sane, we want the order of loaded
+    // sheets to be something like this:
+    //   global.css
+    //   *-theme.css (the file loaded here)
+    //   document-specific-sheet.css
+    // See Bug 1582786 / https://phabricator.services.mozilla.com/D46530#inline-284756.
+    const globalSheet = doc.head.querySelector(
+      "link[href='chrome://global/skin/global.css']"
+    );
+    if (globalSheet) {
+      globalSheet.after(styleSheet);
+    } else {
+      doc.head.prepend(styleSheet);
+    }
+    return { styleSheet, loadPromise };
+  }
+
+  const styleSheet = doc.createProcessingInstruction(
+    "xml-stylesheet",
+    `href="${url}" type="text/css"`
+  );
+  const loadPromise = stylesheetLoadPromise(styleSheet);
+  doc.insertBefore(styleSheet, doc.documentElement);
  return { styleSheet, loadPromise };
 }

--- a/devtools/client/shared/test/doc_options-view.xul
+++ b/devtools/client/shared/test/doc_options-view.xul
@ -2,7 +2,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <!DOCTYPE window []>
--- a/devtools/client/storage/index.xul
+++ b/devtools/client/storage/index.xul
@ -2,7 +2,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/skin/storage.css" type="text/css"?>
--- a/devtools/client/webconsole/index.html
+++ b/devtools/client/webconsole/index.html
@ -10,7 +10,7 @@
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="localization" href="toolkit/main-window/editmenu.ftl"/>
-    <link rel="stylesheet" href="chrome://global/skin/"/>
+    <link rel="stylesheet" href="chrome://global/skin/global.css"/>
    <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
    <link rel="stylesheet" href="chrome://devtools/skin/webconsole.css"/>
    <link rel="stylesheet" href="chrome://devtools/skin/components-frame.css"/>