Bug 1532855 - Ensure that highlightProperty does not highlight overridden computed properties. r=gl
authorMicah Tigley <mtigley@mozilla.com>
Wed, 06 Mar 2019 04:22:32 +0000
changeset 520496 783a57afe5b8b08a97cdea33bcb9648f0473ba43
parent 520495 0e7c56c0db48224483e59c4a58584ea669889ab7
child 520497 d9e6f5d564be93eb8501320098b1b82f6fb3a501
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1532855
milestone67.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 1532855 - Ensure that highlightProperty does not highlight overridden computed properties. r=gl Differential Revision: https://phabricator.services.mozilla.com/D22247
devtools/client/inspector/rules/rules.js
devtools/client/inspector/rules/test/browser_rules_highlight-property.js
--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1651,16 +1651,20 @@ CssRuleView.prototype = {
           this._scrollToElement(selectorText, textProp.editor.element, scrollBehavior);
           this._flashElement(textProp.editor.element);
 
           return true;
         }
 
         // If there is no matching property, then look in computed properties.
         for (const computed of textProp.computed) {
+          if (computed.overridden) {
+            continue;
+          }
+
           if (computed.name === name) {
             if (!this.inspector.is3PaneModeEnabled) {
               this.inspector.sidebar.select("ruleview");
             }
 
             if (textProp.rule.pseudoElement.length && !this.showPseudoElements) {
               scrollBehavior = "auto";
               this._togglePseudoElementRuleContainer();
--- a/devtools/client/inspector/rules/test/browser_rules_highlight-property.js
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-property.js
@@ -4,18 +4,20 @@
 
 "use strict";
 
 // Tests that the rule view's highlightProperty scrolls to the specified declaration.
 
 const TEST_URI = `
   <style type="text/css">
     .test {
+      margin: 5px;
       font-size: 12px;
       border: 1px solid blue;
+      margin-top: 20px;
     }
 
     .test::after {
       content: "!";
       color: red;
     }
   </style>
   <div class="test">Hello this is a test</div>
@@ -24,29 +26,29 @@ const TEST_URI = `
 add_task(async function() {
   await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   const { inspector, view } = await openRuleView();
 
   await selectNode(".test", inspector);
   const { rules, styleWindow } = view;
 
   info("Highlight the computed border-left-width declaration in the rule view.");
-  const borderLeftWidthStyle = rules[2].textProps[1].computed
+  const borderLeftWidthStyle = rules[2].textProps[2].computed
     .find(({ name }) => name === "border-left-width");
 
   let onHighlightProperty = view.once("scrolled-to-element");
   let isHighlighted = view.highlightProperty("border-left-width");
   await onHighlightProperty;
 
   ok(isHighlighted, "border-left-property is highlighted.");
   ok(isInViewport(borderLeftWidthStyle.element, styleWindow),
     "border-left-width is in view.");
 
-  info("Highlight the computed font-size declaration in the rule view.");
-  const fontSize = rules[2].textProps[0].editor;
+  info("Highlight the font-size declaration in the rule view.");
+  const fontSize = rules[2].textProps[1].editor;
 
   info("Wait for the view to scroll to the property.");
   onHighlightProperty = view.once("scrolled-to-element");
   isHighlighted = view.highlightProperty("font-size");
   await onHighlightProperty;
 
   ok(isHighlighted, "font-size property is highlighted.");
   ok(isInViewport(fontSize.element, styleWindow), "font-size is in view.");
@@ -56,14 +58,25 @@ add_task(async function() {
 
   info("Wait for the view to scroll to the property.");
   onHighlightProperty = view.once("scrolled-to-element");
   isHighlighted = view.highlightProperty("color");
   await onHighlightProperty;
 
   ok(isHighlighted, "color property is highlighted.");
   ok(isInViewport(color.element, styleWindow), "color property is in view.");
+
+  info("Highlight margin-top declaration in the rules view.");
+  const marginTop = rules[2].textProps[3].editor;
+
+  info("Wait for the view to scroll to the property.");
+  onHighlightProperty = view.once("scrolled-to-element");
+  isHighlighted = view.highlightProperty("margin-top");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "margin-top property is highlighted.");
+  ok(isInViewport(marginTop.element, styleWindow), "margin-top property is in view.");
 });
 
 function isInViewport(element, win) {
   const { top, left, bottom, right } = element.getBoundingClientRect();
   return top >= 0 && bottom <= win.innerHeight && left >= 0 && right <= win.innerWidth;
 }