DevTools: make ElementsTreeOutline shadow dom-based.

Source/devtools/front_end/inspectorCommon.css

Index: Source/devtools/front_end/inspectorCommon.css
diff --git a/Source/devtools/front_end/inspectorCommon.css b/Source/devtools/front_end/inspectorCommon.css
index 439f6617a14543eeae3751b32c41cbd735510e16..a746fe1b065c7f364a98e276a608d978be16b4b3 100644
--- a/Source/devtools/front_end/inspectorCommon.css
+++ b/Source/devtools/front_end/inspectorCommon.css
@@ -3,51 +3,84 @@ html {
 }
 
 body {
-    cursor: default;
-    position: relative;
     height: 100%;
     width: 100%;
+    position: relative;
     overflow: hidden;
+    margin: 0;
+}
+
+body /deep/ .component-root {
+    cursor: default;
     font-family: Lucida Grande, sans-serif;
     font-size: 12px;
-    margin: 0;
     tab-size: 4;
     -webkit-user-select: none;
     color: #222;
 }
 
-body.platform-linux {
-  color: rgb(48, 57, 66);
-  font-family: Ubuntu, Arial, sans-serif;
+body.platform-linux /deep/ .component-root {
+    color: rgb(48, 57, 66);
+    font-family: Ubuntu, Arial, sans-serif;
+}
+
+body.platform-mac /deep/ .component-root {
+    color: rgb(48, 57, 66);
+    font-family: 'Lucida Grande', sans-serif;
 }
 
-body.platform-mac {
-  color: rgb(48, 57, 66);
-  font-family: 'Lucida Grande', sans-serif;
+body.platform-windows /deep/ .component-root {
+    font-family: 'Segoe UI', Tahoma, sans-serif;
 }
 
-body.platform-windows {
-  font-family: 'Segoe UI', Tahoma, sans-serif;
+body.platform-mac /deep/ .monospace,
+body.platform-mac /deep/ .source-code {
+    font-size: 11px !important;
+    font-family: Menlo, monospace;
+}
+
+body.platform-mac.platform-mac-tiger /deep/ .monospace,
+body.platform-mac.platform-mac-tiger /deep/ .source-code {
+    font-size: 10px !important;
+    font-family: Monaco, monospace;
+}
+
+body.platform-windows /deep/ .monospace,
+body.platform-windows /deep/ .source-code {
+    font-size: 12px !important;
+    font-family: Consolas, Lucida Console, monospace;
+}
+
+body.platform-linux /deep/ .monospace,
+body.platform-linux /deep/ .source-code {
+    font-size: 11px !important;
+    font-family: dejavu sans mono, monospace;
+}
+
+body /deep/ .source-code {
+    font-family: monospace;
+    font-size: 11px !important;
+    white-space: pre-wrap;
 }
 
-* {
+body /deep/ * {
     box-sizing: border-box;
 }
 
-:focus {
+body /deep/ :focus {
     outline: none;
 }
 
-img {
+body /deep/ img {
     -webkit-user-drag: none;
 }
 
-iframe,
-a img {
+body /deep/ iframe,
+body /deep/ a img {
     border: none;
 }
 
-iframe.view {
+body /deep/ iframe.view {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -57,16 +90,16 @@ iframe.view {
     bottom: 0;
 }
 
-.hidden {
+body /deep/ .hidden {
     display: none !important;
 }
 
-.monospace {
+body /deep/ .monospace {
     font-size: 10px !important;
     font-family: monospace;
 }
 
-.highlighted-search-result {
+body /deep/ .highlighted-search-result {
     border-radius: 1px;
     padding: 1px;
     margin: -1px;