DevTools: extract the report view to reuse in app manifest and service worker pane.

third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 2014 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.
  */
 
 :host {
     flex: none;
     padding: 0 2px;
 }
@@ skipping 88 matching lines @@
 }
 
 .toolbar-has-glyph .toolbar-text {
     margin-left: 0;
 }
 
 .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.menu-toolbar-item) {
     font-weight: bold;
 }
 
-.toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.menu-toolbar-item).hover {
+.toolbar-render-as-links * {
+    font-weight: initial;
+    color: rgb(17, 85, 204);
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+:not(.toolbar-render-as-links) .toolbar-button:not(.toolbar-has-glyph):not(.toolbar-has-dropdown):not(.menu-toolbar-item).hover {
     background-color: #f3f3f3;
 }
 
 .toolbar-glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-size: 352px 168px;
     background-color: #5a5a5a;
     width: 28px;
     height: 24px;
     flex: none;
     transform: translateX(-2px);
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .toolbar-glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 }
 } /* media */
 
 /* Button */
 
 .toolbar-button:disabled {
     opacity: 0.5;
 }
 
-.toolbar-button:enabled.hover:not(:active) .toolbar-glyph {
+:not(.toolbar-render-as-links) .toolbar-button:enabled.hover:not(:active) .toolbar-glyph {
     background-color: #333;
 }
 
-.toolbar-button:enabled.hover:not(:active) .toolbar-text {
+:not(.toolbar-render-as-links) .toolbar-button:enabled.hover:not(:active) .toolbar-text {
     color: #333;
 }
 
 .toolbar-button.toolbar-state-on .toolbar-glyph,
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled.hover:not(:active),
 .-theme-selection-color {
     background-color: hsl(218, 81%, 59%);
 }
 
 .toolbar-button.toolbar-state-on .toolbar-text,
@@ skipping 328 matching lines @@
 .toolbar-state-active .filter-toolbar-item.toolbar-glyph,
 .toolbar-state-active .block-toolbar-item.toolbar-glyph {
     background-color: rgb(216, 0, 0) !important;
 }
 
 :host-context(.-theme-with-dark-background) .toolbar-state-active .filter-toolbar-item.toolbar-glyph,
 :host-context(.-theme-with-dark-background) .toolbar-state-active .block-toolbar-item.toolbar-glyph,
 :host-context(.-theme-with-dark-background) .toolbar-state-on .record-toolbar-item.toolbar-glyph {
     background-color: hsl(0, 100%, 65%) !important;
 }