From 305503126031143246ddc449f1243e43644b37cc Mon Sep 17 00:00:00 2001 From: Brian Grinstead Date: Wed, 25 Sep 2019 18:16:28 +0000 Subject: [PATCH] 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 --- .../test/browser_toolbox_sidebar_tool.xul | 2 +- .../framework/toolbox-process-window.html | 2 +- devtools/client/framework/toolbox-window.xul | 2 +- devtools/client/framework/toolbox.xul | 2 +- devtools/client/performance/index.xul | 2 +- devtools/client/shared/stylesheet-utils.js | 63 ++++++++++++------- .../client/shared/test/doc_options-view.xul | 2 +- devtools/client/storage/index.xul | 2 +- devtools/client/webconsole/index.html | 2 +- 9 files changed, 47 insertions(+), 32 deletions(-) diff --git a/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul b/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul index ad872c2aaf59..ce47b1c1cdf4 100644 --- a/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul +++ b/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul @@ -2,7 +2,7 @@ - + diff --git a/devtools/client/framework/toolbox-process-window.html b/devtools/client/framework/toolbox-process-window.html index e66a0d327ce2..d7a36498cd9d 100644 --- 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"> - + diff --git a/devtools/client/framework/toolbox-window.xul b/devtools/client/framework/toolbox-window.xul index 7af1205ffd3f..09960681b763 100644 --- 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/. --> - + - + diff --git a/devtools/client/performance/index.xul b/devtools/client/performance/index.xul index c833260d0e88..1d48e034fde1 100644 --- a/devtools/client/performance/index.xul +++ b/devtools/client/performance/index.xul @@ -2,7 +2,7 @@ - + diff --git a/devtools/client/shared/stylesheet-utils.js b/devtools/client/shared/stylesheet-utils.js index a965b9798395..d9ee7b443770 100644 --- 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 }; } diff --git a/devtools/client/shared/test/doc_options-view.xul b/devtools/client/shared/test/doc_options-view.xul index 06ae1cbf1963..1c3f6dc813ef 100644 --- a/devtools/client/shared/test/doc_options-view.xul +++ b/devtools/client/shared/test/doc_options-view.xul @@ -2,7 +2,7 @@ - + diff --git a/devtools/client/storage/index.xul b/devtools/client/storage/index.xul index 0bc9daaed20f..1555c45f54e8 100644 --- a/devtools/client/storage/index.xul +++ b/devtools/client/storage/index.xul @@ -2,7 +2,7 @@ - + diff --git a/devtools/client/webconsole/index.html b/devtools/client/webconsole/index.html index b01309f16667..8b12abb2fedc 100644 --- a/devtools/client/webconsole/index.html +++ b/devtools/client/webconsole/index.html @@ -10,7 +10,7 @@ - +