mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-09 11:25:00 +00:00
Bug 712469 - Inspector Rule View selectors can be more visually scannable; r=dcamp
This commit is contained in:
Heather Arthur
parent
fe02b912b9
commit
819ee3058d
@ -373,17 +373,24 @@ Rule.prototype = {
|
||||
this._title += ":" + this.ruleLine;
|
||||
}
|
||||
|
||||
return this._title + (this.mediaText ? " @media " + this.mediaText : "");
|
||||
},
|
||||
|
||||
get inheritedSource()
|
||||
{
|
||||
if (this._inheritedSource) {
|
||||
return this._inheritedSource;
|
||||
}
|
||||
this._inheritedSource = "";
|
||||
if (this.inherited) {
|
||||
let eltText = this.inherited.tagName.toLowerCase();
|
||||
if (this.inherited.id) {
|
||||
eltText += "#" + this.inherited.id;
|
||||
}
|
||||
let args = [eltText, this._title];
|
||||
this._title = CssLogic._strings.formatStringFromName("rule.inheritedSource",
|
||||
args, args.length);
|
||||
this._inheritedSource =
|
||||
CssLogic._strings.formatStringFromName("rule.inheritedSource", [eltText], 1);
|
||||
}
|
||||
|
||||
return this._title + (this.mediaText ? " @media " + this.mediaText : "");
|
||||
return this._inheritedSource;
|
||||
},
|
||||
|
||||
/**
|
||||
@ -958,6 +965,8 @@ CssRuleView.prototype = {
|
||||
return;
|
||||
}
|
||||
|
||||
this._clearRules();
|
||||
|
||||
// Repopulate the element style.
|
||||
this._elementStyle.populate();
|
||||
|
||||
@ -1023,23 +1032,23 @@ CssRuleView.prototype = {
|
||||
{
|
||||
// Run through the current list of rules, attaching
|
||||
// their editors in order. Create editors if needed.
|
||||
let last = null;
|
||||
let lastInheritedSource = "";
|
||||
for each (let rule in this._elementStyle.rules) {
|
||||
|
||||
let inheritedSource = rule.inheritedSource;
|
||||
if (inheritedSource != lastInheritedSource) {
|
||||
let h2 = this.doc.createElementNS(HTML_NS, "div");
|
||||
h2.className = "ruleview-rule-inheritance";
|
||||
h2.textContent = inheritedSource;
|
||||
lastInheritedSource = inheritedSource;
|
||||
this.element.appendChild(h2);
|
||||
}
|
||||
|
||||
if (!rule.editor) {
|
||||
new RuleEditor(this, rule);
|
||||
}
|
||||
|
||||
let target = last ? last.nextSibling : this.element.firstChild;
|
||||
this.element.insertBefore(rule.editor.element, target);
|
||||
last = rule.editor.element;
|
||||
}
|
||||
|
||||
// ... and now editors for rules that don't exist anymore
|
||||
// have been pushed to the end of the list, go ahead and
|
||||
// delete their nodes. The rules they edit have already been
|
||||
// forgotten.
|
||||
while (last && last.nextSibling) {
|
||||
this.element.removeChild(last.nextSibling);
|
||||
this.element.appendChild(rule.editor.element);
|
||||
}
|
||||
},
|
||||
|
||||
@ -1154,16 +1163,6 @@ CssRuleView.prototype = {
|
||||
let rx = new RegExp("^" + inline + "\\r?\\n?", "g");
|
||||
text = text.replace(rx, "");
|
||||
|
||||
// Remove file:line
|
||||
text = text.replace(/[\w\.]+:\d+(\r?\n)/g, "$1");
|
||||
|
||||
// Remove inherited from: line
|
||||
let inheritedFrom = _strings.
|
||||
GetStringFromName("rule.inheritedSource");
|
||||
inheritedFrom = inheritedFrom.replace(/\s%S\s\(%S\)/g, "");
|
||||
rx = new RegExp("(\r?\n)" + inheritedFrom + ".*", "g");
|
||||
text = text.replace(rx, "$1");
|
||||
|
||||
clipboardHelper.copyString(text, this.doc);
|
||||
|
||||
if (aEvent) {
|
||||
@ -1184,9 +1183,9 @@ CssRuleView.prototype = {
|
||||
return;
|
||||
}
|
||||
|
||||
if (node.className != "rule-view-row") {
|
||||
if (node.className != "ruleview-rule") {
|
||||
while (node = node.parentElement) {
|
||||
if (node.className == "rule-view-row") {
|
||||
if (node.className == "ruleview-rule") {
|
||||
break;
|
||||
}
|
||||
}
|
||||
@ -1332,7 +1331,7 @@ RuleEditor.prototype = {
|
||||
_create: function RuleEditor_create()
|
||||
{
|
||||
this.element = this.doc.createElementNS(HTML_NS, "div");
|
||||
this.element.className = "rule-view-row";
|
||||
this.element.className = "ruleview-rule";
|
||||
this.element._ruleEditor = this;
|
||||
|
||||
// Give a relative position for the inplace editor's measurement
|
||||
@ -1705,6 +1704,7 @@ TextPropertyEditor.prototype = {
|
||||
textContent: computed.name
|
||||
});
|
||||
appendText(li, ": ");
|
||||
|
||||
createChild(li, "span", {
|
||||
class: "ruleview-propertyvalue",
|
||||
textContent: computed.value
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
.ruleview-property:not(:hover) > .ruleview-enableproperty {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ruleview-namecontainer {
|
||||
|
||||
@ -122,7 +122,7 @@ function checkCopyRule() {
|
||||
function checkCopyRuleWithEditorSelected()
|
||||
{
|
||||
let contentDoc = ruleViewFrame().contentDocument;
|
||||
let rows = contentDoc.querySelectorAll(".rule-view-row");
|
||||
let rules = contentDoc.querySelectorAll(".ruleview-rule");
|
||||
let propNodes = contentDoc.querySelectorAll(".ruleview-property");
|
||||
let propNode = propNodes[2];
|
||||
let propNameNode = propNode.querySelector(".ruleview-propertyname");
|
||||
@ -137,7 +137,7 @@ function checkCopyRuleWithEditorSelected()
|
||||
" color: rgb\\(170, 170, 170\\);[\\r\\n]+" +
|
||||
"}[\\r\\n]*";
|
||||
|
||||
let elementRuleEditor = rows[0]._ruleEditor;
|
||||
let elementRuleEditor = rules[0]._ruleEditor;
|
||||
waitForEditorFocus(elementRuleEditor.element, function onNewElement(aEditor) {
|
||||
ok(aEditor, "we have the editor");
|
||||
|
||||
|
||||
@ -33,8 +33,8 @@ rule.sourceElement=element
|
||||
# LOCALIZATION NOTE (rule.inheritedSource): Shown for CSS rules
|
||||
# that were inherited from a parent node. Will be passed a node
|
||||
# identifier and a source location.
|
||||
# e.g "Inherited from body#bodyID (styles.css:20)"
|
||||
rule.inheritedSource=Inherited from %S (%S)
|
||||
# e.g "Inherited from body#bodyID"
|
||||
rule.inheritedSource=Inherited from %S
|
||||
|
||||
# LOCALIZATION NOTE (style.highlighter.button): These strings are used inside
|
||||
# sidebar of the Highlighter for the style inspector button.
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 882 B After Width: | Height: | Size: 804 B |
@ -143,22 +143,38 @@
|
||||
*/
|
||||
|
||||
.ruleview {
|
||||
background-color: #FFF;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ruleview-rule-source {
|
||||
background-color: -moz-dialog;
|
||||
color: -moz-dialogText;
|
||||
padding: 2px 5px;
|
||||
color: hsl(121,42%,43%); /* green */
|
||||
-moz-padding-start: 5px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
float: right;
|
||||
-moz-user-select: -moz-none;
|
||||
}
|
||||
|
||||
.ruleview-rule-inheritance {
|
||||
background-color: hsl(0,0%,90%);
|
||||
color: hsl(0,0%,50%);
|
||||
border-top: 1px solid hsl(0,0%,65%);
|
||||
border-bottom: 1px solid hsl(0,0%,65%);
|
||||
padding: 1px 4px;
|
||||
margin-top: 4px;
|
||||
-moz-user-select: -moz-none;
|
||||
}
|
||||
|
||||
.ruleview-rule-source:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ruleview-code {
|
||||
padding: 2px 5px;
|
||||
.ruleview-rule {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.ruleview-rule + .ruleview-rule {
|
||||
border-top: 1px dotted #cddae5;
|
||||
}
|
||||
|
||||
.ruleview-warning {
|
||||
@ -187,8 +203,15 @@
|
||||
.ruleview-enableproperty {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
-moz-margin-start: 2px;
|
||||
-moz-margin-start: 1px;
|
||||
-moz-margin-end: 0;
|
||||
transition: opacity 100ms;
|
||||
transition-delay: 200ms;
|
||||
}
|
||||
|
||||
.ruleview-property:not(:hover) > .ruleview-enableproperty {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.ruleview-expander {
|
||||
@ -211,7 +234,11 @@
|
||||
|
||||
.ruleview-propertyname {
|
||||
padding: 1px 0;
|
||||
color: #0060C0;
|
||||
color: hsl(210,100%,38%); /* blue */
|
||||
}
|
||||
|
||||
.ruleview-propertyvalue {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.ruleview-namecontainer,
|
||||
@ -250,10 +277,10 @@
|
||||
|
||||
.ruleview-namecontainer > .ruleview-propertyname,
|
||||
.ruleview-propertycontainer > .ruleview-propertyvalue {
|
||||
border-bottom: 1px dotted transparent;
|
||||
border-bottom: 1px dashed transparent;
|
||||
}
|
||||
|
||||
.ruleview-namecontainer:hover > .ruleview-propertyname,
|
||||
.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
|
||||
border-bottom-color: black;
|
||||
border-bottom-color: hsl(0,0%,50%);
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 882 B After Width: | Height: | Size: 804 B |
@ -145,22 +145,38 @@
|
||||
*/
|
||||
|
||||
.ruleview {
|
||||
background-color: #FFF;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ruleview-rule-source {
|
||||
background-color: -moz-dialog;
|
||||
color: -moz-dialogText;
|
||||
padding: 2px 5px;
|
||||
color: hsl(121,42%,43%); /* green */
|
||||
-moz-padding-start: 5px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
float: right;
|
||||
-moz-user-select: -moz-none;
|
||||
}
|
||||
|
||||
.ruleview-rule-inheritance {
|
||||
background-color: hsl(0,0%,90%);
|
||||
color: hsl(0,0%,50%);
|
||||
border-top: 1px solid hsl(0,0%,65%);
|
||||
border-bottom: 1px solid hsl(0,0%,65%);
|
||||
padding: 1px 4px;
|
||||
margin-top: 4px;
|
||||
-moz-user-select: -moz-none;
|
||||
}
|
||||
|
||||
.ruleview-rule-source:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ruleview-code {
|
||||
padding: 2px 5px;
|
||||
.ruleview-rule {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.ruleview-rule + .ruleview-rule {
|
||||
border-top: 1px dotted #cddae5;
|
||||
}
|
||||
|
||||
.ruleview-warning {
|
||||
@ -189,8 +205,15 @@
|
||||
.ruleview-enableproperty {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
-moz-margin-start: 2px;
|
||||
-moz-margin-start: 1px;
|
||||
-moz-margin-end: 0;
|
||||
transition: opacity 100ms;
|
||||
transition-delay: 200ms;
|
||||
}
|
||||
|
||||
.ruleview-property:not(:hover) > .ruleview-enableproperty {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.ruleview-expander {
|
||||
@ -213,7 +236,11 @@
|
||||
|
||||
.ruleview-propertyname {
|
||||
padding: 1px 0;
|
||||
color: #0060C0;
|
||||
color: hsl(210,100%,38%); /* blue */
|
||||
}
|
||||
|
||||
.ruleview-propertyvalue {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.ruleview-namecontainer,
|
||||
@ -252,10 +279,10 @@
|
||||
|
||||
.ruleview-namecontainer > .ruleview-propertyname,
|
||||
.ruleview-propertycontainer > .ruleview-propertyvalue {
|
||||
border-bottom: 1px dotted transparent;
|
||||
border-bottom: 1px dashed transparent;
|
||||
}
|
||||
|
||||
.ruleview-namecontainer:hover > .ruleview-propertyname,
|
||||
.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
|
||||
border-bottom-color: black;
|
||||
border-bottom-color: hsl(0,0%,50%);
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 882 B After Width: | Height: | Size: 804 B |
@ -144,22 +144,38 @@
|
||||
*/
|
||||
|
||||
.ruleview {
|
||||
background-color: #FFF;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ruleview-rule-source {
|
||||
background-color: -moz-dialog;
|
||||
color: -moz-dialogText;
|
||||
padding: 2px 5px;
|
||||
color: hsl(121,42%,43%); /* green */
|
||||
-moz-padding-start: 5px;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
float: right;
|
||||
-moz-user-select: -moz-none;
|
||||
}
|
||||
|
||||
.ruleview-rule-inheritance {
|
||||
background-color: hsl(0,0%,90%);
|
||||
color: hsl(0,0%,50%);
|
||||
border-top: 1px solid hsl(0,0%,65%);
|
||||
border-bottom: 1px solid hsl(0,0%,65%);
|
||||
padding: 1px 4px;
|
||||
margin-top: 4px;
|
||||
-moz-user-select: -moz-none;
|
||||
}
|
||||
|
||||
.ruleview-rule-source:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.ruleview-code {
|
||||
padding: 2px 5px;
|
||||
.ruleview-rule {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.ruleview-rule + .ruleview-rule {
|
||||
border-top: 1px dotted #cddae5;
|
||||
}
|
||||
|
||||
.ruleview-warning {
|
||||
@ -188,8 +204,15 @@
|
||||
.ruleview-enableproperty {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
-moz-margin-start: 2px;
|
||||
-moz-margin-start: 1px;
|
||||
-moz-margin-end: 0;
|
||||
transition: opacity 100ms;
|
||||
transition-delay: 200ms;
|
||||
}
|
||||
|
||||
.ruleview-property:not(:hover) > .ruleview-enableproperty {
|
||||
opacity: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.ruleview-expander {
|
||||
@ -212,7 +235,11 @@
|
||||
|
||||
.ruleview-propertyname {
|
||||
padding: 1px 0;
|
||||
color: #0060C0;
|
||||
color: hsl(210,100%,38%); /* blue */
|
||||
}
|
||||
|
||||
.ruleview-propertyvalue {
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.ruleview-namecontainer,
|
||||
@ -251,10 +278,10 @@
|
||||
|
||||
.ruleview-namecontainer > .ruleview-propertyname,
|
||||
.ruleview-propertycontainer > .ruleview-propertyvalue {
|
||||
border-bottom: 1px dotted transparent;
|
||||
border-bottom: 1px dashed transparent;
|
||||
}
|
||||
|
||||
.ruleview-namecontainer:hover > .ruleview-propertyname,
|
||||
.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
|
||||
border-bottom-color: black;
|
||||
border-bottom-color: hsl(0,0%,50%);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user