Title: [221662] trunk/Source/WebInspectorUI
- Revision
- 221662
- Author
- [email protected]
- Date
- 2017-09-05 20:55:27 -0700 (Tue, 05 Sep 2017)
Log Message
Web Inspector: Styles Redesign: display "Inherited From" section headers
https://bugs.webkit.org/show_bug.cgi?id=176033
<rdar://problem/34116930>
Reviewed by Devin Rousso.
Compared to the old styles sidebar, the new "Inherited From" sections are more compact.
One of the goals of the styles redesign is to make it fit more data vertically.
The contrast is inceased. The text is darker while the background stayed the same.
* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
(.spreadsheet-style-panel .section-inherited):
(.spreadsheet-style-panel .section-inherited .node-link):
(.spreadsheet-style-panel .section-inherited .node-link:hover):
* UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
(WI.SpreadsheetRulesStyleDetailsPanel):
(WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
Don't show two identical "Inherited From" sections.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (221661 => 221662)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-09-06 03:35:42 UTC (rev 221661)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-09-06 03:55:27 UTC (rev 221662)
@@ -1,5 +1,27 @@
2017-09-05 Nikita Vasilyev <[email protected]>
+ Web Inspector: Styles Redesign: display "Inherited From" section headers
+ https://bugs.webkit.org/show_bug.cgi?id=176033
+ <rdar://problem/34116930>
+
+ Reviewed by Devin Rousso.
+
+ Compared to the old styles sidebar, the new "Inherited From" sections are more compact.
+ One of the goals of the styles redesign is to make it fit more data vertically.
+
+ The contrast is inceased. The text is darker while the background stayed the same.
+
+ * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css:
+ (.spreadsheet-style-panel .section-inherited):
+ (.spreadsheet-style-panel .section-inherited .node-link):
+ (.spreadsheet-style-panel .section-inherited .node-link:hover):
+ * UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js:
+ (WI.SpreadsheetRulesStyleDetailsPanel):
+ (WI.SpreadsheetRulesStyleDetailsPanel.prototype.refresh):
+ Don't show two identical "Inherited From" sections.
+
+2017-09-05 Nikita Vasilyev <[email protected]>
+
Web Inspector: Layout flashing for internal View.prototype.layout
https://bugs.webkit.org/show_bug.cgi?id=176389
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css (221661 => 221662)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css 2017-09-06 03:35:42 UTC (rev 221661)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.css 2017-09-06 03:55:27 UTC (rev 221662)
@@ -102,12 +102,23 @@
color: hsl(0, 0%, 33%);
}
-.style-spreadsheet .inherited {
- color: hsl(0, 0%, 60%);
+.spreadsheet-style-panel .section-inherited {
+ margin: 0;
padding: 4px 6px;
+ font-size: inherit;
+ font-weight: inherit;
+ color: hsl(0, 0%, 30%);
border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
}
+.spreadsheet-style-panel .section-inherited .node-link {
+ color: inherit;
+}
+
+.spreadsheet-style-panel .section-inherited .node-link:hover {
+ color: black;
+}
+
.style-spreadsheet .declarations {
clear: left;
position: relative;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js (221661 => 221662)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2017-09-06 03:35:42 UTC (rev 221661)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetRulesStyleDetailsPanel.js 2017-09-06 03:55:27 UTC (rev 221662)
@@ -32,6 +32,8 @@
const label = WI.UIString("Styles \u2014 Rules");
super(delegate, className, identifier, label);
+ this.element.classList.add("spreadsheet-style-panel");
+
this._sections = [];
this._inspectorSection = null;
this._isInspectorSectionPendingFocus = false;
@@ -81,12 +83,29 @@
return uniqueStyles;
};
+ let createInheritedHeader = (style) => {
+ let inheritedHeader = document.createElement("h2");
+ inheritedHeader.classList.add("section-inherited");
+ inheritedHeader.append(WI.UIString("Inherited From: "), WI.linkifyNodeReference(style.node, {
+ maxLength: 100,
+ excludeRevealElement: true,
+ }));
+
+ return inheritedHeader;
+ };
+
this.removeAllSubviews();
let orderedStyles = uniqueOrderedStyles(this.nodeStyles.orderedStyles);
+ let previousStyle = null;
+
for (let style of orderedStyles) {
- // FIXME: <https://webkit.org/b/176033> Display "Inherited From" and media query section headers
+ if (style.inherited && (!previousStyle || previousStyle.node !== style.node))
+ this.element.append(createInheritedHeader(style));
+
// FIXME: <https://webkit.org/b/176187> Display matching pseudo-styles
+ // FIXME: <https://webkit.org/b/176289> Display at-rule section headers (@media, @keyframes, etc.)
+
let section = style[WI.SpreadsheetRulesStyleDetailsPanel.RuleSection];
if (!section) {
section = new WI.SpreadsheetCSSStyleDeclarationSection(this, style);
@@ -98,6 +117,8 @@
this.addSubview(section);
section.needsLayout(WI.View.LayoutReason.Dirty);
+
+ previousStyle = style;
}
this.element.append(this._emptyFilterResultsElement);
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
