DevTools: migrate ComputedStyleWidget to shadow

third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css

Index: third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css
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 a04c7aafdbabb8c40aa702ae840db3e0d23fc9ea..d6055adf0fb559d7f4edc8066c6de9a47b37aff3 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css
+++ b/third_party/WebKit/Source/devtools/front_end/elements/computedStyleSidebarPane.css
@@ -9,112 +9,28 @@
     flex-shrink: 0;
 }
 
-.computed-style-property {
-    display: flex;
-    overflow: hidden;
-    flex: auto;
-}
-
-.computed-style-property .property-name {
-    min-width: 5em;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex-shrink: 1;
-    flex-basis: 16em;
-    flex-grow: 1;
-}
-
-.computed-style-property .property-value {
-    margin-left: 2em;
-    position: relative;
-    display: flex;
+.styles-sidebar-pane-toolbar {
+    border-bottom: 1px solid #eee;
     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 {
-    display: block;
-    margin-top: -2px;
-}
-
-.goto-source-icon {
-    background-color: #5a5a5a;
-    display: none;
-    position: absolute;
-    left: -16px;
-}
-
-.goto-source-icon:hover {
-    background-color: #333;
-}
-
-.computed-style-property-inherited {
-    opacity: 0.5;
 }
 
-.trace-link {
-    user-select: none;
-    float: right;
-    padding-left: 1em;
-    position: relative;
-    z-index: 1;
-}
-
-.property-trace {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex-grow: 1;
-}
-
-.property-trace-selector {
-    color: gray;
-    padding-left: 2em;
-}
-
-.property-trace-value {
-    position: relative;
-    display: inline-block;
-    margin-left: 2em;
-}
-
-.property-trace-inactive .property-trace-value::before {
-    position: absolute;
-    content: ".";
-    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
-    top: 0;
-    bottom: 5px;
-    left: 0;
-    right: 0;
-}
-
-.tree-outline li.odd-row {
-    position: relative;
-    background-color: #F5F5F5;
-}
-
-.tree-outline, .tree-outline ol {
-    padding-left: 0;
-}
-
-.tree-outline li:hover {
-    background-color: rgb(235, 242, 252);
-    cursor: pointer;
+.styles-sidebar-pane-filter-box {
+    flex: auto;
+    display: flex;
 }
 
-.tree-outline li::before {
+.styles-sidebar-pane-filter-box > input {
+    outline: none !important;
+    border: none;
+    width: 100%;
+    background: transparent;
     margin-left: 4px;
 }
 
-.delimeter {
-    color: transparent;
+.styles-filter-engaged {
+    background-color: rgba(255, 255, 0, 0.5);
 }
 
-.delimeter::selection {
-    color: transparent;
+:host-context(.-theme-with-dark-background) .styles-filter-engaged {
+    background-color: hsla(133, 100%, 30%, 0.5);
 }