DevTools: revert back ComputedStylesSidebar

Source/devtools/front_end/elements/computedStyleSidebarPane.css

Index: Source/devtools/front_end/elements/computedStyleSidebarPane.css
diff --git a/Source/devtools/front_end/elements/computedStyleSidebarPane.css b/Source/devtools/front_end/elements/computedStyleSidebarPane.css
index 290512dc47b436264d67113edf9207673b7c701b..d88d954508230caed3fbf345f5aab604d20f4102 100644
--- a/Source/devtools/front_end/elements/computedStyleSidebarPane.css
+++ b/Source/devtools/front_end/elements/computedStyleSidebarPane.css
@@ -5,55 +5,95 @@
  */
 
 .computed-properties {
-    padding: 2px 2px 4px 4px;
     -webkit-user-select: text;
 }
 
+.computed-style-property {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.computed-style-property .property-name {
+    width: 16em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.computed-style-property .property-value {
+    min-width: 5em;
+}
+
 .computed-style-property-inherited {
     opacity: 0.5;
 }
 
-.computed-style-trace-button {
-    display: none;
-    position: absolute;
-    border: 0 transparent none;
-    background-color: transparent;
-    height: 25px;
-    width: 26px;
-    transform: scale(0.75);
-    left: -10px;
-    top: -6px;
-    opacity: 0.5;
+.trace-link {
+    float: right;
+    padding-left: 1em;
+    position: relative;
+    z-index: 1;
 }
 
-.computed-style-property:hover .computed-style-trace-button {
-    display: inline-block;
+.trace-link a::before {
+    content: attr(data-uncopyable);
+    text-decoration: underline;
+}
+
+.property-trace {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex-grow: 1;
 }
 
-.computed-style-trace-button:hover {
-    opacity: 1;
+.property-trace-selector {
+    color: gray;
+    padding-left: 2em;
 }
 
-.computed-style-trace-button > .glyph {
-    -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
-    -webkit-mask-size: 352px 168px;
-    -webkit-mask-position: -224px -24px;
-    background-color: rgba(0, 0, 0, 0.75);
+.property-trace-value {
+    position: relative;
+    display: inline-block;
+}
+
+.property-trace-inactive .property-trace-value::before {
     position: absolute;
+    content: ".";
+    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
     top: 0;
-    right: 0;
-    bottom: 0;
+    bottom: 5px;
     left: 0;
-    margin: 0 -1px;
+    right: 0;
+}
+
+.tree-outline li.odd-row {
+    position: relative;
+    background-color: #F5F5F5;
 }
 
-@media (-webkit-min-device-pixel-ratio: 1.5) {
-.computed-style-trace-button > .glyph {
-    -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
+.tree-outline, .tree-outline ol {
+    padding-left: 0;
 }
-} /* media */
 
-.computed-style-property {
-    position: relative;
-    padding-left: 14px;
+.tree-outline li:hover {
+    background-color: rgb(235, 242, 252);
+    cursor: pointer;
+}
+
+/* FIXME: Patch TreeElement styles to use flex for title layout. */
+
+.tree-outline li {
+    display: flex;
+    align-items: baseline;
+}
+
+.tree-outline li::before {
+    float: none;
+    flex: none;
+    -webkit-mask-position: -3px -97px;
+    background-color: rgb(110, 110, 110);
+    margin-left: 4px;
+}
+
+.tree-outline li.parent.expanded::before {
+    -webkit-mask-position: -19px -97px;
 }