Attachment 357728 Details for Bug 192578 – Patch

[patch] Patch

patch.txt (text/plain), 5.91 KB, created by Nikita Vasilyev on 2018-12-19 14:51:36 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2018-12-19 14:51:36 PST

Size: 5.91 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 1dca55b9e74..c7b95c21ef8 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,26 @@
>+2018-12-19  Nikita Vasilyev  <nvasilyev@apple.com>
>+
>+        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  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: Layers: increase default column width for other localizations
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
>index bc7729c3269..039c455e8da 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
>@@ -71,6 +71,8 @@ body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button
> .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,11 +80,20 @@ body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button
> }
> 
> .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 {
>@@ -110,8 +121,7 @@ body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button
> }
> 
> .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 @@ body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button
> }
> 
> .computed-style-section .computed-property-item .property-trace-item .selector {
>-    white-space: nowrap;
>     color: hsl(0, 0%, 50%);
> }
> 
>@@ -138,11 +147,8 @@ body[dir=rtl] .computed-style-section .computed-property-item .disclosure-button
> }
> 
> .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;
> }
> 
>diff --git a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js
>index 7d18f48f97d..a2072202b79 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.js
>@@ -211,11 +211,11 @@ WI.ComputedStyleSection = class ComputedStyleSection extends WI.View
> 
>     _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");
>diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>index 9ae9fa9112f..349cbd2c0af 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetStyleProperty.js
>@@ -173,6 +173,7 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
>         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 @@ WI.SpreadsheetStyleProperty = class SpreadsheetStyleProperty extends WI.Object
>         }
> 
>         let semicolonElement = this._contentElement.appendChild(document.createElement("span"));
>+        semicolonElement.classList.add("semicolon");
>         semicolonElement.textContent = ";";
> 
>         if (this._property.enabled) {

Actions: View | Formatted Diff | Diff

Attachments on bug 192578: 357030 | 357657 | 357658 | 357728