Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 1293 insertions, 0 deletions

diff --git a/devtools/server/actors/page-style.js b/devtools/server/actors/page-style.js
new file mode 100644
index 0000000000..a1591d9bcb
--- /dev/null
+++ b/devtools/server/actors/page-style.js
@@ -0,0 +1,1293 @@
+/* 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 { Actor } = require("resource://devtools/shared/protocol.js");
+const {
+  pageStyleSpec,
+} = require("resource://devtools/shared/specs/page-style.js");
+
+const { getCSSLexer } = require("resource://devtools/shared/css/lexer.js");
+const {
+  LongStringActor,
+} = require("resource://devtools/server/actors/string.js");
+const TrackChangeEmitter = require("resource://devtools/server/actors/utils/track-change-emitter.js");
+
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "StyleRuleActor",
+  "resource://devtools/server/actors/style-rule.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "getFontPreviewData",
+  "resource://devtools/server/actors/utils/style-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "CssLogic",
+  "resource://devtools/server/actors/inspector/css-logic.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "SharedCssLogic",
+  "resource://devtools/shared/inspector/css-logic.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "getDefinedGeometryProperties",
+  "resource://devtools/server/actors/highlighters/geometry-editor.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "UPDATE_GENERAL",
+  "resource://devtools/server/actors/utils/stylesheets-manager.js",
+  true
+);
+
+loader.lazyGetter(this, "PSEUDO_ELEMENTS", () => {
+  return InspectorUtils.getCSSPseudoElementNames();
+});
+loader.lazyGetter(this, "FONT_VARIATIONS_ENABLED", () => {
+  return Services.prefs.getBoolPref("layout.css.font-variations.enabled");
+});
+
+const NORMAL_FONT_WEIGHT = 400;
+const BOLD_FONT_WEIGHT = 700;
+
+/**
+ * The PageStyle actor lets the client look at the styles on a page, as
+ * they are applied to a given node.
+ */
+class PageStyleActor extends Actor {
+  /**
+   * Create a PageStyleActor.
+   *
+   * @param inspector
+   *    The InspectorActor that owns this PageStyleActor.
+   *
+   * @constructor
+   */
+  constructor(inspector) {
+    super(inspector.conn, pageStyleSpec);
+    this.inspector = inspector;
+    if (!this.inspector.walker) {
+      throw Error(
+        "The inspector's WalkerActor must be created before " +
+          "creating a PageStyleActor."
+      );
+    }
+    this.walker = inspector.walker;
+    this.cssLogic = new CssLogic();
+
+    // Stores the association of DOM objects -> actors
+    this.refMap = new Map();
+
+    // Latest node queried for its applied styles.
+    this.selectedElement = null;
+
+    // Maps document elements to style elements, used to add new rules.
+    this.styleElements = new WeakMap();
+
+    this.onFrameUnload = this.onFrameUnload.bind(this);
+
+    this.inspector.targetActor.on("will-navigate", this.onFrameUnload);
+
+    this._observedRules = [];
+    this._styleApplied = this._styleApplied.bind(this);
+
+    this.styleSheetsManager =
+      this.inspector.targetActor.getStyleSheetsManager();
+
+    this._onStylesheetUpdated = this._onStylesheetUpdated.bind(this);
+    this.styleSheetsManager.on("stylesheet-updated", this._onStylesheetUpdated);
+  }
+
+  destroy() {
+    if (!this.walker) {
+      return;
+    }
+    super.destroy();
+    this.inspector.targetActor.off("will-navigate", this.onFrameUnload);
+    this.inspector = null;
+    this.walker = null;
+    this.refMap = null;
+    this.selectedElement = null;
+    this.cssLogic = null;
+    this.styleElements = null;
+
+    this._observedRules = [];
+  }
+
+  get ownerWindow() {
+    return this.inspector.targetActor.window;
+  }
+
+  form() {
+    // We need to use CSS from the inspected window in order to use CSS.supports() and
+    // detect the right platform features from there.
+    const CSS = this.inspector.targetActor.window.CSS;
+
+    return {
+      actor: this.actorID,
+      traits: {
+        // Whether the page supports values of font-stretch from CSS Fonts Level 4.
+        fontStretchLevel4: CSS.supports("font-stretch: 100%"),
+        // Whether the page supports values of font-style from CSS Fonts Level 4.
+        fontStyleLevel4: CSS.supports("font-style: oblique 20deg"),
+        // Whether getAllUsedFontFaces/getUsedFontFaces accepts the includeVariations
+        // argument.
+        fontVariations: FONT_VARIATIONS_ENABLED,
+        // Whether the page supports values of font-weight from CSS Fonts Level 4.
+        // font-weight at CSS Fonts Level 4 accepts values in increments of 1 rather
+        // than 100. However, CSS.supports() returns false positives, so we guard with the
+        // expected support of font-stretch at CSS Fonts Level 4.
+        fontWeightLevel4:
+          CSS.supports("font-weight: 1") && CSS.supports("font-stretch: 100%"),
+      },
+    };
+  }
+
+  /**
+   * Called when a style sheet is updated.
+   */
+  _styleApplied(kind, styleSheet) {
+    // No matter what kind of update is done, we need to invalidate
+    // the keyframe cache.
+    this.cssLogic.reset();
+    if (kind === UPDATE_GENERAL) {
+      this.emit("stylesheet-updated");
+    }
+  }
+
+  /**
+   * Return or create a StyleRuleActor for the given item.
+   * @param item Either a CSSStyleRule or a DOM element.
+   */
+  _styleRef(item) {
+    if (this.refMap.has(item)) {
+      return this.refMap.get(item);
+    }
+    const actor = new StyleRuleActor(this, item);
+    this.manage(actor);
+    this.refMap.set(item, actor);
+
+    return actor;
+  }
+
+  /**
+   * Update the association between a StyleRuleActor and its
+   * corresponding item.  This is used when a StyleRuleActor updates
+   * as style sheet and starts using a new rule.
+   *
+   * @param oldItem The old association; either a CSSStyleRule or a
+   *                DOM element.
+   * @param item Either a CSSStyleRule or a DOM element.
+   * @param actor a StyleRuleActor
+   */
+  updateStyleRef(oldItem, item, actor) {
+    this.refMap.delete(oldItem);
+    this.refMap.set(item, actor);
+  }
+
+  /**
+   * Get the StyleRuleActor matching the given rule id or null if no match is found.
+   *
+   * @param  {String} ruleId
+   *         Actor ID of the StyleRuleActor
+   * @return {StyleRuleActor|null}
+   */
+  getRule(ruleId) {
+    let match = null;
+
+    for (const actor of this.refMap.values()) {
+      if (actor.actorID === ruleId) {
+        match = actor;
+        continue;
+      }
+    }
+
+    return match;
+  }
+
+  /**
+   * Get the computed style for a node.
+   *
+   * @param NodeActor node
+   * @param object options
+   *   `filter`: A string filter that affects the "matched" handling.
+   *     'user': Include properties from user style sheets.
+   *     'ua': Include properties from user and user-agent sheets.
+   *     Default value is 'ua'
+   *   `markMatched`: true if you want the 'matched' property to be added
+   *     when a computed property has been modified by a style included
+   *     by `filter`.
+   *   `onlyMatched`: true if unmatched properties shouldn't be included.
+   *   `filterProperties`: An array of properties names that you would like
+   *     returned.
+   *
+   * @returns a JSON blob with the following form:
+   *   {
+   *     "property-name": {
+   *       value: "property-value",
+   *       priority: "!important" <optional>
+   *       matched: <true if there are matched selectors for this value>
+   *     },
+   *     ...
+   *   }
+   */
+  getComputed(node, options) {
+    const ret = Object.create(null);
+
+    this.cssLogic.sourceFilter = options.filter || SharedCssLogic.FILTER.UA;
+    this.cssLogic.highlight(node.rawNode);
+    const computed = this.cssLogic.computedStyle || [];
+
+    Array.prototype.forEach.call(computed, name => {
+      if (
+        Array.isArray(options.filterProperties) &&
+        !options.filterProperties.includes(name)
+      ) {
+        return;
+      }
+      ret[name] = {
+        value: computed.getPropertyValue(name),
+        priority: computed.getPropertyPriority(name) || undefined,
+      };
+    });
+
+    if (options.markMatched || options.onlyMatched) {
+      const matched = this.cssLogic.hasMatchedSelectors(Object.keys(ret));
+      for (const key in ret) {
+        if (matched[key]) {
+          ret[key].matched = options.markMatched ? true : undefined;
+        } else if (options.onlyMatched) {
+          delete ret[key];
+        }
+      }
+    }
+
+    return ret;
+  }
+
+  /**
+   * Get all the fonts from a page.
+   *
+   * @param object options
+   *   `includePreviews`: Whether to also return image previews of the fonts.
+   *   `previewText`: The text to display in the previews.
+   *   `previewFontSize`: The font size of the text in the previews.
+   *
+   * @returns object
+   *   object with 'fontFaces', a list of fonts that apply to this node.
+   */
+  getAllUsedFontFaces(options) {
+    const windows = this.inspector.targetActor.windows;
+    let fontsList = [];
+    for (const win of windows) {
+      // Fall back to the documentElement for XUL documents.
+      const node = win.document.body
+        ? win.document.body
+        : win.document.documentElement;
+      fontsList = [...fontsList, ...this.getUsedFontFaces(node, options)];
+    }
+
+    return fontsList;
+  }
+
+  /**
+   * Get the font faces used in an element.
+   *
+   * @param NodeActor node / actual DOM node
+   *    The node to get fonts from.
+   * @param object options
+   *   `includePreviews`: Whether to also return image previews of the fonts.
+   *   `previewText`: The text to display in the previews.
+   *   `previewFontSize`: The font size of the text in the previews.
+   *
+   * @returns object
+   *   object with 'fontFaces', a list of fonts that apply to this node.
+   */
+  getUsedFontFaces(node, options) {
+    // node.rawNode is defined for NodeActor objects
+    const actualNode = node.rawNode || node;
+    const contentDocument = actualNode.ownerDocument;
+    // We don't get fonts for a node, but for a range
+    const rng = contentDocument.createRange();
+    const isPseudoElement = Boolean(
+      CssLogic.getBindingElementAndPseudo(actualNode).pseudo
+    );
+    if (isPseudoElement) {
+      rng.selectNodeContents(actualNode);
+    } else {
+      rng.selectNode(actualNode);
+    }
+    const fonts = InspectorUtils.getUsedFontFaces(rng);
+    const fontsArray = [];
+
+    for (let i = 0; i < fonts.length; i++) {
+      const font = fonts[i];
+      const fontFace = {
+        name: font.name,
+        CSSFamilyName: font.CSSFamilyName,
+        CSSGeneric: font.CSSGeneric || null,
+        srcIndex: font.srcIndex,
+        URI: font.URI,
+        format: font.format,
+        localName: font.localName,
+        metadata: font.metadata,
+      };
+
+      // If this font comes from a @font-face rule
+      if (font.rule) {
+        const styleActor = new StyleRuleActor(this, font.rule);
+        this.manage(styleActor);
+        fontFace.rule = styleActor;
+        fontFace.ruleText = font.rule.cssText;
+      }
+
+      // Get the weight and style of this font for the preview and sort order
+      let weight = NORMAL_FONT_WEIGHT,
+        style = "";
+      if (font.rule) {
+        weight =
+          font.rule.style.getPropertyValue("font-weight") || NORMAL_FONT_WEIGHT;
+        if (weight == "bold") {
+          weight = BOLD_FONT_WEIGHT;
+        } else if (weight == "normal") {
+          weight = NORMAL_FONT_WEIGHT;
+        }
+        style = font.rule.style.getPropertyValue("font-style") || "";
+      }
+      fontFace.weight = weight;
+      fontFace.style = style;
+
+      if (options.includePreviews) {
+        const opts = {
+          previewText: options.previewText,
+          previewFontSize: options.previewFontSize,
+          fontStyle: weight + " " + style,
+          fillStyle: options.previewFillStyle,
+        };
+        const { dataURL, size } = getFontPreviewData(
+          font.CSSFamilyName,
+          contentDocument,
+          opts
+        );
+        fontFace.preview = {
+          data: new LongStringActor(this.conn, dataURL),
+          size,
+        };
+      }
+
+      if (options.includeVariations && FONT_VARIATIONS_ENABLED) {
+        fontFace.variationAxes = font.getVariationAxes();
+        fontFace.variationInstances = font.getVariationInstances();
+      }
+
+      fontsArray.push(fontFace);
+    }
+
+    // @font-face fonts at the top, then alphabetically, then by weight
+    fontsArray.sort(function (a, b) {
+      return a.weight > b.weight ? 1 : -1;
+    });
+    fontsArray.sort(function (a, b) {
+      if (a.CSSFamilyName == b.CSSFamilyName) {
+        return 0;
+      }
+      return a.CSSFamilyName > b.CSSFamilyName ? 1 : -1;
+    });
+    fontsArray.sort(function (a, b) {
+      if ((a.rule && b.rule) || (!a.rule && !b.rule)) {
+        return 0;
+      }
+      return !a.rule && b.rule ? 1 : -1;
+    });
+
+    return fontsArray;
+  }
+
+  /**
+   * Get a list of selectors that match a given property for a node.
+   *
+   * @param NodeActor node
+   * @param string property
+   * @param object options
+   *   `filter`: A string filter that affects the "matched" handling.
+   *     'user': Include properties from user style sheets.
+   *     'ua': Include properties from user and user-agent sheets.
+   *     Default value is 'ua'
+   *
+   * @returns a JSON object with the following form:
+   *   {
+   *     // An ordered list of rules that apply
+   *     matched: [{
+   *       rule: <rule actorid>,
+   *       sourceText: <string>, // The source of the selector, relative
+   *                             // to the node in question.
+   *       selector: <string>, // the selector ID that matched
+   *       value: <string>, // the value of the property
+   *       status: <int>,
+   *         // The status of the match - high numbers are better placed
+   *         // to provide styling information:
+   *         // 3: Best match, was used.
+   *         // 2: Matched, but was overridden.
+   *         // 1: Rule from a parent matched.
+   *         // 0: Unmatched (never returned in this API)
+   *     }, ...],
+   *
+   *     // The full form of any domrule referenced.
+   *     rules: [ <domrule>, ... ], // The full form of any domrule referenced
+   *
+   *     // The full form of any sheets referenced.
+   *     sheets: [ <domsheet>, ... ]
+   *  }
+   */
+  getMatchedSelectors(node, property, options) {
+    this.cssLogic.sourceFilter = options.filter || SharedCssLogic.FILTER.UA;
+    this.cssLogic.highlight(node.rawNode);
+
+    const rules = new Set();
+
+    const matched = [];
+    const propInfo = this.cssLogic.getPropertyInfo(property);
+    for (const selectorInfo of propInfo.matchedSelectors) {
+      const cssRule = selectorInfo.selector.cssRule;
+      const domRule = cssRule.sourceElement || cssRule.domRule;
+
+      const rule = this._styleRef(domRule);
+      rules.add(rule);
+
+      matched.push({
+        rule,
+        sourceText: this.getSelectorSource(selectorInfo, node.rawNode),
+        selector: selectorInfo.selector.text,
+        name: selectorInfo.property,
+        value: selectorInfo.value,
+        status: selectorInfo.status,
+      });
+    }
+
+    this._expandRules(rules);
+
+    return {
+      matched,
+      rules: [...rules],
+    };
+  }
+
+  // Get a selector source for a CssSelectorInfo relative to a given
+  // node.
+  getSelectorSource(selectorInfo, relativeTo) {
+    let result = selectorInfo.selector.text;
+    if (selectorInfo.inlineStyle) {
+      const source = selectorInfo.sourceElement;
+      if (source === relativeTo) {
+        result = "this";
+      } else {
+        result = CssLogic.getShortName(source);
+      }
+      result += ".style";
+    }
+    return result;
+  }
+
+  /**
+   * Get the set of styles that apply to a given node.
+   * @param NodeActor node
+   * @param object options
+   *   `filter`: A string filter that affects the "matched" handling.
+   *     'user': Include properties from user style sheets.
+   *     'ua': Include properties from user and user-agent sheets.
+   *     Default value is 'ua'
+   *   `inherited`: Include styles inherited from parent nodes.
+   *   `matchedSelectors`: Include an array of specific selectors that
+   *     caused this rule to match its node.
+   *   `skipPseudo`: Exclude styles applied to pseudo elements of the provided node.
+   */
+  async getApplied(node, options) {
+    // Clear any previous references to StyleRuleActor instances for CSS rules.
+    // Assume the consumer has switched context to a new node and no longer
+    // interested in state changes of previous rules.
+    this._observedRules = [];
+    this.selectedElement = node.rawNode;
+
+    if (!node) {
+      return { entries: [], rules: [], sheets: [] };
+    }
+
+    this.cssLogic.highlight(node.rawNode);
+    let entries = [];
+    entries = entries.concat(
+      this._getAllElementRules(node, undefined, options)
+    );
+
+    const result = this.getAppliedProps(node, entries, options);
+    for (const rule of result.rules) {
+      try {
+        // See the comment in |StyleRuleActor.form| to understand this.
+        // This can throw if the authored rule text is not found (so e.g., with
+        // CSSOM or constructable stylesheets).
+        await rule.getAuthoredCssText();
+      } catch (ex) {}
+    }
+
+    // Reference to instances of StyleRuleActor for CSS rules matching the node.
+    // Assume these are used by a consumer which wants to be notified when their
+    // state or declarations change either directly or indirectly.
+    this._observedRules = result.rules;
+
+    return result;
+  }
+
+  _hasInheritedProps(style) {
+    return Array.prototype.some.call(style, prop => {
+      return InspectorUtils.isInheritedProperty(prop);
+    });
+  }
+
+  async isPositionEditable(node) {
+    if (!node || node.rawNode.nodeType !== node.rawNode.ELEMENT_NODE) {
+      return false;
+    }
+
+    const props = getDefinedGeometryProperties(node.rawNode);
+
+    // Elements with only `width` and `height` are currently not considered
+    // editable.
+    return (
+      props.has("top") ||
+      props.has("right") ||
+      props.has("left") ||
+      props.has("bottom")
+    );
+  }
+
+  /**
+   * Helper function for getApplied, gets all the rules from a given
+   * element. See getApplied for documentation on parameters.
+   * @param NodeActor node
+   * @param bool inherited
+   * @param object options
+
+   * @return Array The rules for a given element. Each item in the
+   *               array has the following signature:
+   *                - rule RuleActor
+   *                - isSystem Boolean
+   *                - inherited Boolean
+   *                - pseudoElement String
+   */
+  _getAllElementRules(node, inherited, options) {
+    const { bindingElement, pseudo } = CssLogic.getBindingElementAndPseudo(
+      node.rawNode
+    );
+    const rules = [];
+
+    if (!bindingElement || !bindingElement.style) {
+      return rules;
+    }
+
+    const elementStyle = this._styleRef(bindingElement);
+    const showElementStyles = !inherited && !pseudo;
+    const showInheritedStyles =
+      inherited && this._hasInheritedProps(bindingElement.style);
+
+    const rule = {
+      rule: elementStyle,
+      pseudoElement: null,
+      isSystem: false,
+      inherited: false,
+    };
+
+    // First any inline styles
+    if (showElementStyles) {
+      rules.push(rule);
+    }
+
+    // Now any inherited styles
+    if (showInheritedStyles) {
+      rule.inherited = inherited;
+      rules.push(rule);
+    }
+
+    // Add normal rules.  Typically this is passing in the node passed into the
+    // function, unless if that node was ::before/::after.  In which case,
+    // it will pass in the parentNode along with "::before"/"::after".
+    this._getElementRules(bindingElement, pseudo, inherited, options).forEach(
+      oneRule => {
+        // The only case when there would be a pseudo here is
+        // ::before/::after, and in this case we want to tell the
+        // view that it belongs to the element (which is a
+        // _moz_generated_content native anonymous element).
+        oneRule.pseudoElement = null;
+        rules.push(oneRule);
+      }
+    );
+
+    // Now any pseudos.
+    if (showElementStyles && !options.skipPseudo) {
+      for (const readPseudo of PSEUDO_ELEMENTS) {
+        if (this._pseudoIsRelevant(bindingElement, readPseudo)) {
+          this._getElementRules(
+            bindingElement,
+            readPseudo,
+            inherited,
+            options
+          ).forEach(oneRule => {
+            rules.push(oneRule);
+          });
+        }
+      }
+    }
+
+    return rules;
+  }
+
+  _nodeIsTextfieldLike(node) {
+    if (node.nodeName == "TEXTAREA") {
+      return true;
+    }
+    return (
+      node.mozIsTextField &&
+      (node.mozIsTextField(false) || node.type == "number")
+    );
+  }
+
+  _nodeIsButtonLike(node) {
+    if (node.nodeName == "BUTTON") {
+      return true;
+    }
+    return (
+      node.nodeName == "INPUT" &&
+      ["submit", "color", "button"].includes(node.type)
+    );
+  }
+
+  _nodeIsListItem(node) {
+    const display = CssLogic.getComputedStyle(node).getPropertyValue("display");
+    // This is written this way to handle `inline list-item` and such.
+    return display.split(" ").includes("list-item");
+  }
+
+  // eslint-disable-next-line complexity
+  _pseudoIsRelevant(node, pseudo) {
+    switch (pseudo) {
+      case "::after":
+      case "::before":
+      case "::first-letter":
+      case "::first-line":
+      case "::selection":
+        return true;
+      case "::marker":
+        return this._nodeIsListItem(node);
+      case "::backdrop":
+        return node.matches(":modal");
+      case "::cue":
+        return node.nodeName == "VIDEO";
+      case "::file-selector-button":
+        return node.nodeName == "INPUT" && node.type == "file";
+      case "::placeholder":
+      case "::-moz-placeholder":
+        return this._nodeIsTextfieldLike(node);
+      case "::-moz-focus-inner":
+        return this._nodeIsButtonLike(node);
+      case "::-moz-meter-bar":
+        return node.nodeName == "METER";
+      case "::-moz-progress-bar":
+        return node.nodeName == "PROGRESS";
+      case "::-moz-color-swatch":
+        return node.nodeName == "INPUT" && node.type == "color";
+      case "::-moz-range-progress":
+      case "::-moz-range-thumb":
+      case "::-moz-range-track":
+        return node.nodeName == "INPUT" && node.type == "range";
+      default:
+        throw Error("Unhandled pseudo-element " + pseudo);
+    }
+  }
+
+  /**
+   * Helper function for _getAllElementRules, returns the rules from a given
+   * element. See getApplied for documentation on parameters.
+   * @param DOMNode node
+   * @param string pseudo
+   * @param DOMNode inherited
+   * @param object options
+   *
+   * @returns Array
+   */
+  _getElementRules(node, pseudo, inherited, options) {
+    const domRules = InspectorUtils.getCSSStyleRules(
+      node,
+      pseudo,
+      CssLogic.hasVisitedState(node)
+    );
+
+    if (!domRules) {
+      return [];
+    }
+
+    const rules = [];
+
+    // getCSSStyleRules returns ordered from least-specific to
+    // most-specific.
+    for (let i = domRules.length - 1; i >= 0; i--) {
+      const domRule = domRules[i];
+
+      const isSystem = SharedCssLogic.isAgentStylesheet(
+        domRule.parentStyleSheet
+      );
+
+      if (isSystem && options.filter != SharedCssLogic.FILTER.UA) {
+        continue;
+      }
+
+      if (inherited) {
+        // Don't include inherited rules if none of its properties
+        // are inheritable.
+        const hasInherited = [...domRule.style].some(prop =>
+          InspectorUtils.isInheritedProperty(prop)
+        );
+        if (!hasInherited) {
+          continue;
+        }
+      }
+
+      const ruleActor = this._styleRef(domRule);
+
+      rules.push({
+        rule: ruleActor,
+        inherited,
+        isSystem,
+        pseudoElement: pseudo,
+      });
+    }
+    return rules;
+  }
+
+  /**
+   * Given a node and a CSS rule, walk up the DOM looking for a
+   * matching element rule.  Return an array of all found entries, in
+   * the form generated by _getAllElementRules.  Note that this will
+   * always return an array of either zero or one element.
+   *
+   * @param {NodeActor} node the node
+   * @param {CSSStyleRule} filterRule the rule to filter for
+   * @return {Array} array of zero or one elements; if one, the element
+   *                 is the entry as returned by _getAllElementRules.
+   */
+  findEntryMatchingRule(node, filterRule) {
+    const options = { matchedSelectors: true, inherited: true };
+    let entries = [];
+    let parent = this.walker.parentNode(node);
+    while (parent && parent.rawNode.nodeType != Node.DOCUMENT_NODE) {
+      entries = entries.concat(
+        this._getAllElementRules(parent, parent, options)
+      );
+      parent = this.walker.parentNode(parent);
+    }
+
+    return entries.filter(entry => entry.rule.rawRule === filterRule);
+  }
+
+  /**
+   * Helper function for getApplied that fetches a set of style properties that
+   * apply to the given node and associated rules
+   * @param NodeActor node
+   * @param object options
+   *   `filter`: A string filter that affects the "matched" handling.
+   *     'user': Include properties from user style sheets.
+   *     'ua': Include properties from user and user-agent sheets.
+   *     Default value is 'ua'
+   *   `inherited`: Include styles inherited from parent nodes.
+   *   `matchedSelectors`: Include an array of specific selectors that
+   *     caused this rule to match its node.
+   *   `skipPseudo`: Exclude styles applied to pseudo elements of the provided node.
+   * @param array entries
+   *   List of appliedstyle objects that lists the rules that apply to the
+   *   node. If adding a new rule to the stylesheet, only the new rule entry
+   *   is provided and only the style properties that apply to the new
+   *   rule is fetched.
+   * @returns Object containing the list of rule entries, rule actors and
+   *   stylesheet actors that applies to the given node and its associated
+   *   rules.
+   */
+  getAppliedProps(node, entries, options) {
+    if (options.inherited) {
+      let parent = this.walker.parentNode(node);
+      while (parent && parent.rawNode.nodeType != Node.DOCUMENT_NODE) {
+        entries = entries.concat(
+          this._getAllElementRules(parent, parent, options)
+        );
+        parent = this.walker.parentNode(parent);
+      }
+    }
+
+    if (options.matchedSelectors) {
+      for (const entry of entries) {
+        if (entry.rule.type === ELEMENT_STYLE) {
+          continue;
+        }
+
+        const domRule = entry.rule.rawRule;
+        const selectors = CssLogic.getSelectors(domRule);
+        const element = entry.inherited
+          ? entry.inherited.rawNode
+          : node.rawNode;
+
+        const { bindingElement, pseudo } =
+          CssLogic.getBindingElementAndPseudo(element);
+        const relevantLinkVisited = CssLogic.hasVisitedState(bindingElement);
+        entry.matchedSelectors = [];
+
+        for (let i = 0; i < selectors.length; i++) {
+          if (
+            InspectorUtils.selectorMatchesElement(
+              bindingElement,
+              domRule,
+              i,
+              pseudo,
+              relevantLinkVisited
+            )
+          ) {
+            entry.matchedSelectors.push(selectors[i]);
+          }
+        }
+      }
+    }
+
+    // Add all the keyframes rule associated with the element
+    const computedStyle = this.cssLogic.computedStyle;
+    if (computedStyle) {
+      let animationNames = computedStyle.animationName.split(",");
+      animationNames = animationNames.map(name => name.trim());
+
+      if (animationNames) {
+        // Traverse through all the available keyframes rule and add
+        // the keyframes rule that matches the computed animation name
+        for (const keyframesRule of this.cssLogic.keyframesRules) {
+          if (animationNames.indexOf(keyframesRule.name) > -1) {
+            for (const rule of keyframesRule.cssRules) {
+              entries.push({
+                rule: this._styleRef(rule),
+                keyframes: this._styleRef(keyframesRule),
+              });
+            }
+          }
+        }
+      }
+    }
+
+    const rules = new Set();
+    entries.forEach(entry => rules.add(entry.rule));
+    this._expandRules(rules);
+
+    return {
+      entries,
+      rules: [...rules],
+    };
+  }
+
+  /**
+   * Expand a set of rules to include all parent rules.
+   */
+  _expandRules(ruleSet) {
+    // Sets include new items in their iteration
+    for (const rule of ruleSet) {
+      if (rule.rawRule.parentRule) {
+        const parent = this._styleRef(rule.rawRule.parentRule);
+        if (!ruleSet.has(parent)) {
+          ruleSet.add(parent);
+        }
+      }
+    }
+  }
+
+  /**
+   * Get layout-related information about a node.
+   * This method returns an object with properties giving information about
+   * the node's margin, border, padding and content region sizes, as well
+   * as information about the type of box, its position, z-index, etc...
+   * @param {NodeActor} node
+   * @param {Object} options The only available option is autoMargins.
+   * If set to true, the element's margins will receive an extra check to see
+   * whether they are set to "auto" (knowing that the computed-style in this
+   * case would return "0px").
+   * The returned object will contain an extra property (autoMargins) listing
+   * all margins that are set to auto, e.g. {top: "auto", left: "auto"}.
+   * @return {Object}
+   */
+  getLayout(node, options) {
+    this.cssLogic.highlight(node.rawNode);
+
+    const layout = {};
+
+    // First, we update the first part of the box model view, with
+    // the size of the element.
+
+    const clientRect = node.rawNode.getBoundingClientRect();
+    layout.width = parseFloat(clientRect.width.toPrecision(6));
+    layout.height = parseFloat(clientRect.height.toPrecision(6));
+
+    // We compute and update the values of margins & co.
+    const style = CssLogic.getComputedStyle(node.rawNode);
+    for (const prop of [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "border-top-width",
+      "border-right-width",
+      "border-bottom-width",
+      "border-left-width",
+      "z-index",
+      "box-sizing",
+      "display",
+      "float",
+      "line-height",
+    ]) {
+      layout[prop] = style.getPropertyValue(prop);
+    }
+
+    if (options.autoMargins) {
+      layout.autoMargins = this.processMargins(this.cssLogic);
+    }
+
+    for (const i in this.map) {
+      const property = this.map[i].property;
+      this.map[i].value = parseFloat(style.getPropertyValue(property));
+    }
+
+    return layout;
+  }
+
+  /**
+   * Find 'auto' margin properties.
+   */
+  processMargins(cssLogic) {
+    const margins = {};
+
+    for (const prop of ["top", "bottom", "left", "right"]) {
+      const info = cssLogic.getPropertyInfo("margin-" + prop);
+      const selectors = info.matchedSelectors;
+      if (selectors && !!selectors.length && selectors[0].value == "auto") {
+        margins[prop] = "auto";
+      }
+    }
+
+    return margins;
+  }
+
+  /**
+   * On page navigation, tidy up remaining objects.
+   */
+  onFrameUnload() {
+    this.styleElements = new WeakMap();
+  }
+
+  _onStylesheetUpdated({ resourceId, updateKind, updates = {} }) {
+    if (updateKind != "style-applied") {
+      return;
+    }
+    const kind = updates.event.kind;
+    // Duplicate refMap content before looping as onStyleApplied may mutate it
+    for (const styleActor of [...this.refMap.values()]) {
+      // Ignore StyleRuleActor that don't have a parent stylesheet.
+      // i.e. actor whose type is ELEMENT_STYLE.
+      if (!styleActor._parentSheet) {
+        continue;
+      }
+      const resId = this.styleSheetsManager.getStyleSheetResourceId(
+        styleActor._parentSheet
+      );
+      if (resId === resourceId) {
+        styleActor.onStyleApplied(kind);
+      }
+    }
+    this._styleApplied(kind);
+  }
+
+  /**
+   * Helper function for adding a new rule and getting its applied style
+   * properties
+   * @param NodeActor node
+   * @param CSSStyleRule rule
+   * @returns Object containing its applied style properties
+   */
+  getNewAppliedProps(node, rule) {
+    const ruleActor = this._styleRef(rule);
+    return this.getAppliedProps(node, [{ rule: ruleActor }], {
+      matchedSelectors: true,
+    });
+  }
+
+  /**
+   * Adds a new rule, and returns the new StyleRuleActor.
+   * @param {NodeActor} node
+   * @param {String} pseudoClasses The list of pseudo classes to append to the
+   *        new selector.
+   * @returns {StyleRuleActor} the new rule
+   */
+  async addNewRule(node, pseudoClasses) {
+    let sheet = null;
+    const doc = node.rawNode.ownerDocument;
+    if (
+      this.styleElements.has(doc) &&
+      this.styleElements.get(doc).ownerNode?.isConnected
+    ) {
+      sheet = this.styleElements.get(doc);
+    } else {
+      sheet = await this.styleSheetsManager.addStyleSheet(doc);
+      this.styleElements.set(doc, sheet);
+    }
+
+    const cssRules = sheet.cssRules;
+    const rawNode = node.rawNode;
+    const classes = [...rawNode.classList];
+
+    let selector;
+    if (rawNode.id) {
+      selector = "#" + CSS.escape(rawNode.id);
+    } else if (classes.length) {
+      selector = "." + classes.map(c => CSS.escape(c)).join(".");
+    } else {
+      selector = rawNode.localName;
+    }
+
+    if (pseudoClasses && pseudoClasses.length) {
+      selector += pseudoClasses.join("");
+    }
+
+    const index = sheet.insertRule(selector + " {}", cssRules.length);
+
+    const resourceId = this.styleSheetsManager.getStyleSheetResourceId(sheet);
+    let authoredText = await this.styleSheetsManager.getText(resourceId);
+    authoredText += "\n" + selector + " {\n" + "}";
+    await this.styleSheetsManager.setStyleSheetText(resourceId, authoredText);
+
+    const cssRule = sheet.cssRules.item(index);
+    const ruleActor = this._styleRef(cssRule);
+
+    TrackChangeEmitter.trackChange({
+      ...ruleActor.metadata,
+      type: "rule-add",
+      add: null,
+      remove: null,
+      selector,
+    });
+
+    return this.getNewAppliedProps(node, cssRule);
+  }
+
+  /**
+   * Cause all StyleRuleActor instances of observed CSS rules to check whether the
+   * states of their declarations have changed.
+   *
+   * Observed rules are the latest rules returned by a call to PageStyleActor.getApplied()
+   *
+   * This is necessary because changes in one rule can cause the declarations in another
+   * to not be applicable (inactive CSS). The observers of those rules should be notified.
+   * Rules will fire a "rule-updated" event if any of their declarations changed state.
+   *
+   * Call this method whenever a CSS rule is mutated:
+   * - a CSS declaration is added/changed/disabled/removed
+   * - a selector is added/changed/removed
+   */
+  refreshObservedRules() {
+    for (const rule of this._observedRules) {
+      rule.refresh();
+    }
+  }
+
+  /**
+   * Get an array of existing attribute values in a node document.
+   *
+   * @param {String} search: A string to filter attribute value on.
+   * @param {String} attributeType: The type of attribute we want to retrieve the values.
+   * @param {Element} node: The element we want to get possible attributes for. This will
+   *        be used to get the document where the search is happening.
+   * @returns {Array<String>} An array of strings
+   */
+  getAttributesInOwnerDocument(search, attributeType, node) {
+    if (!search) {
+      throw new Error("search is mandatory");
+    }
+
+    // In a non-fission world, a node from an iframe shares the same `rootNode` as a node
+    // in the top-level document. So here we need to retrieve the document from the node
+    // in parameter in order to retrieve the right document.
+    // This may change once we have a dedicated walker for every target in a tab, as we'll
+    // be able to directly talk to the "right" walker actor.
+    const targetDocument = node.rawNode.ownerDocument;
+
+    // We store the result in a Set which will contain the attribute value
+    const result = new Set();
+    const lcSearch = search.toLowerCase();
+    this._collectAttributesFromDocumentDOM(
+      result,
+      lcSearch,
+      attributeType,
+      targetDocument,
+      node.rawNode
+    );
+    this._collectAttributesFromDocumentStyleSheets(
+      result,
+      lcSearch,
+      attributeType,
+      targetDocument
+    );
+
+    return Array.from(result).sort();
+  }
+
+  /**
+   * Collect attribute values from the document DOM tree, matching the passed filter and
+   * type, to the result Set.
+   *
+   * @param {Set<String>} result: A Set to which the results will be added.
+   * @param {String} search: A string to filter attribute value on.
+   * @param {String} attributeType: The type of attribute we want to retrieve the values.
+   * @param {Document} targetDocument: The document the search occurs in.
+   * @param {Node} currentNode: The current element rawNode
+   */
+  _collectAttributesFromDocumentDOM(
+    result,
+    search,
+    attributeType,
+    targetDocument,
+    nodeRawNode
+  ) {
+    // In order to retrieve attributes from DOM elements in the document, we're going to
+    // do a query on the root node using attributes selector, to directly get the elements
+    // matching the attributes we're looking for.
+
+    // For classes, we need something a bit different as the className we're looking
+    // for might not be the first in the attribute value, meaning we can't use the
+    // "attribute starts with X" selector.
+    const attributeSelectorPositionChar = attributeType === "class" ? "*" : "^";
+    const selector = `[${attributeType}${attributeSelectorPositionChar}=${search} i]`;
+
+    const matchingElements = targetDocument.querySelectorAll(selector);
+
+    for (const element of matchingElements) {
+      if (element === nodeRawNode) {
+        return;
+      }
+      // For class attribute, we need to add the elements of the classList that match
+      // the filter string.
+      if (attributeType === "class") {
+        for (const cls of element.classList) {
+          if (!result.has(cls) && cls.toLowerCase().startsWith(search)) {
+            result.add(cls);
+          }
+        }
+      } else {
+        const { value } = element.attributes[attributeType];
+        // For other attributes, we can directly use the attribute value.
+        result.add(value);
+      }
+    }
+  }
+
+  /**
+   * Collect attribute values from the document stylesheets, matching the passed filter
+   * and type, to the result Set.
+   *
+   * @param {Set<String>} result: A Set to which the results will be added.
+   * @param {String} search: A string to filter attribute value on.
+   * @param {String} attributeType: The type of attribute we want to retrieve the values.
+   *                       It only supports "class" and "id" at the moment.
+   * @param {Document} targetDocument: The document the search occurs in.
+   */
+  _collectAttributesFromDocumentStyleSheets(
+    result,
+    search,
+    attributeType,
+    targetDocument
+  ) {
+    if (attributeType !== "class" && attributeType !== "id") {
+      return;
+    }
+
+    // We loop through all the stylesheets and their rules, and then use the lexer to only
+    // get the attributes we're looking for.
+    for (const styleSheet of targetDocument.styleSheets) {
+      for (const rule of styleSheet.rules) {
+        this._collectAttributesFromRule(result, rule, search, attributeType);
+      }
+    }
+  }
+
+  /**
+   * Collect attribute values from the rule, matching the passed filter and type, to the
+   * result Set.
+   *
+   * @param {Set<String>} result: A Set to which the results will be added.
+   * @param {Rule} rule: The rule the search occurs in.
+   * @param {String} search: A string to filter attribute value on.
+   * @param {String} attributeType: The type of attribute we want to retrieve the values.
+   *                       It only supports "class" and "id" at the moment.
+   */
+  _collectAttributesFromRule(result, rule, search, attributeType) {
+    const shouldRetrieveClasses = attributeType === "class";
+    const shouldRetrieveIds = attributeType === "id";
+
+    const { selectorText } = rule;
+    // If there's no selectorText, or if the selectorText does not include the
+    // filter, we can bail out.
+    if (!selectorText || !selectorText.toLowerCase().includes(search)) {
+      return;
+    }
+
+    // Check if we should parse the selectorText (do we need to check for class/id and
+    // if so, does the selector contains class/id related chars).
+    const parseForClasses =
+      shouldRetrieveClasses &&
+      selectorText.toLowerCase().includes(`.${search}`);
+    const parseForIds =
+      shouldRetrieveIds && selectorText.toLowerCase().includes(`#${search}`);
+
+    if (!parseForClasses && !parseForIds) {
+      return;
+    }
+
+    const lexer = getCSSLexer(selectorText);
+    let token;
+    while ((token = lexer.nextToken())) {
+      if (
+        token.tokenType === "symbol" &&
+        ((shouldRetrieveClasses && token.text === ".") ||
+          (shouldRetrieveIds && token.text === "#"))
+      ) {
+        token = lexer.nextToken();
+        if (
+          token.tokenType === "ident" &&
+          token.text.toLowerCase().startsWith(search)
+        ) {
+          result.add(token.text);
+        }
+      }
+    }
+  }
+}
+exports.PageStyleActor = PageStyleActor;