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..0448218f9498c5e15b6062601a1906d7eb281930 100644
--- a/Source/devtools/front_end/elements/computedStyleSidebarPane.css
+++ b/Source/devtools/front_end/elements/computedStyleSidebarPane.css
@@ -5,7 +5,6 @@
  */
 
 .computed-properties {
-    padding: 2px 2px 4px 4px;
     -webkit-user-select: text;
 }
 
@@ -13,47 +12,53 @@
     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;
 }
 
-.computed-style-trace-button:hover {
-    opacity: 1;
+.property-trace {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex-grow: 1;
 }
 
-.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);
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: 0 -1px;
+.property-trace-inactive .property-trace-value {
+    text-decoration: line-through;
 }
 
-@media (-webkit-min-device-pixel-ratio: 1.5) {
-.computed-style-trace-button > .glyph {
-    -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
+.property-trace-selector {
+    color: gray;
 }
-} /* media */
 
-.computed-style-property {
-    position: relative;
-    padding-left: 14px;
+.tree-outline li:hover {
+    background-color: #f3f3f3;
+    cursor: pointer;
+}
+
+/* FIXME: Patch TreeElement styles to use flex for title layout. */
+
+.tree-outline li {
+    display: flex;
+    align-items: center;
+}
+
+.tree-outline li::before {
+    float: none;
+    position: static;
+    top: 0px;
+    flex: none;
+    -webkit-mask-position: -3px -97px;
+    background-color: rgb(110, 110, 110);
+}
+
+.tree-outline li.parent.expanded::before {
+    -webkit-mask-position: -19px -97px;
 }