The Tor Browser: comparison toolkit/devtools/server/actors/styles.js

comparison: toolkit/devtools/server/actors/styles.js

toolkit/devtools/server/actors/styles.js

branch: TOR_BUG_3246
changeset 7: 129ffea94266

equal deleted inserted replaced

--1:000000000000
+:7cc8d2ac3a4f
+/* 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 {Cc, Ci, Cu} = require("chrome");
+const Services = require("Services");
+const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
+const protocol = require("devtools/server/protocol");
+const {Arg, Option, method, RetVal, types} = protocol;
+const events = require("sdk/event/core");
+const object = require("sdk/util/object");
+const { Class } = require("sdk/core/heritage");
+const { StyleSheetActor } = require("devtools/server/actors/stylesheets");
+loader.lazyGetter(this, "CssLogic", () => require("devtools/styleinspector/css-logic").CssLogic);
+loader.lazyGetter(this, "DOMUtils", () => Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils));
+// The PageStyle actor flattens the DOM CSS objects a little bit, merging
+// Rules and their Styles into one actor.  For elements (which have a style
+// but no associated rule) we fake a rule with the following style id.
+const ELEMENT_STYLE = 100;
+exports.ELEMENT_STYLE = ELEMENT_STYLE;
+const PSEUDO_ELEMENTS = [":first-line", ":first-letter", ":before", ":after", ":-moz-selection"];
+exports.PSEUDO_ELEMENTS = PSEUDO_ELEMENTS;
+// Predeclare the domnode actor type for use in requests.
+types.addActorType("domnode");
+/**
+* DOM Nodes returned by the style actor will be owned by the DOM walker
+* for the connection.
+*/
+types.addLifetime("walker", "walker");
+/**
+* When asking for the styles applied to a node, we return a list of
+* appliedstyle json objects that lists the rules that apply to the node
+* and which element they were inherited from (if any).
+*/
+types.addDictType("appliedstyle", {
+rule: "domstylerule#actorid",
+inherited: "nullable:domnode#actorid"
+});
+types.addDictType("matchedselector", {
+rule: "domstylerule#actorid",
+selector: "string",
+value: "string",
+status: "number"
+});
+/**
+* The PageStyle actor lets the client look at the styles on a page, as
+* they are applied to a given node.
+*/
+var PageStyleActor = protocol.ActorClass({
+typeName: "pagestyle",
+/**
+* Create a PageStyleActor.
+*
+* @param inspector
+*    The InspectorActor that owns this PageStyleActor.
+*
+* @constructor
+*/
+initialize: function(inspector) {
+protocol.Actor.prototype.initialize.call(this, null);
+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;
+},
+get conn() this.inspector.conn,
+/**
+* Return or create a StyleRuleActor for the given item.
+* @param item Either a CSSStyleRule or a DOM element.
+*/
+_styleRef: function(item) {
+if (this.refMap.has(item)) {
+return this.refMap.get(item);
+}
+let actor = StyleRuleActor(this, item);
+this.manage(actor);
+this.refMap.set(item, actor);
+return actor;
+},
+/**
+* Return or create a StyleSheetActor for the given
+* nsIDOMCSSStyleSheet
+*/
+_sheetRef: function(sheet) {
+if (this.refMap.has(sheet)) {
+return this.refMap.get(sheet);
+}
+let actor = new StyleSheetActor(sheet, this, this.walker.rootWin);
+this.manage(actor);
+this.refMap.set(sheet, actor);
+return actor;
+},
+/**
+* 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.
+*
+* @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: method(function(node, options) {
+let ret = Object.create(null);
+this.cssLogic.sourceFilter = options.filter || CssLogic.FILTER.UA;
+this.cssLogic.highlight(node.rawNode);
+let computed = this.cssLogic._computedStyle || [];
+Array.prototype.forEach.call(computed, name => {
+let matched = undefined;
+ret[name] = {
+value: computed.getPropertyValue(name),
+priority: computed.getPropertyPriority(name) || undefined
+};
+});
+if (options.markMatched || options.onlyMatched) {
+let matched = this.cssLogic.hasMatchedSelectors(Object.keys(ret));
+for (let key in ret) {
+if (matched[key]) {
+ret[key].matched = options.markMatched ? true : undefined
+} else if (options.onlyMatched) {
+delete ret[key];
+}
+}
+}
+return ret;
+}, {
+request: {
+node: Arg(0, "domnode"),
+markMatched: Option(1, "boolean"),
+onlyMatched: Option(1, "boolean"),
+filter: Option(1, "string"),
+},
+response: {
+computed: RetVal("json")
+}
+}),
+/**
+* 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: method(function(node, property, options) {
+this.cssLogic.sourceFilter = options.filter || CssLogic.FILTER.UA;
+this.cssLogic.highlight(node.rawNode);
+let walker = node.parent();
+let rules = new Set;
+let sheets = new Set;
+let matched = [];
+let propInfo = this.cssLogic.getPropertyInfo(property);
+for (let selectorInfo of propInfo.matchedSelectors) {
+let cssRule = selectorInfo.selector.cssRule;
+let domRule = cssRule.sourceElement || cssRule.domRule;
+let rule = this._styleRef(domRule);
+rules.add(rule);
+matched.push({
+rule: rule,
+sourceText: this.getSelectorSource(selectorInfo, node.rawNode),
+selector: selectorInfo.selector.text,
+name: selectorInfo.property,
+value: selectorInfo.value,
+status: selectorInfo.status
+});
+}
+this.expandSets(rules, sheets);
+return {
+matched: matched,
+rules: [...rules],
+sheets: [...sheets],
+};
+}, {
+request: {
+node: Arg(0, "domnode"),
+property: Arg(1, "string"),
+filter: Option(2, "string")
+},
+response: RetVal(types.addDictType("matchedselectorresponse", {
+rules: "array:domstylerule",
+sheets: "array:stylesheet",
+matched: "array:matchedselector"
+}))
+}),
+// Get a selector source for a CssSelectorInfo relative to a given
+// node.
+getSelectorSource: function(selectorInfo, relativeTo) {
+let result = selectorInfo.selector.text;
+if (selectorInfo.elementStyle) {
+let 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 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'
+*   `inherited`: Include styles inherited from parent nodes.
+*   `matchedSeletors`: Include an array of specific selectors that
+*     caused this rule to match its node.
+*/
+getApplied: method(function(node, options) {
+let entries = [];
+this.addElementRules(node.rawNode, undefined, options, entries);
+if (options.inherited) {
+let parent = this.walker.parentNode(node);
+while (parent && parent.rawNode.nodeType != Ci.nsIDOMNode.DOCUMENT_NODE) {
+this.addElementRules(parent.rawNode, parent, options, entries);
+parent = this.walker.parentNode(parent);
+}
+}
+if (options.matchedSelectors) {
+for (let entry of entries) {
+if (entry.rule.type === ELEMENT_STYLE) {
+continue;
+}
+let domRule = entry.rule.rawRule;
+let selectors = CssLogic.getSelectors(domRule);
+let element = entry.inherited ? entry.inherited.rawNode : node.rawNode;
+entry.matchedSelectors = [];
+for (let i = 0; i < selectors.length; i++) {
+if (DOMUtils.selectorMatchesElement(element, domRule, i)) {
+entry.matchedSelectors.push(selectors[i]);
+}
+}
+}
+}
+let rules = new Set;
+let sheets = new Set;
+entries.forEach(entry => rules.add(entry.rule));
+this.expandSets(rules, sheets);
+return {
+entries: entries,
+rules: [...rules],
+sheets: [...sheets]
+}
+}, {
+request: {
+node: Arg(0, "domnode"),
+inherited: Option(1, "boolean"),
+matchedSelectors: Option(1, "boolean"),
+filter: Option(1, "string")
+},
+response: RetVal(types.addDictType("appliedStylesReturn", {
+entries: "array:appliedstyle",
+rules: "array:domstylerule",
+sheets: "array:stylesheet"
+}))
+}),
+_hasInheritedProps: function(style) {
+return Array.prototype.some.call(style, prop => {
+return DOMUtils.isInheritedProperty(prop);
+});
+},
+/**
+* Helper function for getApplied, adds all the rules from a given
+* element.
+*/
+addElementRules: function(element, inherited, options, rules)
+{
+if (!element.style) {
+return;
+}
+let elementStyle = this._styleRef(element);
+if (!inherited || this._hasInheritedProps(element.style)) {
+rules.push({
+rule: elementStyle,
+inherited: inherited,
+});
+}
+let pseudoElements = inherited ? [null] : [null, ...PSEUDO_ELEMENTS];
+for (let pseudo of pseudoElements) {
+// Get the styles that apply to the element.
+let domRules = DOMUtils.getCSSStyleRules(element, pseudo);
+if (!domRules) {
+continue;
+}
+// getCSSStyleRules returns ordered from least-specific to
+// most-specific.
+for (let i = domRules.Count() - 1; i >= 0; i--) {
+let domRule = domRules.GetElementAt(i);
+let isSystem = !CssLogic.isContentStylesheet(domRule.parentStyleSheet);
+if (isSystem && options.filter != CssLogic.FILTER.UA) {
+continue;
+}
+if (inherited) {
+// Don't include inherited rules if none of its properties
+// are inheritable.
+let hasInherited = Array.prototype.some.call(domRule.style, prop => {
+return DOMUtils.isInheritedProperty(prop);
+});
+if (!hasInherited) {
+continue;
+}
+}
+let ruleActor = this._styleRef(domRule);
+rules.push({
+rule: ruleActor,
+inherited: inherited,
+pseudoElement: pseudo
+});
+}
+}
+},
+/**
+* Expand Sets of rules and sheets to include all parent rules and sheets.
+*/
+expandSets: function(ruleSet, sheetSet) {
+// Sets include new items in their iteration
+for (let rule of ruleSet) {
+if (rule.rawRule.parentRule) {
+let parent = this._styleRef(rule.rawRule.parentRule);
+if (!ruleSet.has(parent)) {
+ruleSet.add(parent);
+}
+}
+if (rule.rawRule.parentStyleSheet) {
+let parent = this._sheetRef(rule.rawRule.parentStyleSheet);
+if (!sheetSet.has(parent)) {
+sheetSet.add(parent);
+}
+}
+}
+for (let sheet of sheetSet) {
+if (sheet.rawSheet.parentStyleSheet) {
+let parent = this._sheetRef(sheet.rawSheet.parentStyleSheet);
+if (!sheetSet.has(parent)) {
+sheetSet.add(parent);
+}
+}
+}
+},
+getLayout: method(function(node, options) {
+this.cssLogic.highlight(node.rawNode);
+let layout = {};
+// First, we update the first part of the layout view, with
+// the size of the element.
+let clientRect = node.rawNode.getBoundingClientRect();
+layout.width = Math.round(clientRect.width);
+layout.height = Math.round(clientRect.height);
+// We compute and update the values of margins & co.
+let style = node.rawNode.ownerDocument.defaultView.getComputedStyle(node.rawNode);
+for (let prop of [
+"position",
+"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"
+]) {
+layout[prop] = style.getPropertyValue(prop);
+}
+if (options.autoMargins) {
+layout.autoMargins = this.processMargins(this.cssLogic);
+}
+for (let i in this.map) {
+let property = this.map[i].property;
+this.map[i].value = parseInt(style.getPropertyValue(property));
+}
+if (options.margins) {
+layout.margins = this.processMargins(cssLogic);
+}
+return layout;
+}, {
+request: {
+node: Arg(0, "domnode"),
+autoMargins: Option(1, "boolean")
+},
+response: RetVal("json")
+}),
+/**
+* Find 'auto' margin properties.
+*/
+processMargins: function(cssLogic) {
+let margins = {};
+for (let prop of ["top", "bottom", "left", "right"]) {
+let info = cssLogic.getPropertyInfo("margin-" + prop);
+let selectors = info.matchedSelectors;
+if (selectors && selectors.length > 0 && selectors[0].value == "auto") {
+margins[prop] = "auto";
+}
+}
+return margins;
+},
+});
+exports.PageStyleActor = PageStyleActor;
+/**
+* Front object for the PageStyleActor
+*/
+var PageStyleFront = protocol.FrontClass(PageStyleActor, {
+initialize: function(conn, form, ctx, detail) {
+protocol.Front.prototype.initialize.call(this, conn, form, ctx, detail);
+this.inspector = this.parent();
+},
+destroy: function() {
+protocol.Front.prototype.destroy.call(this);
+},
+get walker() {
+return this.inspector.walker;
+},
+getMatchedSelectors: protocol.custom(function(node, property, options) {
+return this._getMatchedSelectors(node, property, options).then(ret => {
+return ret.matched;
+});
+}, {
+impl: "_getMatchedSelectors"
+}),
+getApplied: protocol.custom(function(node, options={}) {
+return this._getApplied(node, options).then(ret => {
+return ret.entries;
+});
+}, {
+impl: "_getApplied"
+})
+});
+// Predeclare the domstylerule actor type
+types.addActorType("domstylerule");
+/**
+* An actor that represents a CSS style object on the protocol.
+*
+* We slightly flatten the CSSOM for this actor, it represents
+* both the CSSRule and CSSStyle objects in one actor.  For nodes
+* (which have a CSSStyle but no CSSRule) we create a StyleRuleActor
+* with a special rule type (100).
+*/
+var StyleRuleActor = protocol.ActorClass({
+typeName: "domstylerule",
+initialize: function(pageStyle, item) {
+protocol.Actor.prototype.initialize.call(this, null);
+this.pageStyle = pageStyle;
+this.rawStyle = item.style;
+if (item instanceof (Ci.nsIDOMCSSRule)) {
+this.type = item.type;
+this.rawRule = item;
+if (this.rawRule instanceof Ci.nsIDOMCSSStyleRule && this.rawRule.parentStyleSheet) {
+this.line = DOMUtils.getRuleLine(this.rawRule);
+this.column = DOMUtils.getRuleColumn(this.rawRule);
+}
+} else {
+// Fake a rule
+this.type = ELEMENT_STYLE;
+this.rawNode = item;
+this.rawRule = {
+style: item.style,
+toString: function() "[element rule " + this.style + "]"
+}
+}
+},
+get conn() this.pageStyle.conn,
+// Objects returned by this actor are owned by the PageStyleActor
+// to which this rule belongs.
+get marshallPool() this.pageStyle,
+toString: function() "[StyleRuleActor for " + this.rawRule + "]",
+form: function(detail) {
+if (detail === "actorid") {
+return this.actorID;
+}
+let form = {
+actor: this.actorID,
+type: this.type,
+line: this.line || undefined,
+column: this.column
+};
+if (this.rawRule.parentRule) {
+form.parentRule = this.pageStyle._styleRef(this.rawRule.parentRule).actorID;
+}
+if (this.rawRule.parentStyleSheet) {
+form.parentStyleSheet = this.pageStyle._sheetRef(this.rawRule.parentStyleSheet).actorID;
+}
+switch (this.type) {
+case Ci.nsIDOMCSSRule.STYLE_RULE:
+form.selectors = CssLogic.getSelectors(this.rawRule);
+form.cssText = this.rawStyle.cssText || "";
+break;
+case ELEMENT_STYLE:
+// Elements don't have a parent stylesheet, and therefore
+// don't have an associated URI.  Provide a URI for
+// those.
+form.href = this.rawNode.ownerDocument.location.href;
+form.cssText = this.rawStyle.cssText || "";
+break;
+case Ci.nsIDOMCSSRule.CHARSET_RULE:
+form.encoding = this.rawRule.encoding;
+break;
+case Ci.nsIDOMCSSRule.IMPORT_RULE:
+form.href = this.rawRule.href;
+break;
+case Ci.nsIDOMCSSRule.MEDIA_RULE:
+form.media = [];
+for (let i = 0, n = this.rawRule.media.length; i < n; i++) {
+form.media.push(this.rawRule.media.item(i));
+}
+break;
+}
+return form;
+},
+/**
+* Modify a rule's properties.  Passed an array of modifications:
+* {
+*   type: "set",
+*   name: <string>,
+*   value: <string>,
+*   priority: <optional string>
+* }
+*  or
+* {
+*   type: "remove",
+*   name: <string>,
+* }
+*
+* @returns the rule with updated properties
+*/
+modifyProperties: method(function(modifications) {
+let validProps = new Map();
+// Use a fresh element for each call to this function to prevent side effects
+// that pop up based on property values that were already set on the element.
+let document;
+if (this.rawNode) {
+document = this.rawNode.ownerDocument;
+} else {
+let parentStyleSheet = this.rawRule.parentStyleSheet;
+while (parentStyleSheet.ownerRule &&
+parentStyleSheet.ownerRule instanceof Ci.nsIDOMCSSImportRule) {
+parentStyleSheet = parentStyleSheet.ownerRule.parentStyleSheet;
+}
+if (parentStyleSheet.ownerNode instanceof Ci.nsIDOMHTMLDocument) {
+document = parentStyleSheet.ownerNode;
+} else {
+document = parentStyleSheet.ownerNode.ownerDocument;
+}
+}
+let tempElement = document.createElement("div");
+for (let mod of modifications) {
+if (mod.type === "set") {
+tempElement.style.setProperty(mod.name, mod.value, mod.priority || "");
+this.rawStyle.setProperty(mod.name,
+tempElement.style.getPropertyValue(mod.name), mod.priority || "");
+} else if (mod.type === "remove") {
+this.rawStyle.removeProperty(mod.name);
+}
+}
+return this;
+}, {
+request: { modifications: Arg(0, "array:json") },
+response: { rule: RetVal("domstylerule") }
+})
+});
+/**
+* Front for the StyleRule actor.
+*/
+var StyleRuleFront = protocol.FrontClass(StyleRuleActor, {
+initialize: function(client, form, ctx, detail) {
+protocol.Front.prototype.initialize.call(this, client, form, ctx, detail);
+},
+destroy: function() {
+protocol.Front.prototype.destroy.call(this);
+},
+form: function(form, detail) {
+if (detail === "actorid") {
+this.actorID = form;
+return;
+}
+this.actorID = form.actor;
+this._form = form;
+if (this._mediaText) {
+this._mediaText = null;
+}
+},
+/**
+* Return a new RuleModificationList for this node.
+*/
+startModifyingProperties: function() {
+return new RuleModificationList(this);
+},
+get type() this._form.type,
+get line() this._form.line || -1,
+get column() this._form.column || -1,
+get cssText() {
+return this._form.cssText;
+},
+get selectors() {
+return this._form.selectors;
+},
+get media() {
+return this._form.media;
+},
+get mediaText() {
+if (!this._form.media) {
+return null;
+}
+if (this._mediaText) {
+return this._mediaText;
+}
+this._mediaText = this.media.join(", ");
+return this._mediaText;
+},
+get parentRule() {
+return this.conn.getActor(this._form.parentRule);
+},
+get parentStyleSheet() {
+return this.conn.getActor(this._form.parentStyleSheet);
+},
+get element() {
+return this.conn.getActor(this._form.element);
+},
+get href() {
+if (this._form.href) {
+return this._form.href;
+}
+let sheet = this.parentStyleSheet;
+return sheet.href;
+},
+get nodeHref() {
+let sheet = this.parentStyleSheet;
+return sheet ? sheet.nodeHref : "";
+},
+get location()
+{
+return {
+href: this.href,
+line: this.line,
+column: this.column
+};
+},
+getOriginalLocation: function()
+{
+if (this._originalLocation) {
+return promise.resolve(this._originalLocation);
+}
+let parentSheet = this.parentStyleSheet;
+if (!parentSheet) {
+return promise.resolve(this.location);
+}
+return parentSheet.getOriginalLocation(this.line, this.column)
+.then(({ source, line, column }) => {
+let location = {
+href: source,
+line: line,
+column: column
+}
+if (!source) {
+location.href = this.href;
+}
+this._originalLocation = location;
+return location;
+})
+},
+// Only used for testing, please keep it that way.
+_rawStyle: function() {
+if (!this.conn._transport._serverConnection) {
+console.warn("Tried to use rawNode on a remote connection.");
+return null;
+}
+let actor = this.conn._transport._serverConnection.getActor(this.actorID);
+if (!actor) {
+return null;
+}
+return actor.rawStyle;
+}
+});
+/**
+* Convenience API for building a list of attribute modifications
+* for the `modifyAttributes` request.
+*/
+var RuleModificationList = Class({
+initialize: function(rule) {
+this.rule = rule;
+this.modifications = [];
+},
+apply: function() {
+return this.rule.modifyProperties(this.modifications);
+},
+setProperty: function(name, value, priority) {
+this.modifications.push({
+type: "set",
+name: name,
+value: value,
+priority: priority
+});
+},
+removeProperty: function(name) {
+this.modifications.push({
+type: "remove",
+name: name
+});
+}
+});