DevTools: [CSSP] do not wrap computed properties.

BUG=587770
R=pfeldman, dgozman

Review URL: https://codereview.chromium.org/1739183002

Cr-Commit-Position: refs/heads/master@{#378020}

3 files changed, 23 insertions, 8 deletions

diff --git a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/color-swatch-expected.txt b/third_party/WebKit/LayoutTests/inspector/elements/styles-1/color-swatch-expected.txt
index faa2375..9177023 100644
--- a/third_party/WebKit/LayoutTests/inspector/elements/styles-1/color-swatch-expected.txt
+++ b/third_party/WebKit/LayoutTests/inspector/elements/styles-1/color-swatch-expected.txt
@@ -11,6 +11,6 @@ Has popover before click: false
 Has popover after click: true
 
 Running: testColorSwatchInComputedRules
-Initial color value: rgb(255, 0, 0);
-After shift-click color value: hsl(0, 100%, 50%);
+Initial color value: rgb(255, 0, 0)
+After shift-click color value: hsl(0, 100%, 50%)
 
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js b/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
index 9aab9a7..bc6dced 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js
@@ -167,9 +167,11 @@ WebInspector.ComputedStyleWidget.prototype = {
             colon.textContent = ":";
             propertyNameElement.appendChild(colon);
 
-            var propertyValueElement = renderer.renderValue();
-            propertyValueElement.classList.add("property-value");
-            propertyElement.appendChild(propertyValueElement);
+            var propertyValueElement = propertyElement.createChild("span", "property-value");
+
+            var propertyValueText = renderer.renderValue();
+            propertyValueText.classList.add("property-value-text");
+            propertyValueElement.appendChild(propertyValueText);
 
             var semicolon = createElementWithClass("span", "delimeter");
             semicolon.textContent = ";";
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css b/third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css
index d453c83..3482896 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css
+++ b/third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css
@@ -10,18 +10,31 @@
 
 .computed-style-property {
     display: flex;
-    flex-wrap: wrap;
+    overflow: hidden;
+    flex: auto;
 }
 
 .computed-style-property .property-name {
-    width: 16em;
+    min-width: 5em;
     text-overflow: ellipsis;
     overflow: hidden;
+    flex-shrink: 1;
+    flex-basis: 16em;
+    flex-grow: 1;
 }
 
 .computed-style-property .property-value {
-    min-width: 5em;
+    margin-left: 2em;
     position: relative;
+    display: flex;
+    flex-shrink: 0;
+    flex-basis: 5em;
+    flex-grow: 10;
+}
+
+.computed-style-property .property-value-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .tree-outline li:hover .goto-source-icon {