DevTools: extract modules (with extensions)

third_party/WebKit/Source/devtools/front_end/perf_ui/FlameChart.js

Index: third_party/WebKit/Source/devtools/front_end/perf_ui/FlameChart.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js b/third_party/WebKit/Source/devtools/front_end/perf_ui/FlameChart.js
similarity index 95%
rename from third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
rename to third_party/WebKit/Source/devtools/front_end/perf_ui/FlameChart.js
index d3479bb22a2da5a0f0b57116d5f41a626bdc6d86..ddf6bf6dff1aab79bdc1bbe8d27be299969f8829 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
+++ b/third_party/WebKit/Source/devtools/front_end/perf_ui/FlameChart.js
@@ -31,9 +31,9 @@
 /**
  * @interface
  */
-UI.FlameChartDelegate = function() {};
+Perf_UI.FlameChartDelegate = function() {};
 
-UI.FlameChartDelegate.prototype = {
+Perf_UI.FlameChartDelegate.prototype = {
   /**
    * @param {number} startTime
    * @param {number} endTime
@@ -50,22 +50,22 @@ UI.FlameChartDelegate.prototype = {
 /**
  * @unrestricted
  */
-UI.FlameChart = class extends UI.ChartViewport {
+Perf_UI.FlameChart = class extends Perf_UI.ChartViewport {
   /**
-   * @param {!UI.FlameChartDataProvider} dataProvider
-   * @param {!UI.FlameChartDelegate} flameChartDelegate
+   * @param {!Perf_UI.FlameChartDataProvider} dataProvider
+   * @param {!Perf_UI.FlameChartDelegate} flameChartDelegate
    * @param {!Common.Setting=} groupExpansionSetting
    */
   constructor(dataProvider, flameChartDelegate, groupExpansionSetting) {
     super();
-    this.registerRequiredCSS('ui_lazy/flameChart.css');
+    this.registerRequiredCSS('perf_ui/flameChart.css');
     this.contentElement.classList.add('flame-chart-main-pane');
     this._flameChartDelegate = flameChartDelegate;
     this._groupExpansionSetting = groupExpansionSetting;
     this._groupExpansionState = groupExpansionSetting && groupExpansionSetting.get() || {};
 
     this._dataProvider = dataProvider;
-    this._calculator = new UI.FlameChart.Calculator(dataProvider);
+    this._calculator = new Perf_UI.FlameChart.Calculator(dataProvider);
 
     this._canvas = /** @type {!HTMLCanvasElement} */ (this.viewportElement.createChild('canvas'));
     this._canvas.tabIndex = 1;
@@ -182,7 +182,7 @@ UI.FlameChart = class extends UI.ChartViewport {
   }
 
   /**
-   * @return {?UI.FlameChart.TimelineData}
+   * @return {?Perf_UI.FlameChart.TimelineData}
    */
   _timelineData() {
     if (!this._dataProvider)
@@ -249,7 +249,7 @@ UI.FlameChart = class extends UI.ChartViewport {
   }
 
   _updateHighlight() {
-    var inDividersBar = this._lastMouseOffsetY < UI.FlameChart.HeaderHeight;
+    var inDividersBar = this._lastMouseOffsetY < Perf_UI.FlameChart.HeaderHeight;
     this._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(this._lastMouseOffsetX) : -1;
     this._updateMarkerHighlight();
 
@@ -327,7 +327,7 @@ UI.FlameChart = class extends UI.ChartViewport {
       return;
     }
     this.hideRangeSelection();
-    this.dispatchEventToListeners(UI.FlameChart.Events.EntrySelected, this._highlightedEntryIndex);
+    this.dispatchEventToListeners(Perf_UI.FlameChart.Events.EntrySelected, this._highlightedEntryIndex);
   }
 
   /**
@@ -407,7 +407,7 @@ UI.FlameChart = class extends UI.ChartViewport {
       indexOnLevel += e.keyCode === keys.Left.code ? -1 : 1;
       e.consume(true);
       if (indexOnLevel >= 0 && indexOnLevel < levelIndexes.length)
-        this.dispatchEventToListeners(UI.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
+        this.dispatchEventToListeners(Perf_UI.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
       return;
     }
     if (e.keyCode === keys.Up.code || e.keyCode === keys.Down.code) {
@@ -426,7 +426,7 @@ UI.FlameChart = class extends UI.ChartViewport {
             !entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel]))
           return;
       }
-      this.dispatchEventToListeners(UI.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
+      this.dispatchEventToListeners(Perf_UI.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
     }
   }
 
@@ -474,7 +474,7 @@ UI.FlameChart = class extends UI.ChartViewport {
     var indexOnLevel = Math.max(entryIndexes.upperBound(cursorTime, comparator) - 1, 0);
 
     /**
-     * @this {UI.FlameChart}
+     * @this {Perf_UI.FlameChart}
      * @param {number} entryIndex
      * @return {boolean}
      */
@@ -701,8 +701,8 @@ UI.FlameChart = class extends UI.ChartViewport {
 
     this._drawGroupHeaders(width, height);
     this._drawMarkers();
-    const headerHeight = this._rulerEnabled ? UI.FlameChart.HeaderHeight : 0;
-    UI.TimelineGrid.drawCanvasGrid(context, this._calculator, 3, headerHeight);
+    const headerHeight = this._rulerEnabled ? Perf_UI.FlameChart.HeaderHeight : 0;
+    Perf_UI.TimelineGrid.drawCanvasGrid(context, this._calculator, 3, headerHeight);
 
     this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
     this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
@@ -814,7 +814,7 @@ UI.FlameChart = class extends UI.ChartViewport {
      * @param {number} x
      * @param {number} y
      * @param {boolean} expanded
-     * @this {UI.FlameChart}
+     * @this {Perf_UI.FlameChart}
      */
     function drawExpansionArrow(x, y, expanded) {
       var arrowHeight = this._arrowSide * Math.sqrt(3) / 2;
@@ -829,8 +829,8 @@ UI.FlameChart = class extends UI.ChartViewport {
     }
 
     /**
-     * @param {function(number, number, !UI.FlameChart.Group, boolean)} callback
-     * @this {UI.FlameChart}
+     * @param {function(number, number, !Perf_UI.FlameChart.Group, boolean)} callback
+     * @this {Perf_UI.FlameChart}
      */
     function forEachGroup(callback) {
       /** @type !Array<{nestingLevel: number, visible: boolean}> */
@@ -857,7 +857,7 @@ UI.FlameChart = class extends UI.ChartViewport {
 
   /**
    * @param {!CanvasRenderingContext2D} context
-   * @param {!UI.FlameChart.Group} group
+   * @param {!Perf_UI.FlameChart.Group} group
    * @return {number}
    */
   _labelWidthForGroup(context, group) {
@@ -935,7 +935,7 @@ UI.FlameChart = class extends UI.ChartViewport {
     var ratio = window.devicePixelRatio;
     context.scale(ratio, ratio);
     context.translate(0, 3);
-    var height = UI.FlameChart.HeaderHeight - 1;
+    var height = Perf_UI.FlameChart.HeaderHeight - 1;
     for (var i = left; i < markers.length; i++) {
       var timestamp = markers[i].startTime();
       if (timestamp > rightBoundary)
@@ -962,7 +962,7 @@ UI.FlameChart = class extends UI.ChartViewport {
   }
 
   /**
-   * @param {?UI.FlameChart.TimelineData} timelineData
+   * @param {?Perf_UI.FlameChart.TimelineData} timelineData
    */
   _processTimelineData(timelineData) {
     if (!timelineData) {
@@ -1009,7 +1009,7 @@ UI.FlameChart = class extends UI.ChartViewport {
     this._groupOffsets = new Uint32Array(groups.length + 1);
 
     var groupIndex = -1;
-    var currentOffset = this._rulerEnabled ? UI.FlameChart.HeaderHeight : 2;
+    var currentOffset = this._rulerEnabled ? Perf_UI.FlameChart.HeaderHeight : 2;
     var visible = true;
     /** @type !Array<{nestingLevel: number, visible: boolean}> */
     var groupStack = [{nestingLevel: -1, visible: true}];
@@ -1201,19 +1201,19 @@ UI.FlameChart = class extends UI.ChartViewport {
   }
 };
 
-UI.FlameChart.HeaderHeight = 15;
+Perf_UI.FlameChart.HeaderHeight = 15;
 
-UI.FlameChart.MinimalTimeWindowMs = 0.5;
+Perf_UI.FlameChart.MinimalTimeWindowMs = 0.5;
 
 /**
  * @interface
  */
-UI.FlameChartDataProvider = function() {};
+Perf_UI.FlameChartDataProvider = function() {};
 
 /**
- * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined), style: !UI.FlameChart.GroupStyle}}
+ * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined), style: !Perf_UI.FlameChart.GroupStyle}}
  */
-UI.FlameChart.Group;
+Perf_UI.FlameChart.Group;
 
 /**
  * @typedef {!{
@@ -1228,29 +1228,29 @@ UI.FlameChart.Group;
  *     useFirstLineForOverview: (boolean|undefined)
  * }}
  */
-UI.FlameChart.GroupStyle;
+Perf_UI.FlameChart.GroupStyle;
 
 /**
  * @unrestricted
  */
-UI.FlameChart.TimelineData = class {
+Perf_UI.FlameChart.TimelineData = class {
   /**
    * @param {!Array<number>|!Uint16Array} entryLevels
    * @param {!Array<number>|!Float32Array} entryTotalTimes
    * @param {!Array<number>|!Float64Array} entryStartTimes
-   * @param {?Array<!UI.FlameChart.Group>} groups
+   * @param {?Array<!Perf_UI.FlameChart.Group>} groups
    */
   constructor(entryLevels, entryTotalTimes, entryStartTimes, groups) {
     this.entryLevels = entryLevels;
     this.entryTotalTimes = entryTotalTimes;
     this.entryStartTimes = entryStartTimes;
     this.groups = groups;
-    /** @type {!Array.<!UI.FlameChartMarker>} */
+    /** @type {!Array.<!Perf_UI.FlameChartMarker>} */
     this.markers = [];
   }
 };
 
-UI.FlameChartDataProvider.prototype = {
+Perf_UI.FlameChartDataProvider.prototype = {
   /**
    * @return {number}
    */
@@ -1274,7 +1274,7 @@ UI.FlameChartDataProvider.prototype = {
   maxStackDepth() {},
 
   /**
-   * @return {?UI.FlameChart.TimelineData}
+   * @return {?Perf_UI.FlameChart.TimelineData}
    */
   timelineData() {},
 
@@ -1338,9 +1338,9 @@ UI.FlameChartDataProvider.prototype = {
 /**
  * @interface
  */
-UI.FlameChartMarker = function() {};
+Perf_UI.FlameChartMarker = function() {};
 
-UI.FlameChartMarker.prototype = {
+Perf_UI.FlameChartMarker.prototype = {
   /**
    * @return {number}
    */
@@ -1366,14 +1366,14 @@ UI.FlameChartMarker.prototype = {
 };
 
 /** @enum {symbol} */
-UI.FlameChart.Events = {
+Perf_UI.FlameChart.Events = {
   EntrySelected: Symbol('EntrySelected')
 };
 
 /**
  * @unrestricted
  */
-UI.FlameChart.ColorGenerator = class {
+Perf_UI.FlameChart.ColorGenerator = class {
   /**
    * @param {!{min: number, max: number}|number=} hueSpace
    * @param {!{min: number, max: number, count: (number|undefined)}|number=} satSpace
@@ -1438,12 +1438,12 @@ UI.FlameChart.ColorGenerator = class {
 };
 
 /**
- * @implements {UI.TimelineGrid.Calculator}
+ * @implements {Perf_UI.TimelineGrid.Calculator}
  * @unrestricted
  */
-UI.FlameChart.Calculator = class {
+Perf_UI.FlameChart.Calculator = class {
   /**
-   * @param {!UI.FlameChartDataProvider} dataProvider
+   * @param {!Perf_UI.FlameChartDataProvider} dataProvider
    */
   constructor(dataProvider) {
     this._dataProvider = dataProvider;
@@ -1459,7 +1459,7 @@ UI.FlameChart.Calculator = class {
   }
 
   /**
-   * @param {!UI.FlameChart} mainPane
+   * @param {!Perf_UI.FlameChart} mainPane
    */
   _updateBoundaries(mainPane) {
     this._totalTime = mainPane._dataProvider.totalTime();