Title: [239399] trunk/Source/WebInspectorUI
- Revision
- 239399
- Author
- [email protected]
- Date
- 2018-12-19 15:28:58 -0800 (Wed, 19 Dec 2018)
Log Message
Web Inspector: Computed: make UI more usable when the panel is narrow
https://bugs.webkit.org/show_bug.cgi?id=192578
<rdar://problem/46615753>
Reviewed by Devin Rousso.
* UserInterface/Views/ComputedStyleSection.css:
(.computed-style-section .computed-property-item .property-traces):
(.computed-style-section .computed-property-item.expanded .disclosure-button):
(.computed-style-section .computed-property-item .property-trace-item):
(.computed-style-section .computed-property-item .property-trace-item::before):
(.computed-style-section .computed-property-item .property):
(.computed-style-section .computed-property-item .property-trace-item .selector):
Allow CSS property values and selectors to take more than one line.
(.computed-style-section .property-trace-item .property .name,):
* UserInterface/Views/ComputedStyleSection.js:
(WI.ComputedStyleSection.prototype._createTrace):
* UserInterface/Views/SpreadsheetStyleProperty.js:
(WI.SpreadsheetStyleProperty.prototype.update):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (239398 => 239399)
--- trunk/Source/WebInspectorUI/ChangeLog 2018-12-19 23:27:45 UTC (rev 239398)
+++ trunk/Source/WebInspectorUI/ChangeLog 2018-12-19 23:28:58 UTC (rev 239399)
@@ -1,3 +1,26 @@
+2018-12-19 Nikita Vasilyev <[email protected]>
+
+ Web Inspector: Computed: make UI more usable when the panel is narrow
+ https://bugs.webkit.org/show_bug.cgi?id=192578
+ <rdar://problem/46615753>
+
+ Reviewed by Devin Rousso.
+
+ * UserInterface/Views/ComputedStyleSection.css:
+ (.computed-style-section .computed-property-item .property-traces):
+ (.computed-style-section .computed-property-item.expanded .disclosure-button):
+ (.computed-style-section .computed-property-item .property-trace-item):
+ (.computed-style-section .computed-property-item .property-trace-item::before):
+ (.computed-style-section .computed-property-item .property):
+ (.computed-style-section .computed-property-item .property-trace-item .selector):
+ Allow CSS property values and selectors to take more than one line.
+
+ (.computed-style-section .property-trace-item .property .name,):
+ * UserInterface/Views/ComputedStyleSection.js:
+ (WI.ComputedStyleSection.prototype._createTrace):
+ * UserInterface/Views/SpreadsheetStyleProperty.js:
+ (WI.SpreadsheetStyleProperty.prototype.update):
+
2018-12-18 Simon Fraser <[email protected]>
Web Inspector: Timelines: correctly label Intersection Observer callbacks
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css (239398 => 239399)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css 2018-12-19 23:27:45 UTC (rev 239398)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css 2018-12-19 23:28:58 UTC (rev 239399)
@@ -71,6 +71,8 @@
.computed-style-section .computed-property-item .property-traces {
display: none;
width: 100%;
+ margin: 0;
+ padding: 0;
}
.computed-style-section .computed-property-item.expanded .property-traces {
@@ -78,13 +80,22 @@
}
.computed-style-section .computed-property-item.expanded .disclosure-button {
+ vertical-align: top;
background-image: url(../Images/DisclosureTriangles.svg#open-normal);
}
.computed-style-section .computed-property-item .property-trace-item {
display: table-row;
+ margin-left: 1.2em;
}
+.computed-style-section .computed-property-item .property-trace-item::before {
+ content: "\2022";
+ display: inline-block;
+ position: absolute;
+ margin-left: -0.8em;
+}
+
.computed-style-section .computed-property-item .property-trace-item .property.overridden .value {
text-decoration: line-through;
text-decoration-color: hsla(0, 100%, 50%, 0.7);
@@ -110,8 +121,7 @@
}
.computed-style-section .computed-property-item .property {
- display: inline-block;
- white-space: nowrap;
+ display: inline;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
@@ -122,7 +132,6 @@
}
.computed-style-section .computed-property-item .property-trace-item .selector {
- white-space: nowrap;
color: hsl(0, 0%, 50%);
}
@@ -138,11 +147,8 @@
}
.computed-style-section .property-trace-item .property .name,
-.computed-style-section .property-trace-item .property .name + span {
- visibility: hidden;
-}
-
-.computed-style-section .property-trace-item .property .value + span {
+.computed-style-section .property-trace-item .property .colon,
+.computed-style-section .property-trace-item .property .semicolon {
display: none;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js (239398 => 239399)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js 2018-12-19 23:27:45 UTC (rev 239398)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js 2018-12-19 23:28:58 UTC (rev 239399)
@@ -211,11 +211,11 @@
_createTrace(propertyTrace)
{
- let traceElement = document.createElement("div");
+ let traceElement = document.createElement("ul");
traceElement.className = "property-traces";
for (let property of propertyTrace) {
- let traceItemElement = document.createElement("div");
+ let traceItemElement = document.createElement("li");
traceItemElement.className = "property-trace-item";
let leftElement = document.createElement("div");
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js (239398 => 239399)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2018-12-19 23:27:45 UTC (rev 239398)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js 2018-12-19 23:28:58 UTC (rev 239399)
@@ -173,6 +173,7 @@
this._nameElement.textContent = this._property.name;
let colonElement = this._contentElement.appendChild(document.createElement("span"));
+ colonElement.classList.add("colon");
colonElement.textContent = ": ";
this._valueElement = this._contentElement.appendChild(document.createElement("span"));
@@ -198,6 +199,7 @@
}
let semicolonElement = this._contentElement.appendChild(document.createElement("span"));
+ semicolonElement.classList.add("semicolon");
semicolonElement.textContent = ";";
if (this._property.enabled) {
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
