DevTools: extract modules (with extensions)

third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js

 // 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.
 
 Timeline.FlameChartStyle = {
   textColor: '#333'
 };
 
 /**
  * @enum {symbol}
  */
 Timeline.TimelineFlameChartEntryType = {
   Frame: Symbol('Frame'),
   Event: Symbol('Event'),
   InteractionRecord: Symbol('InteractionRecord'),
   ExtensionEvent: Symbol('ExtensionEvent')
 };
 
 /**
- * @implements {UI.FlameChartMarker}
+ * @implements {Perf_UI.FlameChartMarker}
  * @unrestricted
  */
 Timeline.TimelineFlameChartMarker = class {
   /**
    * @param {number} startTime
    * @param {number} startOffset
    * @param {!Timeline.TimelineMarkerStyle} style
    */
   constructor(startTime, startOffset, style) {
     this._startTime = startTime;
@@ skipping 58 matching lines @@
       context.setLineDash(this._style.dashStyle);
       context.lineTo(x, context.canvas.height);
       context.stroke();
     }
     context.restore();
   }
 };
 
 /**
  * @implements {Timeline.TimelineModeView}
- * @implements {UI.FlameChartDelegate}
+ * @implements {Perf_UI.FlameChartDelegate}
  * @unrestricted
  */
 Timeline.TimelineFlameChartView = class extends UI.VBox {
   /**
    * @param {!Timeline.TimelineModeViewDelegate} delegate
    * @param {!TimelineModel.TimelineModel} timelineModel
    * @param {!TimelineModel.TimelineFrameModel} frameModel
    * @param {!TimelineModel.TimelineIRModel} irModel
    * @param {!Array<!{title: string, model: !SDK.TracingModel}>} extensionModels
    * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
    */
   constructor(delegate, timelineModel, frameModel, irModel, extensionModels, filters) {
     super();
     this.element.classList.add('timeline-flamechart');
     this._delegate = delegate;
     this._model = timelineModel;
     this._extensionModels = extensionModels;
     this._splitWidget = new UI.SplitWidget(false, false, 'timelineFlamechartMainView', 150);
 
     this._dataProvider = new Timeline.TimelineFlameChartDataProvider(this._model, frameModel, irModel, filters);
     var mainViewGroupExpansionSetting = Common.settings.createSetting('timelineFlamechartMainViewGroupExpansion', {});
-    this._mainView = new UI.FlameChart(this._dataProvider, this, mainViewGroupExpansionSetting);
+    this._mainView = new Perf_UI.FlameChart(this._dataProvider, this, mainViewGroupExpansionSetting);
     this._mainView.alwaysShowVerticalScroll();
     this._mainView.enableRuler(false);
 
     var networkViewGroupExpansionSetting =
         Common.settings.createSetting('timelineFlamechartNetworkViewGroupExpansion', {});
     this._networkDataProvider = new Timeline.TimelineFlameChartNetworkDataProvider(this._model);
-    this._networkView = new UI.FlameChart(this._networkDataProvider, this, networkViewGroupExpansionSetting);
+    this._networkView = new Perf_UI.FlameChart(this._networkDataProvider, this, networkViewGroupExpansionSetting);
     this._networkView.alwaysShowVerticalScroll();
     networkViewGroupExpansionSetting.addChangeListener(this.resizeToPreferredHeights.bind(this));
 
     const networkPane = new UI.VBox();
     networkPane.setMinimumSize(23, 23);
     this._networkView.show(networkPane.element);
     this._splitResizer = networkPane.element.createChild('div', 'timeline-flamechart-resizer');
     this._splitWidget.hideDefaultResizer();
     this._splitWidget.installResizer(this._splitResizer);
 
     this._splitWidget.setMainWidget(this._mainView);
     this._splitWidget.setSidebarWidget(networkPane);
     this._splitWidget.show(this.element);
 
     this._onMainEntrySelected = this._onEntrySelected.bind(this, this._dataProvider);
     this._onNetworkEntrySelected = this._onEntrySelected.bind(this, this._networkDataProvider);
-    this._mainView.addEventListener(UI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
-    this._networkView.addEventListener(UI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
+    this._mainView.addEventListener(Perf_UI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
+    this._networkView.addEventListener(Perf_UI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
     this._nextExtensionIndex = 0;
 
     Bindings.blackboxManager.addChangeListener(this.refreshRecords, this);
   }
 
   /**
    * @override
    */
   dispose() {
-    this._mainView.removeEventListener(UI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
-    this._networkView.removeEventListener(UI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
+    this._mainView.removeEventListener(Perf_UI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
+    this._networkView.removeEventListener(Perf_UI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
     Bindings.blackboxManager.removeChangeListener(this.refreshRecords, this);
   }
 
   /**
    * @override
    * @return {?Element}
    */
   resizerElement() {
     return null;
   }
@@ skipping 20 matching lines @@
    * @override
    */
   refreshRecords() {
     this._dataProvider.reset();
     this._nextExtensionIndex = 0;
     this.extensionDataAdded();
     this._mainView.scheduleUpdate();
 
     this._networkDataProvider.reset();
     if (this._networkDataProvider.isEmpty()) {
-        this._mainView.enableRuler(true);
-        this._splitWidget.hideSidebar();
+      this._mainView.enableRuler(true);
+      this._splitWidget.hideSidebar();
     } else {
-        this._mainView.enableRuler(false);
-        this._splitWidget.showBoth();
-        this.resizeToPreferredHeights();
+      this._mainView.enableRuler(false);
+      this._splitWidget.showBoth();
+      this.resizeToPreferredHeights();
     }
     this._networkView.scheduleUpdate();
   }
 
   /**
    * @override
    */
   extensionDataAdded() {
     while (this._nextExtensionIndex < this._extensionModels.length)
       this._dataProvider.appendExtensionEvents(this._extensionModels[this._nextExtensionIndex++]);
@@ skipping 73 matching lines @@
    * @param {?Timeline.TimelineSelection} selection
    */
   setSelection(selection) {
     var index = this._dataProvider.entryIndexForSelection(selection);
     this._mainView.setSelectedEntry(index);
     index = this._networkDataProvider.entryIndexForSelection(selection);
     this._networkView.setSelectedEntry(index);
   }
 
   /**
-   * @param {!UI.FlameChartDataProvider} dataProvider
+   * @param {!Perf_UI.FlameChartDataProvider} dataProvider
    * @param {!Common.Event} event
    */
   _onEntrySelected(dataProvider, event) {
     var entryIndex = /** @type{number} */ (event.data);
     this._delegate.select(dataProvider.createSelection(entryIndex));
   }
 
   resizeToPreferredHeights() {
     this._splitWidget.setSidebarSize(
-        this._networkDataProvider.preferredHeight() + this._splitResizer.clientHeight + UI.FlameChart.HeaderHeight + 2);
+        this._networkDataProvider.preferredHeight() + this._splitResizer.clientHeight +
+        Perf_UI.FlameChart.HeaderHeight + 2);
   }
 };
 
 /**
  * @unrestricted
  */
 Timeline.TimelineFlameChartView.Selection = class {
   /**
    * @param {!Timeline.TimelineSelection} selection
    * @param {number} entryIndex
    */
   constructor(selection, entryIndex) {
     this.timelineSelection = selection;
     this.entryIndex = entryIndex;
   }
 };