diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/server/actors/utils/stylesheets-manager.js | 869 |
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, +}; |