DevTools: extract modules (with extensions)

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

 /**
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 13 matching lines @@
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @interface
  */
-UI.FlameChartDelegate = function() {};
+Perf_UI.FlameChartDelegate = function() {};
 
-UI.FlameChartDelegate.prototype = {
+Perf_UI.FlameChartDelegate.prototype = {
   /**
    * @param {number} startTime
    * @param {number} endTime
    */
   requestWindowTimes(startTime, endTime) {},
 
   /**
    * @param {number} startTime
    * @param {number} endTime
    */
   updateRangeSelection(startTime, endTime) {},
 };
 
 /**
  * @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;
     this.setDefaultFocusedElement(this._canvas);
     this._canvas.addEventListener('mousemove', this._onMouseMove.bind(this), false);
     this._canvas.addEventListener('mouseout', this._onMouseOut.bind(this), false);
     this._canvas.addEventListener('click', this._onClick.bind(this), false);
     this._canvas.addEventListener('keydown', this._onKeyDown.bind(this), false);
 
     this._entryInfo = this.viewportElement.createChild('div', 'flame-chart-entry-info');
@@ skipping 96 matching lines @@
 
   _resetCanvas() {
     var ratio = window.devicePixelRatio;
     this._canvas.width = this._offsetWidth * ratio;
     this._canvas.height = this._offsetHeight * ratio;
     this._canvas.style.width = this._offsetWidth + 'px';
     this._canvas.style.height = this._offsetHeight + 'px';
   }
 
   /**
-   * @return {?UI.FlameChart.TimelineData}
+   * @return {?Perf_UI.FlameChart.TimelineData}
    */
   _timelineData() {
     if (!this._dataProvider)
       return null;
     var timelineData = this._dataProvider.timelineData();
     if (timelineData !== this._rawTimelineData || timelineData.entryStartTimes.length !== this._rawTimelineDataLength)
       this._processTimelineData(timelineData);
     return this._rawTimelineData;
   }
 
@@ skipping 46 matching lines @@
       return;
     if (this._coordinatesToGroupIndex(event.offsetX, event.offsetY) >= 0) {
       this.hideHighlight();
       this.viewportElement.style.cursor = 'pointer';
       return;
     }
     this._updateHighlight();
   }
 
   _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();
 
     var entryIndex = this._coordinatesToEntryIndex(this._lastMouseOffsetX, this._lastMouseOffsetY);
     if (entryIndex === -1) {
       this.hideHighlight();
       return;
     }
     if (this.isDragging())
       return;
@@ skipping 57 matching lines @@
     // we skip the click. Otherwise we jump to the sources.
     const clickThreshold = 5;
     if (this.maxDragOffset() > clickThreshold)
       return;
     var groupIndex = this._coordinatesToGroupIndex(event.offsetX, event.offsetY);
     if (groupIndex >= 0) {
       this._toggleGroupVisibility(groupIndex);
       return;
     }
     this.hideRangeSelection();
-    this.dispatchEventToListeners(UI.FlameChart.Events.EntrySelected, this._highlightedEntryIndex);
+    this.dispatchEventToListeners(Perf_UI.FlameChart.Events.EntrySelected, this._highlightedEntryIndex);
   }
 
   /**
    * @param {number} groupIndex
    */
   _toggleGroupVisibility(groupIndex) {
     if (!this._isGroupCollapsible(groupIndex))
       return;
     var groups = this._rawTimelineData.groups;
     var group = groups[groupIndex];
@@ skipping 59 matching lines @@
     }
 
     var keys = UI.KeyboardShortcut.Keys;
     if (e.keyCode === keys.Left.code || e.keyCode === keys.Right.code) {
       var level = timelineData.entryLevels[this._selectedEntryIndex];
       var levelIndexes = this._timelineLevels[level];
       var indexOnLevel = levelIndexes.lowerBound(this._selectedEntryIndex);
       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) {
       e.consume(true);
       var level = timelineData.entryLevels[this._selectedEntryIndex];
       level += e.keyCode === keys.Up.code ? -1 : 1;
       if (level < 0 || level >= this._timelineLevels.length)
         return;
       var entryTime = timelineData.entryStartTimes[this._selectedEntryIndex] +
           timelineData.entryTotalTimes[this._selectedEntryIndex] / 2;
       var levelIndexes = this._timelineLevels[level];
       var indexOnLevel = levelIndexes.upperBound(entryTime, timeComparator) - 1;
       if (!entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel])) {
         ++indexOnLevel;
         if (indexOnLevel >= levelIndexes.length ||
             !entriesIntersect(this._selectedEntryIndex, levelIndexes[indexOnLevel]))
           return;
       }
