DevTools: extract a component for layer viewer

third_party/WebKit/Source/devtools/front_end/layer_viewer/paintProfiler.css

+/*
+ * Copyright 2016 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.paint-profiler-overview {
+    background-color: #eee;
+}
+
+.paint-profiler-canvas-container {
+    flex: auto;
+    position: relative;
+}
+
+.paint-profiler-pie-chart {
+    width: 60px !important;
+    height: 60px !important;
+    padding: 2px;
+    overflow: hidden;
+    font-size: 10px;
+}
+
+.paint-profiler-canvas-container canvas {
+    z-index: 200;
+    background-color: white;
+    opacity: 0.95;
+    height: 100%;
+    width: 100%;
+}
+
+.paint-profiler-canvas-container .overview-grid-dividers-background,
+.paint-profiler-canvas-container .overview-grid-window {
+    bottom: 0;
+    height: auto;
+}
+
+.paint-profiler-canvas-container .overview-grid-window-resizer {
+    z-index: 2000;
+}
+
+.paint-profiler-image-view {
+    overflow: hidden;
+}
+
+.paint-profiler-image-view .paint-profiler-image-container {
+    -webkit-transform-origin: 0 0;
+}
+
+.paint-profiler-image-view .paint-profiler-image-container div {
+    border-color: rgba(100, 100, 100, 0.4);
+    border-style: solid;
+    z-index: 100;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.paint-profiler-image-view img {
+    border: solid 1px black;
+}