Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 23:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1485243 - Add highlights to the source link, selector and computed properties when filtering styles. r=bgrins

Browse Source
This commit is contained in:
Gabriel Luong 2018-08-25 21:25:02 -04:00
parent 4125dfc655
commit e126996d9b
2 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
devtools/client/inspector/rules/views/text-property-editor.js
View File

@ -706,11 +706,15 @@ TextPropertyEditor.prototype = {
li.classList.add("ruleview-overridden");
}
createChild(li, "span", {
const nameContainer = createChild(li, "span", {
class: "ruleview-namecontainer"
});
createChild(nameContainer, "span", {
class: "ruleview-propertyname theme-fg-color5",
textContent: computed.name
});
appendText(li, ": ");
appendText(nameContainer, ": ");
const outputParser = this.ruleView._outputParser;
const frag = outputParser.parseCssProperty(
@ -725,12 +729,15 @@ TextPropertyEditor.prototype = {
// Store the computed property value that was parsed for output
computed.parsedValue = frag.textContent;
createChild(li, "span", {
const propertyContainer = createChild(li, "span", {
class: "ruleview-propertyvaluecontainer"
});
createChild(propertyContainer, "span", {
class: "ruleview-propertyvalue theme-fg-color1",
child: frag
});
appendText(li, ";");
appendText(propertyContainer, ";");
return li;
},

9
devtools/client/themes/rules.css
View File

@ -154,6 +154,10 @@
margin-left: -25px;
}
.ruleview-computed > .ruleview-namecontainer {
margin: 0;
}
.ruleview-propertyvaluecontainer {
cursor: text;
padding-right: 5px;
@ -523,8 +527,11 @@
border-left-color: var(--theme-highlight-green);
}
.ruleview-highlight > .ruleview-expander,
.ruleview-highlight > .ruleview-namecontainer,
.ruleview-highlight > .ruleview-propertyvaluecontainer {
.ruleview-highlight > .ruleview-propertyvaluecontainer,
.ruleview-highlight > .ruleview-rule-source-label,
.ruleview-highlight > .ruleview-selector {
background-color: var(--rule-highlight-background-color);
}