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

chrome/browser/resources/net_internals/events_view.js

 // 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.
 
 /**
  * EventsView displays a filtered list of all events sharing a source, and
  * a details pane for the selected sources.
  *
  *  +----------------------++----------------+
  *  |      filter box      ||                |
  *  +----------------------+|                |
  *  |                      ||                |
  *  |                      ||                |
  *  |                      ||                |
  *  |                      ||                |
  *  |     source list      ||    details     |
  *  |                      ||    view        |
  *  |                      ||                |
  *  |                      ||                |
  *  |                      ||                |
  *  |                      ||                |
  *  +----------------------++                |
  *  |      action bar      ||                |
  *  +----------------------++----------------+
  *
  * @constructor
  */
 function EventsView() {
-  const tableBodyId = 'eventsListTableBody';
+  const tableBodyId = 'events-view-source-list-tbody';
   const filterInputId = 'filterInput';
   const filterCountId = 'filterCount';
   const deleteSelectedId = 'deleteSelected';
   const deleteAllId = 'deleteAll';
   const selectAllId = 'selectAll';
   const sortByIdId = 'sortById';
   const sortBySourceTypeId = 'sortBySource';
   const sortByDescriptionId = 'sortByDescription';
-  const tabHandlesContainerId = 'detailsTabHandles';
+  const tabHandlesContainerId = 'events-view-details-tab-handles';
   const logTabId = 'detailsLogTab';
   const timelineTabId = 'detailsTimelineTab';
   const detailsLogBoxId = 'detailsLogBox';
   const detailsTimelineBoxId = 'detailsTimelineBox';
-  const topbarId = 'filterBox';
-  const middleboxId = 'eventsBox';
-  const bottombarId = 'actionBox';
+  const topbarId = 'events-view-filter-box';
+  const middleboxId = 'events-view-source-list';
+  const bottombarId = 'events-view-action-box';
   const sizerId = 'splitterBoxForEventDetails';
 
   View.call(this);
 
   // Initialize the sub-views.
   var leftPane = new TopMidBottomView(new DivView(topbarId),
                                       new DivView(middleboxId),
                                       new DivView(bottombarId));
 
   this.detailsView_ = new DetailsView(tabHandlesContainerId,
@@ skipping 595 matching lines @@
                       EventsView.REPAINT_FILTER_COUNTER_TIMEOUT_MS);
   }
 };
 
 EventsView.prototype.repaintFilterCounter_ = function() {
   this.outstandingRepaintFilterCounter_ = false;
   this.filterCount_.innerHTML = '';
   addTextNode(this.filterCount_,
               this.numPostfilter_ + ' of ' + this.numPrefilter_);
 };