Extract the CSS for the net_internals EventsView and LogsView to separate files. Also rename thes...

chrome/browser/resources/net_internals/events_view.css

 /*
 Copyright (c) 2011 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.
 */
 
-* {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-}
-body {
-  font-family: sans-serif;
-}
-
-#filterBox {
+#events-view-filter-box {
   background: #efefef;
   padding: 5px;
   border-bottom: 1px solid gray;
   overflow: hidden;
 }
 
-#filterBox * {
+#events-view-filter-box * {
   white-space: nowrap;
   font-family: sans-serif;
   font-size: 12px;
 }
 
-#filterBox input {
+#events-view-filter-box input {
   width: 100%;
 }
 
-#actionBox {
+#events-view-action-box {
   background: #efefef;
   white-space: nowrap;
   border-top: 1px solid gray;
   overflow: hidden;
 }
 
-#eventsBox {
+#events-view-source-list {
   overflow-x: hidden;
   overflow-y: auto
 }
 
-#detailsBox {
-  overflow: auto;
-}
-
-.splitterBox {
-  background: #bfbfbf;
-  border-left: 1px inset black;
-  border-right: 1px solid black;
-  position:absolute;
-  width: 8px;
-  cursor: col-resize;
-  user-select: none;
-}
-
-#eventsListTable {
+#events-view-source-list-table {
   cursor: pointer;
 }
 
-#eventsListTable thead td {
+#events-view-source-list-table thead td {
   text-align: left;
   font-weight: bold;
   background: rgb(229, 236, 249);
 }
 
-#eventsListTable td {
+#events-view-source-list-table td {
   padding: 3px;
   border-left: 1px solid #afafaf;
   border-bottom: 1px solid #afafaf;
   text-overflow: ellipsis;
   font-size: 12px;
   white-space: nowrap;
 }
 
-#eventsListTableBody .mouseover {
+#events-view-source-list-tbody .mouseover {
   background: rgb(244,244,255);
 }
 
-#eventsListTableBody .selected {
+#events-view-source-list-tbody .selected {
   background: #C3D9FF;
 }
 
-#eventsListTableBody .error {
+#events-view-source-list-tbody .error {
   background: #FFF5F5;
 }
 
-#eventsListTableBody .inactive {
+#events-view-source-list-tbody .inactive {
   background: #F5FFF5;
 }
 
-#eventsListTableBody .source_CONNECT_JOB {
+#events-view-source-list-tbody .source_CONNECT_JOB {
   color: blue;
 }
 
-#eventsListTableBody .source_HOST_RESOLVER_IMPL_JOB,
-#eventsListTableBody .source_HOST_RESOLVER_IMPL_REQUEST {
+#events-view-source-list-tbody .source_HOST_RESOLVER_IMPL_JOB,
+#events-view-source-list-tbody .source_HOST_RESOLVER_IMPL_REQUEST {
   color: #206060;
 }
 
-#eventsListTableBody .source_DISK_CACHE_ENTRY,
-#eventsListTableBody .source_MEMORY_CACHE_ENTRY {
+#events-view-source-list-tbody .source_DISK_CACHE_ENTRY,
+#events-view-source-list-tbody .source_MEMORY_CACHE_ENTRY {
   color: #707070;
 }
 
-#eventsListTableBody .source_SOCKET {
+#events-view-source-list-tbody .source_SOCKET {
   color: purple;
 }
 
-#eventsListTableBody .source_INIT_PROXY_RESOLVER {
+#events-view-source-list-tbody .source_INIT_PROXY_RESOLVER {
   color: green;
 }
 
-#eventsListTableBody .source_NONE {
+#events-view-source-list-tbody .source_NONE {
   color: red;
 }
 
-.logCellEmpty {
-  background-color: gray;
-}
-
-.logCellText, .logCellLog {
-  background-color: white;
-}
-
-.logRowCollapsed .logCellLog {
-  display: none;
-}
-
-.logRowExpanded .logCellLog {
-  display: table-cell;
-}
-
-.logTableButtonColumn {
-  text-align: center;
-}
-
-.logButton {
-  width: 85px;
-}
-
-.logsGlobalButton {
-  width: 135px;
-  float: left;
-  margin: 5px;
-  margin-top: 0;
-}
-
-#logTable td {
-  padding: 0 5px;
-  padding-top: 3px;
-  vertical-align: top;
-  line-height: 17px;
-  font-family: 'Courier New', monospace;
-  white-space: pre;
-  font-size: 12px;
-}
-
-#logTableHeaderRow th {
-  text-align: left;
-}
-
-#logsTabContent {
-  padding: 5px;
-}
-
-.tabSwitcher {
+.events-view-tab-switcher {
   margin-top: 10px;
   margin-left: 10px;
 }
 
-.tabSwitcher th {
+.events-view-tab-switcher th {
   background: rgb(229,236,249);
   cursor: pointer;
   background-clip: border-box;
   border-top-left-radius: 5px 5px;
   border-top-right-radius: 5px 5px;
   padding-left: 4px;
   padding-top: 4px;
   padding-right: 4px;
   font-size: 12px;
   margin-left: 30px;
 }
 
-.tabSwitcher th.selected, .tabSwitcherLine {
+.events-view-tab-switcher th.selected, .events-view-tab-switcher-line {
   background: rgb(195,217,255);
 }
 
-.tabSwitcherLine {
+.events-view-tab-switcher-line {
   height: 10px;
 }
 
-#detailsTabHandles {
+#events-view-details-tab-handles {
   border: 1px solid white;
 }
-
-.logSourceEntry {
-  margin: 5px;
-}
-
-.logSourceEntry * p {
-  font-weight: bold;
-  font-size: 12px;
-}
-
-.logSourceEntry * td {
-  font-size: 10px;
-}
-
-#detailsLogBox,
-#detailsTimelineBox,
-#httpCacheTabContent,
-#proxyTabContent,
-#dataTabContent,
-#dnsTabContent,
-#socketsTabContent,
-#spdyTabContent,
-#serviceProvidersTabContent,
-#testTabContent,
-#hstsTabContent,
-#httpThrottlingTabContent,
-#prerenderTabContent,
-#logsTabContent {
-  overflow: auto;
-  padding: 10px;
-}
-
-#proxyTabContent td,
-#proxyTabContent th {
-  font-size: 12px;
-}
-
-/*
- * Styles for TABLE that uses a thin collapsed border.
- */
-table.styledTable {
-  border-collapse:collapse;
-}
-
-table.styledTable,
-.styledTable th,
-.styledTable td {
-  border: 1px solid #777;
-  padding-right: 4px;
-  padding-left: 4px;
-}
-
-.styledTable th {
-  background: rgb(224,236,255);
-}
-
-.styledTable th.title {
-  background: rgb(255,217,217);
-}
-
-/*
- * This is the box in the top right of the Data tab which shows how many
- * events have been captured so far.
- */
-.capturingBox {
-  border: 1px dashed black;
-  display: inline-block;
-  text-align: left;
-  padding: 5px;
-}
-
-/**
- * Styling for an emphasized button.
- */
-.bigButton {
-  font-size: 100%;
-  font-weight: bold;
-}
-
-/**
- * Styling for text indicating a potential problem or error state.
- */
-.warningText {
-  color: red;
-}
-
-#statusViewForCapture {
-  background: red;
-  color: #eee;
-  padding: 4px;
-}
-
-#statusViewForFile {
-  background: #88c;
-  color: #eee;
-  padding: 4px;
-}