-      this.dispatchEventToListeners(UI.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
+      this.dispatchEventToListeners(Perf_UI.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
     }
   }
 
   /**
    * @param {number} x
    * @return {number}
    */
   _cursorTime(x) {
     return (x + this._pixelWindowLeft - this._paddingLeft) * this._pixelToTime + this._minimumBoundary;
   }
@@ skipping 27 matching lines @@
      * @param {number} time
      * @param {number} entryIndex
      * @return {number}
      */
     function comparator(time, entryIndex) {
       return time - entryStartTimes[entryIndex];
     }
     var indexOnLevel = Math.max(entryIndexes.upperBound(cursorTime, comparator) - 1, 0);
 
     /**
-     * @this {UI.FlameChart}
+     * @this {Perf_UI.FlameChart}
      * @param {number} entryIndex
      * @return {boolean}
      */
     function checkEntryHit(entryIndex) {
       if (entryIndex === undefined)
         return false;
       var startTime = entryStartTimes[entryIndex];
       var duration = entryTotalTimes[entryIndex];
       if (isNaN(duration)) {
         var dx = (startTime - cursorTime) / this._pixelToTime;
@@ skipping 206 matching lines @@
       if (!text || !text.length)
         continue;
       context.fillStyle = this._dataProvider.textColor(entryIndex);
       context.fillText(text, barX + textPadding, barY + textBaseHeight);
     }
 
     context.restore();
 
     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);
     this._updateMarkerHighlight();
   }
 
   /**
    * @param {number} width
    * @param {number} height
    */
