summaryrefslogtreecommitdiffstats
path: root/devtools/client/shared/stylesheet-utils.js
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /devtools/client/shared/stylesheet-utils.js
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'devtools/client/shared/stylesheet-utils.js')
-rw-r--r--devtools/client/shared/stylesheet-utils.js70
1 files changed, 70 insertions, 0 deletions
diff --git a/devtools/client/shared/stylesheet-utils.js b/devtools/client/shared/stylesheet-utils.js
new file mode 100644
index 0000000000..5a034debe1
--- /dev/null
+++ b/devtools/client/shared/stylesheet-utils.js
@@ -0,0 +1,70 @@
+/* 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/. */
+
+/* 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 });
+ });
+}
+
+/*
+ * Put the DevTools theme stylesheet into the provided chrome document.
+ *
+ * @param {Document} doc
+ * The chrome document where the stylesheet should be appended.
+ * @param {String} url
+ * The url of the stylesheet to load.
+ * @return {Object}
+ * - styleSheet {XMLStylesheetProcessingInstruction} the instruction node created.
+ * - loadPromise {Promise} that will resolve/reject when the stylesheet finishes
+ * or fails to load.
+ */
+function appendStyleSheet(doc, url) {
+ const styleSheet = doc.createElementNS(
+ "http://www.w3.org/1999/xhtml",
+ "link"
+ );
+ styleSheet.setAttribute("rel", "stylesheet");
+ styleSheet.setAttribute("href", url);
+ const loadPromise = stylesheetLoadPromise(styleSheet);
+
+ // 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.
+
+ // If there is a global sheet then insert after it.
+ const globalSheet = doc.querySelector(
+ "link[href='chrome://global/skin/global.css']"
+ );
+ if (globalSheet) {
+ globalSheet.after(styleSheet);
+ return { styleSheet, loadPromise };
+ }
+
+ // Otherwise insert before any existing link.
+ const links = doc.querySelectorAll("link");
+ if (links.length) {
+ links[0].before(styleSheet);
+ return { styleSheet, loadPromise };
+ }
+
+ // Fall back to putting at the start of the head or in a non-HTML doc the
+ // start of the document.
+ if (doc.head) {
+ doc.head.prepend(styleSheet);
+ } else {
+ doc.documentElement.prepend(styleSheet);
+ }
+
+ return { styleSheet, loadPromise };
+}
+
+exports.appendStyleSheet = appendStyleSheet;