Bug 1085119 - Part 1: Make devtools css-logic consider column when choosing best rule r=tromey
authorCosine <judahiii@gmail.com>
Thu, 31 Aug 2017 16:47:52 -0400
changeset 428886 f63826a2f12bdffdb6dbb6f8cb94370bcb8db85d
parent 428885 9a7fde903010acbe233ffddd9a9f11dcb0ab69b9
child 428887 fcd3a7c6694c50996b0c6b6f702eb944741e31b5
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstromey
bugs1085119
milestone57.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1085119 - Part 1: Make devtools css-logic consider column when choosing best rule r=tromey This allows minified CSS to be displayed correctly, as in http://jsfiddle.net/oy4rkyax/ MozReview-Commit-ID: F8buX4gYY2P
devtools/server/css-logic.js
--- a/devtools/server/css-logic.js
+++ b/devtools/server/css-logic.js
@@ -910,16 +910,17 @@ function CssRule(cssSheet, domRule, elem
   if (parentRule && parentRule.type == CSSRule.MEDIA_RULE) {
     this.mediaText = parentRule.media.mediaText;
   }
 
   if (this._cssSheet) {
     // parse domRule.selectorText on call to this.selectors
     this._selectors = null;
     this.line = domUtils.getRuleLine(this.domRule);
+    this.column = domUtils.getRuleColumn(this.domRule);
     this.source = this._cssSheet.shortSource + ":" + this.line;
     if (this.mediaText) {
       this.source += " @media " + this.mediaText;
     }
     this.href = this._cssSheet.href;
     this.contentRule = this._cssSheet.contentSheet;
   } else if (element) {
     this._selectors = [ new CssSelector(this, "@element.style", 0) ];
@@ -1103,16 +1104,26 @@ CssSelector.prototype = {
    * @return {number} the line of the parent CSSStyleRule in the parent
    * stylesheet.
    */
   get ruleLine() {
     return this.cssRule.line;
   },
 
   /**
+   * Retrieve the column of the parent CSSStyleRule in the parent CSSStyleSheet.
+   *
+   * @return {number} the column of the parent CSSStyleRule in the parent
+   * stylesheet.
+   */
+  get ruleColumn() {
+    return this.cssRule.column;
+  },
+
+  /**
    * Retrieve specificity information for the current selector.
    *
    * @see http://www.w3.org/TR/css3-selectors/#specificity
    * @see http://www.w3.org/TR/CSS2/selector.html
    *
    * @return {Number} The selector's specificity.
    */
   get specificity() {
@@ -1387,16 +1398,26 @@ CssSelectorInfo.prototype = {
    * @return {number} the line of the parent CSSStyleRule in the parent
    * stylesheet.
    */
   get ruleLine() {
     return this.selector.ruleLine;
   },
 
   /**
+   * Retrieve the column of the parent CSSStyleRule in the parent CSSStyleSheet.
+   *
+   * @return {number} the column of the parent CSSStyleRule in the parent
+   * stylesheet.
+   */
+  get ruleColumn() {
+    return this.selector.ruleColumn;
+  },
+
+  /**
    * Check if the selector comes from a browser-provided stylesheet.
    *
    * @return {boolean} true if the selector comes from a browser-provided
    * stylesheet, or false otherwise.
    */
   get contentRule() {
     return this.selector.contentRule;
   },
@@ -1453,16 +1474,23 @@ CssSelectorInfo.prototype = {
 
     if (this.ruleLine > that.ruleLine) {
       return -1;
     }
     if (that.ruleLine > this.ruleLine) {
       return 1;
     }
 
+    if (this.ruleColumn > that.ruleColumn) {
+      return -1;
+    }
+    if (that.ruleColumn > this.ruleColumn) {
+      return 1;
+    }
+
     return 0;
   },
 
   toString: function () {
     return this.selector + " -> " + this.value;
   },
 };