summaryrefslogtreecommitdiffstats
path: root/devtools/server/actors/utils/stylesheets-manager.js
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--devtools/server/actors/utils/stylesheets-manager.js869
1 files changed, 869 insertions, 0 deletions
diff --git a/devtools/server/actors/utils/stylesheets-manager.js b/devtools/server/actors/utils/stylesheets-manager.js
new file mode 100644
index 0000000000..b6dd0b5ea2
--- /dev/null
+++ b/devtools/server/actors/utils/stylesheets-manager.js
@@ -0,0 +1,869 @@
+/* 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/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const {
+ getSourcemapBaseURL,
+} = require("resource://devtools/server/actors/utils/source-map-utils.js");
+
+loader.lazyRequireGetter(
+ this,
+ ["addPseudoClassLock", "removePseudoClassLock"],
+ "resource://devtools/server/actors/highlighters/utils/markup.js",
+ true
+);
+loader.lazyRequireGetter(
+ this,
+ "loadSheet",
+ "resource://devtools/shared/layout/utils.js",
+ true
+);
+loader.lazyRequireGetter(
+ this,
+ ["getStyleSheetOwnerNode", "getStyleSheetText"],
+ "resource://devtools/server/actors/utils/stylesheet-utils.js",
+ true
+);
+
+const TRANSITION_PSEUDO_CLASS = ":-moz-styleeditor-transitioning";
+const TRANSITION_DURATION_MS = 500;
+const TRANSITION_BUFFER_MS = 1000;
+const TRANSITION_RULE_SELECTOR = `:root${TRANSITION_PSEUDO_CLASS}, :root${TRANSITION_PSEUDO_CLASS} *:not(:-moz-native-anonymous)`;
+const TRANSITION_SHEET =
+ "data:text/css;charset=utf-8," +
+ encodeURIComponent(`
+ ${TRANSITION_RULE_SELECTOR} {
+ transition-duration: ${TRANSITION_DURATION_MS}ms !important;
+ transition-delay: 0ms !important;
+ transition-timing-function: ease-out !important;
+ transition-property: all !important;
+ }
+`);
+
+// The possible kinds of style-applied events.
+// UPDATE_PRESERVING_RULES means that the update is guaranteed to
+// preserve the number and order of rules on the style sheet.
+// UPDATE_GENERAL covers any other kind of change to the style sheet.
+const UPDATE_PRESERVING_RULES = 0;
+const UPDATE_GENERAL = 1;
+
+// If the user edits a stylesheet, we stash a copy of the edited text
+// here, keyed by the stylesheet. This way, if the tools are closed
+// and then reopened, the edited text will be available. A weak map
+// is used so that navigation by the user will eventually cause the
+// edited text to be collected.
+const modifiedStyleSheets = new WeakMap();
+
+/**
+ * Manage stylesheets related to a given Target Actor.
+ *
+ * @emits applicable-stylesheet-added: emitted when an applicable stylesheet is added to the document.
+ * First arg is an object with the following properties:
+ * - resourceId {String}: The id that was assigned to the stylesheet
+ * - styleSheet {StyleSheet}: The actual stylesheet
+ * - creationData {Object}: An object with:
+ * - isCreatedByDevTools {Boolean}: Was the stylesheet created by DevTools (e.g.
+ * by the user clicking the new stylesheet button in the styleeditor)
+ * - fileName {String}
+ * @emits stylesheet-updated: emitted when there was changes in a stylesheet
+ * First arg is an object with the following properties:
+ * - resourceId {String}: The id that was assigned to the stylesheet
+ * - updateKind {String}: Which kind of update it is ("style-applied",
+ * "at-rules-changed", "matches-change", "property-change")
+ * - updates {Object}: The update data
+ */
+class StyleSheetsManager extends EventEmitter {
+ _styleSheetCount = 0;
+ _styleSheetMap = new Map();
+ // List of all watched media queries. Change listeners are being registered from getAtRules.
+ _mqlList = [];
+
+ /**
+ * @param TargetActor targetActor
+ * The target actor from which we should observe stylesheet changes.
+ */
+ constructor(targetActor) {
+ super();
+
+ this._targetActor = targetActor;
+ this._onApplicableStateChanged = this._onApplicableStateChanged.bind(this);
+ this._onTargetActorWindowReady = this._onTargetActorWindowReady.bind(this);
+ }
+
+ /**
+ * Calling this function will make the StyleSheetsManager start the event listeners needed
+ * to watch for stylesheet additions and modifications.
+ * It will also trigger applicable-stylesheet-added events for the existing stylesheets.
+ * This function resolves once it notified about existing stylesheets.
+ */
+ async startWatching() {
+ // Process existing stylesheets
+ const promises = [];
+ for (const window of this._targetActor.windows) {
+ promises.push(this._getStyleSheetsForWindow(window));
+ }
+
+ // Listen for new stylesheet being added via StyleSheetApplicableStateChanged
+ this._targetActor.chromeEventHandler.addEventListener(
+ "StyleSheetApplicableStateChanged",
+ this._onApplicableStateChanged,
+ true
+ );
+ this._watchStyleSheetChangeEvents();
+ this._targetActor.on("window-ready", this._onTargetActorWindowReady);
+
+ // Finally, notify about existing stylesheets
+ let styleSheets = await Promise.all(promises);
+ styleSheets = styleSheets.flat();
+ for (const styleSheet of styleSheets) {
+ const resourceId = this._findStyleSheetResourceId(styleSheet);
+ if (resourceId) {
+ // If the stylesheet was already registered before any consumer started
+ // watching, emit "applicable-stylesheet-added" immediately.
+ this.emitAsync("applicable-stylesheet-added", {
+ resourceId,
+ styleSheet,
+ });
+ } else {
+ this._registerStyleSheet(styleSheet);
+ }
+ }
+ }
+
+ _watchStyleSheetChangeEvents() {
+ for (const window of this._targetActor.windows) {
+ this._watchStyleSheetChangeEventsForWindow(window);
+ }
+ }
+
+ _onTargetActorWindowReady({ window }) {
+ this._watchStyleSheetChangeEventsForWindow(window);
+ }
+
+ _watchStyleSheetChangeEventsForWindow(window) {
+ // We have to set this flag in order to get the
+ // StyleSheetApplicableStateChanged events. See Document.webidl.
+ window.document.styleSheetChangeEventsEnabled = true;
+ }
+
+ _unwatchStyleSheetChangeEvents() {
+ for (const window of this._targetActor.windows) {
+ window.document.styleSheetChangeEventsEnabled = false;
+ }
+ }
+
+ /**
+ * Create a new style sheet in the document with the given text.
+ *
+ * @param {Document} document
+ * Document that the new style sheet belong to.
+ * @param {string} text
+ * Content of style sheet.
+ * @param {string} fileName
+ * If the stylesheet adding is from file, `fileName` indicates the path.
+ */
+ async addStyleSheet(document, text, fileName) {
+ const parent = document.documentElement;
+ const style = document.createElementNS(
+ "http://www.w3.org/1999/xhtml",
+ "style"
+ );
+ style.setAttribute("type", "text/css");
+ style.setDevtoolsAsTriggeringPrincipal();
+
+ if (text) {
+ style.appendChild(document.createTextNode(text));
+ }
+
+ // This triggers StyleSheetApplicableStateChanged event.
+ parent.appendChild(style);
+
+ // This promise will be resolved when the resource for this stylesheet is available.
+ let resolve = null;
+ const promise = new Promise(r => {
+ resolve = r;
+ });
+
+ if (!this._styleSheetCreationData) {
+ this._styleSheetCreationData = new WeakMap();
+ }
+ this._styleSheetCreationData.set(style.sheet, {
+ isCreatedByDevTools: true,
+ fileName,
+ resolve,
+ });
+
+ await promise;
+
+ return style.sheet;
+ }
+
+ /**
+ * Return resourceId of the given style sheet or create one if the stylesheet wasn't
+ * registered yet.
+ *
+ * @params {StyleSheet} styleSheet
+ * @returns {String} resourceId
+ */
+ getStyleSheetResourceId(styleSheet) {
+ const existingResourceId = this._findStyleSheetResourceId(styleSheet);
+ if (existingResourceId) {
+ return existingResourceId;
+ }
+
+ // If we couldn't find an associated resourceId, that means the stylesheet isn't
+ // registered yet. Calling _registerStyleSheet will register it and return the
+ // associated resourceId it computed for it.
+ return this._registerStyleSheet(styleSheet);
+ }
+
+ /**
+ * Return the associated resourceId of the given registered style sheet, or null if the
+ * stylesheet wasn't registered yet.
+ *
+ * @params {StyleSheet} styleSheet
+ * @returns {String} resourceId
+ */
+ _findStyleSheetResourceId(styleSheet) {
+ for (const [
+ resourceId,
+ existingStyleSheet,
+ ] of this._styleSheetMap.entries()) {
+ if (styleSheet === existingStyleSheet) {
+ return resourceId;
+ }
+ }
+
+ return null;
+ }
+
+ /**
+ * Return owner node of the style sheet of the given resource id.
+ *
+ * @params {String} resourceId
+ * The id associated with the stylesheet
+ * @returns {Element|null}
+ */
+ getOwnerNode(resourceId) {
+ const styleSheet = this._styleSheetMap.get(resourceId);
+ return styleSheet.ownerNode;
+ }
+
+ /**
+ * Return the index of given stylesheet of the given resource id.
+ *
+ * @params {String} resourceId
+ * The id associated with the stylesheet
+ * @returns {Number}
+ */
+ getStyleSheetIndex(resourceId) {
+ const styleSheet = this._styleSheetMap.get(resourceId);
+ return this._getStyleSheetIndex(styleSheet);
+ }
+
+ /**
+ * Get the text of a stylesheet given its resourceId.
+ *
+ * @params {String} resourceId
+ * The id associated with the stylesheet
+ * @returns {String}
+ */
+ async getText(resourceId) {
+ const styleSheet = this._styleSheetMap.get(resourceId);
+
+ const modifiedText = modifiedStyleSheets.get(styleSheet);
+
+ // modifiedText is the content of the stylesheet updated by update function.
+ // In case not updating, this is undefined.
+ if (modifiedText !== undefined) {
+ return modifiedText;
+ }
+
+ return getStyleSheetText(styleSheet);
+ }
+
+ /**
+ * Toggle the disabled property of the stylesheet
+ *
+ * @params {String} resourceId
+ * The id associated with the stylesheet
+ * @return {Boolean} the disabled state after toggling.
+ */
+ toggleDisabled(resourceId) {
+ const styleSheet = this._styleSheetMap.get(resourceId);
+ styleSheet.disabled = !styleSheet.disabled;
+
+ this._notifyPropertyChanged(resourceId, "disabled", styleSheet.disabled);
+
+ return styleSheet.disabled;
+ }
+
+ /**
+ * Update the style sheet in place with new text.
+ *
+ * @param {String} resourceId
+ * @param {String} text
+ * New text.
+ * @param {Object} options
+ * @param {Boolean} options.transition
+ * Whether to do CSS transition for change. Defaults to false.
+ * @param {Number} options.kind
+ * Either UPDATE_PRESERVING_RULES or UPDATE_GENERAL. Defaults to UPDATE_GENERAL.
+ * @param {String} options.cause
+ * Indicates the cause of this update (e.g. "styleeditor") if this was called
+ * from the stylesheet to be edited by the user from the StyleEditor.
+ */
+ async setStyleSheetText(
+ resourceId,
+ text,
+ { transition = false, kind = UPDATE_GENERAL, cause = "" } = {}
+ ) {
+ const styleSheet = this._styleSheetMap.get(resourceId);
+ InspectorUtils.parseStyleSheet(styleSheet, text);
+ modifiedStyleSheets.set(styleSheet, text);
+
+ if (kind !== UPDATE_PRESERVING_RULES) {
+ this._notifyPropertyChanged(
+ resourceId,
+ "ruleCount",
+ styleSheet.cssRules.length
+ );
+ }
+
+ if (transition) {
+ this._startTransition(resourceId, kind, cause);
+ } else {
+ this.emit("stylesheet-updated", {
+ resourceId,
+ updateKind: "style-applied",
+ updates: {
+ event: { kind, cause },
+ },
+ });
+ }
+
+ // Remove event handler from all media query list we set to. We are going to re-set
+ // those handler properly from getAtRules.
+ for (const mql of this._mqlList) {
+ mql.onchange = null;
+ }
+
+ const atRules = await this.getAtRules(styleSheet);
+ this.emit("stylesheet-updated", {
+ resourceId,
+ updateKind: "at-rules-changed",
+ updates: {
+ resourceUpdates: { atRules },
+ },
+ });
+ }
+
+ /**
+ * Applies a transition to the stylesheet document so any change made by the user in the
+ * client will be animated so it's more visible.
+ *
+ * @param {String} resourceId
+ * The id associated with the stylesheet
+ * @param {Number} kind
+ * Either UPDATE_PRESERVING_RULES or UPDATE_GENERAL
+ * @param {String} cause
+ * Indicates the cause of this update (e.g. "styleeditor") if this was called
+ * from the stylesheet to be edited by the user from the StyleEditor.
+ */
+ _startTransition(resourceId, kind, cause) {
+ const styleSheet = this._styleSheetMap.get(resourceId);
+ const document = styleSheet.associatedDocument;
+ const window = document.ownerGlobal;
+
+ if (!this._transitionSheetLoaded) {
+ this._transitionSheetLoaded = true;
+ // We don't remove this sheet. It uses an internal selector that
+ // we only apply via locks, so there's no need to load and unload
+ // it all the time.
+ loadSheet(window, TRANSITION_SHEET);
+ }
+
+ addPseudoClassLock(document.documentElement, TRANSITION_PSEUDO_CLASS);
+
+ // Set up clean up and commit after transition duration (+buffer)
+ // @see _onTransitionEnd
+ window.clearTimeout(this._transitionTimeout);
+ this._transitionTimeout = window.setTimeout(
+ this._onTransitionEnd.bind(this, resourceId, kind, cause),
+ TRANSITION_DURATION_MS + TRANSITION_BUFFER_MS
+ );
+ }
+
+ /**
+ * @param {String} resourceId
+ * The id associated with the stylesheet
+ * @param {Number} kind
+ * Either UPDATE_PRESERVING_RULES or UPDATE_GENERAL
+ * @param {String} cause
+ * Indicates the cause of this update (e.g. "styleeditor") if this was called
+ * from the stylesheet to be edited by the user from the StyleEditor.
+ */
+ _onTransitionEnd(resourceId, kind, cause) {
+ const styleSheet = this._styleSheetMap.get(resourceId);
+ const document = styleSheet.associatedDocument;
+
+ this._transitionTimeout = null;
+ removePseudoClassLock(document.documentElement, TRANSITION_PSEUDO_CLASS);
+
+ this.emit("stylesheet-updated", {
+ resourceId,
+ updateKind: "style-applied",
+ updates: {
+ event: { kind, cause },
+ },
+ });
+ }
+
+ /**
+ * Retrieve the CSSRuleList of a given stylesheet
+ *
+ * @param {StyleSheet} styleSheet
+ * @returns {CSSRuleList}
+ */
+ _getCSSRules(styleSheet) {
+ try {
+ return styleSheet.cssRules;
+ } catch (e) {
+ // sheet isn't loaded yet
+ }
+
+ if (!styleSheet.ownerNode) {
+ return Promise.resolve([]);
+ }
+
+ return new Promise(resolve => {
+ styleSheet.ownerNode.addEventListener(
+ "load",
+ () => resolve(styleSheet.cssRules),
+ { once: true }
+ );
+ });
+ }
+
+ /**
+ * Get the stylesheets imported by a given stylesheet (via @import)
+ *
+ * @param {Document} document
+ * @param {StyleSheet} styleSheet
+ * @returns Array<StyleSheet>
+ */
+ async _getImportedStyleSheets(document, styleSheet) {
+ const importedStyleSheets = [];
+
+ for (const rule of await this._getCSSRules(styleSheet)) {
+ if (rule.type == CSSRule.IMPORT_RULE) {
+ // With the Gecko style system, the associated styleSheet may be null
+ // if it has already been seen because an import cycle for the same
+ // URL. With Stylo, the styleSheet will exist (which is correct per
+ // the latest CSSOM spec), so we also need to check ancestors for the
+ // same URL to avoid cycles.
+ if (
+ !rule.styleSheet ||
+ this._haveAncestorWithSameURL(rule.styleSheet) ||
+ !this._shouldListSheet(rule.styleSheet)
+ ) {
+ continue;
+ }
+
+ importedStyleSheets.push(rule.styleSheet);
+
+ // recurse imports in this stylesheet as well
+ const children = await this._getImportedStyleSheets(
+ document,
+ rule.styleSheet
+ );
+ importedStyleSheets.push(...children);
+ } else if (rule.type != CSSRule.CHARSET_RULE) {
+ // @import rules must precede all others except @charset
+ break;
+ }
+ }
+
+ return importedStyleSheets;
+ }
+
+ /**
+ * Retrieve the at-rules of a given stylesheet
+ *
+ * @param {StyleSheet} styleSheet
+ * @returns {Array<Object>} An array of object of the following shape:
+ * - type {String}
+ * - mediaText {String}
+ * - conditionText {String}
+ * - matches {Boolean}: true if the media rule matches the current state of the document
+ * - line {Number}
+ * - column {Number}
+ */
+ async getAtRules(styleSheet) {
+ const resourceId = this._findStyleSheetResourceId(styleSheet);
+ if (!resourceId) {
+ return [];
+ }
+
+ this._mqlList = [];
+
+ const styleSheetRules = await this._getCSSRules(styleSheet);
+ const document = styleSheet.associatedDocument;
+ const win = document?.ownerGlobal;
+ const CSSGroupingRule = win?.CSSGroupingRule;
+
+ // We need to go through nested rules to extract all the rules we're interested in
+ const rules = [];
+ const traverseRules = ruleList => {
+ for (const rule of ruleList) {
+ // Don't go further if the rule can't hold other rules (e.g. not a @media, @supports, …)
+ if (!CSSGroupingRule || !CSSGroupingRule.isInstance(rule)) {
+ continue;
+ }
+
+ const line = InspectorUtils.getRelativeRuleLine(rule);
+ const column = InspectorUtils.getRuleColumn(rule);
+
+ const className = ChromeUtils.getClassName(rule);
+ if (className === "CSSMediaRule") {
+ let matches = false;
+
+ try {
+ const mql = win.matchMedia(rule.media.mediaText);
+ matches = mql.matches;
+ mql.onchange = this._onMatchesChange.bind(
+ this,
+ resourceId,
+ rules.length
+ );
+ this._mqlList.push(mql);
+ } catch (e) {
+ // Ignored
+ }
+
+ rules.push({
+ type: "media",
+ mediaText: rule.media.mediaText,
+ conditionText: rule.conditionText,
+ matches,
+ line,
+ column,
+ });
+ } else if (className === "CSSContainerRule") {
+ rules.push({
+ type: "container",
+ conditionText: rule.conditionText,
+ line,
+ column,
+ });
+ } else if (className === "CSSSupportsRule") {
+ rules.push({
+ type: "support",
+ conditionText: rule.conditionText,
+ line,
+ column,
+ });
+ } else if (className === "CSSLayerBlockRule") {
+ rules.push({
+ type: "layer",
+ layerName: rule.name,
+ line,
+ column,
+ });
+ }
+
+ if (rule.cssRules) {
+ traverseRules(rule.cssRules);
+ }
+ }
+ };
+ traverseRules(styleSheetRules);
+ return rules;
+ }
+
+ /**
+ * Called when the status of a media query support changes (i.e. it now matches, or it
+ * was matching but isn't anymore)
+ *
+ * @param {String} resourceId
+ * The id associated with the stylesheet
+ * @param {Number} index
+ * The index of the media rule relatively to all the other at-rules of the stylesheet
+ * @param {MediaQueryList} mql
+ * The result of matchMedia for the given media rule
+ */
+ _onMatchesChange(resourceId, index, mql) {
+ this.emit("stylesheet-updated", {
+ resourceId,
+ updateKind: "matches-change",
+ updates: {
+ nestedResourceUpdates: [
+ {
+ path: ["atRules", index, "matches"],
+ value: mql.matches,
+ },
+ ],
+ },
+ });
+ }
+
+ /**
+ * Get the node href of a given stylesheet
+ *
+ * @param {StyleSheet} styleSheet
+ * @returns {String}
+ */
+ _getNodeHref(styleSheet) {
+ const { ownerNode } = styleSheet;
+ if (!ownerNode) {
+ return null;
+ }
+
+ if (ownerNode.nodeType == ownerNode.DOCUMENT_NODE) {
+ return ownerNode.location.href;
+ }
+
+ if (ownerNode.ownerDocument?.location) {
+ return ownerNode.ownerDocument.location.href;
+ }
+
+ return null;
+ }
+
+ /**
+ * Get the sourcemap base url of a given stylesheet
+ *
+ * @param {StyleSheet} styleSheet
+ * @returns {String}
+ */
+ _getSourcemapBaseURL(styleSheet) {
+ // When the style is injected via nsIDOMWindowUtils.loadSheet, even
+ // the parent style sheet has no owner, so default back to target actor
+ // document
+ const ownerNode = getStyleSheetOwnerNode(styleSheet);
+ const ownerDocument = ownerNode
+ ? ownerNode.ownerDocument
+ : this._targetActor.window;
+
+ return getSourcemapBaseURL(
+ // Technically resolveSourceURL should be used here alongside
+ // "this.rawSheet.sourceURL", but the style inspector does not support
+ // /*# sourceURL=*/ in CSS, so we're omitting it here (bug 880831).
+ styleSheet.href || this._getNodeHref(styleSheet),
+ ownerDocument
+ );
+ }
+
+ /**
+ * Get the index of a given stylesheet in the document it lives in
+ *
+ * @param {StyleSheet} styleSheet
+ * @returns {Number}
+ */
+ _getStyleSheetIndex(styleSheet) {
+ const styleSheets = InspectorUtils.getAllStyleSheets(
+ this._targetActor.window.document,
+ true
+ );
+ return styleSheets.indexOf(styleSheet);
+ }
+
+ /**
+ * Get all the stylesheets for a given window
+ *
+ * @param {Window} window
+ * @returns {Array<StyleSheet>}
+ */
+ async _getStyleSheetsForWindow(window) {
+ const { document } = window;
+ const documentOnly = !document.nodePrincipal.isSystemPrincipal;
+
+ const styleSheets = [];
+
+ for (const styleSheet of InspectorUtils.getAllStyleSheets(
+ document,
+ documentOnly
+ )) {
+ if (!this._shouldListSheet(styleSheet)) {
+ continue;
+ }
+
+ styleSheets.push(styleSheet);
+
+ // Get all sheets, including imported ones
+ const importedStyleSheets = await this._getImportedStyleSheets(
+ document,
+ styleSheet
+ );
+ styleSheets.push(...importedStyleSheets);
+ }
+
+ return styleSheets;
+ }
+
+ /**
+ * Returns true if a given stylesheet has an ancestor with the same url it has
+ *
+ * @param {StyleSheet} styleSheet
+ * @returns {Boolean}
+ */
+ _haveAncestorWithSameURL(styleSheet) {
+ const href = styleSheet.href;
+ while (styleSheet.parentStyleSheet) {
+ if (styleSheet.parentStyleSheet.href == href) {
+ return true;
+ }
+ styleSheet = styleSheet.parentStyleSheet;
+ }
+ return false;
+ }
+
+ /**
+ * Helper function called when a property changed in a given stylesheet
+ *
+ * @param {String} resourceId
+ * The id of the stylesheet the change occured in
+ * @param {String} property
+ * The property that was changed
+ * @param {String} value
+ * The value of the property
+ */
+ _notifyPropertyChanged(resourceId, property, value) {
+ this.emit("stylesheet-updated", {
+ resourceId,
+ updateKind: "property-change",
+ updates: { resourceUpdates: { [property]: value } },
+ });
+ }
+
+ /**
+ * Event handler that is called when the state of applicable of style sheet is changed.
+ *
+ * For now, StyleSheetApplicableStateChanged event will be called at following timings.
+ * - Append <link> of stylesheet to document
+ * - Append <style> to document
+ * - Change disable attribute of stylesheet object
+ * - Change disable attribute of <link> to false
+ * - Stylesheet is constructed.
+ * When appending <link>, <style> or changing `disabled` attribute to false,
+ * `applicable` is passed as true. The other hand, when changing `disabled`
+ * to true, this will be false.
+ * NOTE: For now, StyleSheetApplicableStateChanged will not be called when removing the
+ * link and style element.
+ *
+ * @param {StyleSheetApplicableStateChanged}
+ * The triggering event.
+ */
+ _onApplicableStateChanged({ applicable, stylesheet: styleSheet }) {
+ if (
+ // Have interest in applicable stylesheet only.
+ applicable &&
+ styleSheet.associatedDocument &&
+ (!this._targetActor.ignoreSubFrames ||
+ styleSheet.associatedDocument.ownerGlobal ===
+ this._targetActor.window) &&
+ this._shouldListSheet(styleSheet) &&
+ !this._haveAncestorWithSameURL(styleSheet)
+ ) {
+ this._registerStyleSheet(styleSheet);
+ }
+ }
+
+ /**
+ * If the stylesheet isn't registered yet, this function will generate an associated
+ * resourceId and will emit an "applicable-stylesheet-added" event.
+ *
+ * @param {StyleSheet} styleSheet
+ * @returns {String} the associated resourceId
+ */
+ _registerStyleSheet(styleSheet) {
+ const existingResourceId = this._findStyleSheetResourceId(styleSheet);
+ // If the stylesheet is already registered, there's no need to notify about it again.
+ if (existingResourceId) {
+ return existingResourceId;
+ }
+
+ // It's important to prefix the resourceId with the target actorID so we can't have
+ // duplicated resource ids when the client connects to multiple targets.
+ const resourceId = `${this._targetActor.actorID}:stylesheet:${this
+ ._styleSheetCount++}`;
+ this._styleSheetMap.set(resourceId, styleSheet);
+
+ const creationData = this._styleSheetCreationData?.get(styleSheet);
+ this._styleSheetCreationData?.delete(styleSheet);
+
+ // We need to use emitAsync and await on it so the watcher can sends the resource to
+ // the client before we resolve a potential creationData promise.
+ const onEventHandlerDone = this.emitAsync("applicable-stylesheet-added", {
+ resourceId,
+ styleSheet,
+ creationData,
+ });
+
+ // creationData exists if this stylesheet was created via `addStyleSheet`.
+ if (creationData) {
+ // We resolve the promise once the handler of applicable-stylesheet-added are settled,
+ // (e.g. the watcher sent the resources to the client) so `addStyleSheet` calls can
+ // be fullfilled.
+ onEventHandlerDone.then(() => creationData?.resolve());
+ }
+ return resourceId;
+ }
+
+ /**
+ * Returns true if the passed styleSheet should be handled.
+ *
+ * @param {StyleSheet} styleSheet
+ * @returns {Boolean}
+ */
+ _shouldListSheet(styleSheet) {
+ // Special case about:PreferenceStyleSheet, as it is generated on the
+ // fly and the URI is not registered with the about: handler.
+ // https://bugzilla.mozilla.org/show_bug.cgi?id=935803#c37
+ if (styleSheet.href?.toLowerCase() === "about:preferencestylesheet") {
+ return false;
+ }
+
+ return true;
+ }
+
+ /**
+ * The StyleSheetsManager instance is managed by the target, so this will be called when
+ * the target gets destroyed.
+ */
+ destroy() {
+ // Cleanup
+ this._targetActor.off("window-ready", this._watchStyleSheetChangeEvents);
+
+ try {
+ this._targetActor.chromeEventHandler.removeEventListener(
+ "StyleSheetApplicableStateChanged",
+ this._onApplicableStateChanged,
+ true
+ );
+ this._unwatchStyleSheetChangeEvents();
+ } catch (e) {
+ console.error(
+ "Error when destroying StyleSheet manager for",
+ this._targetActor,
+ ": ",
+ e
+ );
+ }
+
+ this._styleSheetMap.clear();
+ this._styleSheetMap = null;
+ this._targetActor = null;
+ this._styleSheetCreationData = null;
+ this._mqlList = null;
+ }
+}
+
+module.exports = {
+ StyleSheetsManager,
+ UPDATE_GENERAL,
+ UPDATE_PRESERVING_RULES,
+};