DevTools: make flame chart a web component.

Source/devtools/front_end/inspectorStyle.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 42 matching lines @@
 }
 
 label.dimmed:hover input {
     box-shadow: none;
 }
 
 fieldset[disabled] label:hover input {
     box-shadow: none;
 }
 
-.fill {
+body /deep/ .fill {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }
 
-.view {
+body /deep/ .view {
     position: relative;
     flex: auto;
 }
 
-.hbox {
+body /deep/ .hbox {
     display: flex;
     flex-direction: row !important;
     position: relative;
 }
 
-.vbox {
+body /deep/ .vbox {
     display: flex;
     flex-direction: column !important;
     position: relative;
 }
 
-.flex-auto {
+body /deep/ .flex-auto {
     flex: auto;
 }
 
-.inline-block {
+body /deep/ .inline-block {
     display: inline-block;
 }
 
-.white-background {
+body /deep/ .white-background {
     background-color: white;
 }
 
-.overflow-hidden {
+body /deep/ .overflow-hidden {
     overflow: hidden;
 }
 
 .nowrap,
 .nowrap-below,
 .nowrap-below div,
 .nowrap-below span {
     white-space: nowrap !important;
 }
 
@@ skipping 52 matching lines @@
 }
 
 body.dock-to-bottom .toolbar-background .tabbed-pane-header {
     cursor: ns-resize;
 }
 
 body.dock-to-bottom .toolbar-background .tabbed-pane-header .tabbed-pane-header-tabs {
     cursor: default;
 }
 
-body.platform-windows .toolbar-colors,
-body.platform-windows.inactive .toolbar-colors {
+.platform-windows .toolbar-colors,
+.platform-windows.inactive .toolbar-colors {
     background-image: none;
 }
 
-body.undocked.platform-mac-leopard .toolbar-colors {
-    background-image: linear-gradient(to bottom, rgb(175, 175, 175), rgb(151, 151, 151)) !important;
-    color: #333 !important;
-}
-
-body.undocked.platform-mac-leopard.inactive .toolbar-colors {
-    background-image: linear-gradient(to bottom, rgb(221, 221, 221), rgb(207, 207, 207)) !important;
-    color: #555 !important;
-}
-
-body.undocked.platform-mac-snowleopard .toolbar-colors {
-    background-image: linear-gradient(to bottom, rgb(189, 189, 189), rgb(167, 167, 167)) !important;
-    color: #333 !important;
-}
-
-body.undocked.platform-mac-snowleopard.inactive .toolbar-colors {
-    background-image: linear-gradient(to bottom, rgb(228, 228, 228), rgb(216, 216, 216)) !important;
-    color: #555 !important;
-}
-
 body.undocked.platform-mac .toolbar-colors {
     background-image: linear-gradient(to bottom, rgb(208, 208, 208), rgb(200, 200, 200)) !important;
     color: #333 !important;
 }
 
 body.undocked.platform-mac.inactive .toolbar-colors {
     background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(224, 224, 224)) !important;
     color: #555 !important;
 }
 
@@ skipping 1041 matching lines @@
 }
 
 .auto-complete-text,
 .editing .auto-complete-text {
     color: rgb(128, 128, 128) !important;
     -webkit-user-select: none;
     -webkit-user-modify: read-only;
 }
 
 .panel {
-    display: none;
+    display: none !important;
     overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
 }
 
 .panel.visible {
-    display: flex;
+    display: flex !important;
 }
 
 .panel.extension-panel.visible {
     display: flex !important;
     flex-direction: column;
 }
 
 .extension-view {
     flex: auto;
 }
@@ skipping 981 matching lines @@
     pointer-events: none;
 }
 
 .soft-context-menu-item-mouse-over {
     border-top: 1px solid rgb(56, 121, 217);
     border-bottom: 1px solid rgb(56, 121, 217);
     background-color: rgb(56, 121, 217);
     color: white;
 }
 
-body.platform-mac .soft-context-menu-item-mouse-over {
+.platform-mac .soft-context-menu-item-mouse-over {
     border-top: 1px solid rgb(90, 131, 236);
     border-bottom: 1px solid rgb(18, 88, 233);
     background-image: linear-gradient(to bottom, rgb(100, 140, 243), rgb(36, 101, 243));
 }
 
 .soft-context-menu-item-checkmark {
     color: rgb(108, 108, 108);
     pointer-events: none;
 }
 
@@ skipping 29 matching lines @@
     height: 20px;
     border-radius: 2px;
     color: #303030;
 }
 
 .search-drawer-header input[type="search"].search-config-search:focus {
     border: 1px solid rgb(190, 190, 190);
     outline: none;
 }
 
-body.platform-mac .search-drawer-header input[type="search"].search-config-search {
+.platform-mac .search-drawer-header input[type="search"].search-config-search {
     top: 1px;
 }
 
 .search-drawer-header label.search-config-label {
     margin: auto 0;
     margin-left: 8px;
     color: #303030;
     display: flex;
 }
 
@@ skipping 310 matching lines @@
 
 .progress-bar-container span {
     padding: 6px;
 }
 
 .progress-bar-container progress {
     margin-top: 7px;
     -webkit-flex: 1 0;
 }
 
-body.platform-mac .progress-bar-container progress {
+.platform-mac .progress-bar-container progress {
     margin-top: 6px;
 }
 
 .progress-bar-container button.status-bar-item {
     border-left: none;
     margin-top: 1px;
 }
 
 .elements-tree-outline li.parent::before {
     top: 0 !important;
@@ skipping 175 matching lines @@
 }
 
 .resources-divider-label {
     position: absolute;
     top: 4px;
     right: 3px;
     font-size: 80%;
     white-space: nowrap;
     pointer-events: none;
 }