Attachment 357657 Details for Bug 192578 – Patch

[patch] Patch

patch.txt (text/plain), 5.16 KB, created by Nikita Vasilyev on 2018-12-18 22:47:20 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Nikita Vasilyev

Created: 2018-12-18 22:47:20 PST

Size: 5.16 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 1dca55b9e74..af75c50aec8 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,30 @@
>+2018-12-18  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 NOBODY (OOPS!).
>+
>+        * UserInterface/Views/ComputedStyleSection.css:
>+        (.computed-style-section .computed-property-item .disclosure-button):
>+        When the property is long and takes more than one line, make sure the disclosure bottom stays on the first line.
>+
>+        (.computed-style-section .computed-property-item .property-traces):
>+        (.computed-style-section .computed-property-item.expanded .disclosure-button):
>+        When the property is long and takes more than one line, make sure the disclosure bottom stays on the first line.
>+
>+        (.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):
>+
> 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..320b1f9be0a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/ComputedStyleSection.css
>@@ -52,6 +52,7 @@
> 
> .computed-style-section .computed-property-item .disclosure-button {
>     display: inline-block;
>+    vertical-align: top;
>     width: var(--disclosure-button-size);
>     height: var(--disclosure-button-size);
>     -webkit-margin-start: calc(-1 * var(--disclosure-button-size));
>@@ -71,6 +72,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 +81,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: "â¢";
>+    display: inline-block;
>+    width: 0.8em;
>+    margin-left: -0.8em;
> }
> 
> .computed-style-section .computed-property-item .property-trace-item .property.overridden .value {
>@@ -110,8 +122,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 +133,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%);
> }
> 
>@@ -139,7 +149,7 @@ 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;
>+    display: none;
> }
> 
> .computed-style-section .property-trace-item .property .value + span {
>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");

Flags:

hi: review+

Actions: View | Formatted Diff | Diff

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