Bug 1521270 - Add classes to the rule when it is uneditable or unmatched. r=mtigley
authorGabriel Luong <gabriel.luong@gmail.com>
Mon, 21 Jan 2019 14:39:11 -0500
changeset 514776 9cd21938464de36b922639cb91b5f92d3ff7a502
parent 514775 8ae27ed8d8618522cd921dd85c51b500ad9f11a9
child 514777 ed02a9881c0d43d5ab3e3040e878ed771dd1f10c
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmtigley
bugs1521270
milestone66.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 1521270 - Add classes to the rule when it is uneditable or unmatched. r=mtigley
devtools/client/inspector/rules/components/Rule.js
devtools/client/themes/rules.css
--- a/devtools/client/inspector/rules/components/Rule.js
+++ b/devtools/client/inspector/rules/components/Rule.js
@@ -27,24 +27,30 @@ class Rule extends PureComponent {
   render() {
     const {
       onToggleDeclaration,
       onToggleSelectorHighlighter,
       rule,
     } = this.props;
     const {
       declarations,
+      isUnmatched,
+      isUserAgentStyle,
       selector,
       sourceLink,
       type,
     } = rule;
 
     return (
       dom.div(
-        { className: "ruleview-rule devtools-monospace" },
+        {
+          className: "ruleview-rule devtools-monospace" +
+                     (isUnmatched ? " unmatched" : "") +
+                     (isUserAgentStyle ? " uneditable" : ""),
+        },
         SourceLink({ sourceLink }),
         dom.div({ className: "ruleview-code" },
           dom.div({},
             Selector({
               selector,
               type,
             }),
             type !== CSSRule.KEYFRAME_RULE ?
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -254,41 +254,51 @@
 #ruleview-container-focusable > .ruleview-rule:last-child {
   border-bottom: none;
 }
 
 /**
  * Display rules that don't match the current selected element and uneditable
  * user agent styles differently
  */
+.ruleview-rule.unmatched,
+.ruleview-rule.uneditable,
 .ruleview-rule[unmatched=true],
 .ruleview-rule[uneditable=true] {
   background: var(--theme-tab-toolbar-background);
 }
 
+.ruleview-rule.unmatched,
 .ruleview-rule[unmatched=true] {
   opacity: 0.5;
 }
 
+.ruleview-rule.uneditable :focus,
 .ruleview-rule[uneditable=true] :focus {
   outline: none;
 }
 
+.ruleview-rule.uneditable .theme-link,
 .ruleview-rule[uneditable=true] .theme-link {
   color: var(--theme-highlight-bluegrey);
 }
 
+.ruleview-rule.uneditable .ruleview-enableproperty,
 .ruleview-rule[uneditable=true] .ruleview-enableproperty {
   visibility: hidden;
 }
 
+.ruleview-rule.uneditable .ruleview-swatch,
 .ruleview-rule[uneditable=true] .ruleview-swatch {
   cursor: default;
 }
 
+.ruleview-rule.uneditable .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule.uneditable .ruleview-propertyvaluecontainer >
+.ruleview-propertyvalue,
 .ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
 .ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
 .ruleview-propertyvalue {
   border-bottom-color: transparent;
 }
 
 .ruleview-overridden-rule-filter {
   background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);