@@ skipping 91 matching lines @@
      */
     function hLine(y) {
       context.moveTo(0, y);
       context.lineTo(width, y);
     }
 
     /**
      * @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;
       var arrowCenterOffset = Math.round(arrowHeight / 2);
       context.save();
       context.translate(x, y);
       context.rotate(expanded ? Math.PI / 2 : 0);
       context.moveTo(-arrowCenterOffset, -this._arrowSide / 2);
       context.lineTo(-arrowCenterOffset, this._arrowSide / 2);
       context.lineTo(arrowHeight - arrowCenterOffset, 0);
       context.restore();
     }
 
     /**
-     * @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}> */
       var groupStack = [{nestingLevel: -1, visible: true}];
       for (var i = 0; i < groups.length; ++i) {
         var groupTop = groupOffsets[i];
         var group = groups[i];
         if (groupTop - group.style.padding > top + height)
           break;
         var firstGroup = true;
         while (groupStack.peekLast().nestingLevel >= group.style.nestingLevel) {
           groupStack.pop();
           firstGroup = false;
         }
         var parentGroupVisible = groupStack.peekLast().visible;
         var thisGroupVisible = parentGroupVisible && (!this._isGroupCollapsible(i) || group.expanded);
         groupStack.push({nestingLevel: group.style.nestingLevel, visible: thisGroupVisible});
         if (!parentGroupVisible || groupTop + group.style.height < top)
           continue;
         callback(groupTop, i, group, firstGroup);
       }
     }
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
-   * @param {!UI.FlameChart.Group} group
+   * @param {!Perf_UI.FlameChart.Group} group
    * @return {number}
    */
   _labelWidthForGroup(context, group) {
     return UI.measureTextWidth(context, group.name) + this._expansionArrowIndent * (group.style.nestingLevel + 1) +
         2 * this._headerLabelXPadding;
   }
 
   /**
    * @param {number} y
    * @param {number} startLevel
@@ skipping 57 matching lines @@
   _drawMarkers() {
     var markers = this._timelineData().markers;
     var left = this._markerIndexBeforeTime(this._calculator.minimumBoundary());
     var rightBoundary = this._calculator.maximumBoundary();
 
     var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getContext('2d'));
     context.save();
     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)
         break;
       markers[i].draw(context, this._calculator.computePosition(timestamp), height, this._timeToPixel);
     }
     context.restore();
   }
 
   _updateMarkerHighlight() {
     var element = this._markerHighlighElement;
     if (element.parentElement)
       element.remove();
     var markerIndex = this._highlightedMarkerIndex;
     if (markerIndex === -1)
       return;
     var marker = this._timelineData().markers[markerIndex];
     var barX = this._timeToPositionClipped(marker.startTime());
     element.title = marker.title();
     var style = element.style;
     style.left = barX + 'px';
     style.backgroundColor = marker.color();
     this.viewportElement.appendChild(element);
   }
 
   /**
-   * @param {?UI.FlameChart.TimelineData} timelineData
+   * @param {?Perf_UI.FlameChart.TimelineData} timelineData
    */
   _processTimelineData(timelineData) {
     if (!timelineData) {
       this._timelineLevels = null;
       this._visibleLevelOffsets = null;
       this._visibleLevels = null;
       this._groupOffsets = null;
       this._rawTimelineData = null;
       this._rawTimelineDataLength = 0;
       return;
@@ skipping 26 matching lines @@
   }
 
   _updateLevelPositions() {
     var levelCount = this._dataProvider.maxStackDepth();
     var groups = this._rawTimelineData.groups || [];
     this._visibleLevelOffsets = new Uint32Array(levelCount + 1);
     this._visibleLevels = new Uint16Array(levelCount);
     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}];
     var lastGroupLevel = Math.max(levelCount, groups.peekLast().startLevel + 1);
     for (var level = 0; level < lastGroupLevel; ++level) {
       while (groupIndex < groups.length - 1 && level === groups[groupIndex + 1].startLevel) {
         ++groupIndex;
         var style = groups[groupIndex].style;
         var nextLevel = true;
         while (groupStack.peekLast().nestingLevel >= style.nestingLevel) {
@@ skipping 171 matching lines @@
     /** @type {!Map<string,!Map<string,number>>} */
     this._textWidth = new Map();
     this.update();
   }
 
   _enabled() {
     return this._rawTimelineDataLength !== 0;
   }
 };
 
-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 {!{
  *     height: number,
  *     padding: number,
  *     collapsible: boolean,
  *     font: string,
  *     color: string,
  *     backgroundColor: string,
  *     nestingLevel: number,
  *     shareHeaderLine: (boolean|undefined),
  *     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}
    */
   minimumBoundary() {},
 
   /**
    * @return {number}
    */
   totalTime() {},
 
   /**
    * @param {number} value
    * @param {number=} precision
    * @return {string}
    */
   formatValue(value, precision) {},
 
   /**
    * @return {number}
    */
   maxStackDepth() {},
 
   /**
-   * @return {?UI.FlameChart.TimelineData}
+   * @return {?Perf_UI.FlameChart.TimelineData}
    */
   timelineData() {},
 
   /**
    * @param {number} entryIndex
    * @return {?Element}
    */
   prepareHighlightedEntryInfo(entryIndex) {},
 
   /**
@@ skipping 43 matching lines @@
   /**
    * @param {number} entryIndex
    * @return {string}
    */
   textColor(entryIndex) {},
 };
 
 /**
  * @interface
  */
-UI.FlameChartMarker = function() {};
+Perf_UI.FlameChartMarker = function() {};
 
-UI.FlameChartMarker.prototype = {
+Perf_UI.FlameChartMarker.prototype = {
   /**
    * @return {number}
    */
   startTime() {},
 
   /**
    * @return {string}
    */
   color() {},
 
   /**
    * @return {string}
    */
   title() {},
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {number} x
    * @param {number} height
    * @param {number} pixelsPerMillisecond
    */
   draw(context, x, height, pixelsPerMillisecond) {},
 };
 
 /** @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
    * @param {!{min: number, max: number, count: (number|undefined)}|number=} lightnessSpace
    * @param {!{min: number, max: number, count: (number|undefined)}|number=} alphaSpace
    */
   constructor(hueSpace, satSpace, lightnessSpace, alphaSpace) {
     this._hueSpace = hueSpace || {min: 0, max: 360};
     this._satSpace = satSpace || 67;
     this._lightnessSpace = lightnessSpace || 80;
@@ skipping 44 matching lines @@
   _indexToValueInSpace(index, space) {
     if (typeof space === 'number')
       return space;
     var count = space.count || space.max - space.min;
     index %= count;
     return space.min + Math.floor(index / (count - 1) * (space.max - space.min));
   }
 };
 
 /**
- * @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;
     this._paddingLeft = 0;
   }
 
   /**
    * @override
    * @return {number}
    */
   paddingLeft() {
     return this._paddingLeft;
   }
 
   /**
-   * @param {!UI.FlameChart} mainPane
+   * @param {!Perf_UI.FlameChart} mainPane
    */
   _updateBoundaries(mainPane) {
     this._totalTime = mainPane._dataProvider.totalTime();
     this._zeroTime = mainPane._dataProvider.minimumBoundary();
     this._minimumBoundaries = this._zeroTime + mainPane._windowLeft * this._totalTime;
     this._maximumBoundaries = this._zeroTime + mainPane._windowRight * this._totalTime;
     this._paddingLeft = mainPane._paddingLeft;
     this._width = mainPane._offsetWidth - this._paddingLeft;
     this._timeToPixel = this._width / this.boundarySpan();
   }
@@ skipping 42 matching lines @@
   }
 
   /**
    * @override
    * @return {number}
    */
   boundarySpan() {
     return this._maximumBoundaries - this._minimumBoundaries;
   }
 };