DevTools: rename WebInspector into modules.

third_party/WebKit/Source/devtools/front_end/ui_lazy/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 12 matching lines @@
  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  * 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
  */
-WebInspector.FlameChartDelegate = function() {};
+UI.FlameChartDelegate = function() {};
 
-WebInspector.FlameChartDelegate.prototype = {
+UI.FlameChartDelegate.prototype = {
   /**
    * @param {number} startTime
    * @param {number} endTime
    */
   requestWindowTimes: function(startTime, endTime) {},
 
   /**
    * @param {number} startTime
    * @param {number} endTime
    */
   updateRangeSelection: function(startTime, endTime) {},
 };
 
 /**
  * @unrestricted
  */
-WebInspector.FlameChart = class extends WebInspector.ChartViewport {
+UI.FlameChart = class extends UI.ChartViewport {
   /**
-   * @param {!WebInspector.FlameChartDataProvider} dataProvider
-   * @param {!WebInspector.FlameChartDelegate} flameChartDelegate
-   * @param {!WebInspector.Setting=} groupExpansionSetting
+   * @param {!UI.FlameChartDataProvider} dataProvider
+   * @param {!UI.FlameChartDelegate} flameChartDelegate
+   * @param {!Common.Setting=} groupExpansionSetting
    */
   constructor(dataProvider, flameChartDelegate, groupExpansionSetting) {
     super();
     this.registerRequiredCSS('ui_lazy/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 WebInspector.FlameChart.Calculator(dataProvider);
+    this._calculator = new 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 58 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 {?WebInspector.FlameChart.TimelineData}
+   * @return {?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 < WebInspector.FlameChart.DividersBarHeight;
+    var inDividersBar = this._lastMouseOffsetY < UI.FlameChart.DividersBarHeight;
     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(WebInspector.FlameChart.Events.EntrySelected, this._highlightedEntryIndex);
+    this.dispatchEventToListeners(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 21 matching lines @@
    * @param {!Event} e
    */
   _onKeyDown(e) {
     this._handleSelectionNavigation(e);
   }
 
   /**
    * @param {!Event} e
    */
   _handleSelectionNavigation(e) {
-    if (!WebInspector.KeyboardShortcut.hasNoModifiers(e))
+    if (!UI.KeyboardShortcut.hasNoModifiers(e))
       return;
     if (this._selectedEntryIndex === -1)
       return;
     var timelineData = this._timelineData();
     if (!timelineData)
       return;
 
     /**
      * @param {number} time
      * @param {number} entryIndex
      * @return {number}
      */
     function timeComparator(time, entryIndex) {
       return time - timelineData.entryStartTimes[entryIndex];
     }
 
     /**
      * @param {number} entry1
      * @param {number} entry2
      * @return {boolean}
      */
     function entriesIntersect(entry1, entry2) {
       var start1 = timelineData.entryStartTimes[entry1];
       var start2 = timelineData.entryStartTimes[entry2];
       var end1 = start1 + timelineData.entryTotalTimes[entry1];
       var end2 = start2 + timelineData.entryTotalTimes[entry2];
       return start1 < end2 && start2 < end1;
     }
 
-    var keys = WebInspector.KeyboardShortcut.Keys;
+    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(WebInspector.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
+        this.dispatchEventToListeners(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(WebInspector.FlameChart.Events.EntrySelected, levelIndexes[indexOnLevel]);
+      this.dispatchEventToListeners(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 {WebInspector.FlameChart}
+     * @this {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 82 matching lines @@
     var timelineData = this._timelineData();
     if (!timelineData)
       return;
 
     var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getContext('2d'));
     context.save();
     var ratio = window.devicePixelRatio;
     var top = this.scrollOffset();
     context.scale(ratio, ratio);
     context.translate(0, -top);
-    var defaultFont = '11px ' + WebInspector.fontFamily();
+    var defaultFont = '11px ' + Host.fontFamily();
     context.font = defaultFont;
 
     var timeWindowRight = this._timeWindowRight;
     var timeWindowLeft = this._timeWindowLeft - this._paddingLeft / this._timeToPixel;
     var entryTotalTimes = timelineData.entryTotalTimes;
     var entryStartTimes = timelineData.entryStartTimes;
     var entryLevels = timelineData.entryLevels;
 
     var titleIndices = [];
     var markerIndices = [];
     var textPadding = this._dataProvider.textPadding();
-    var minTextWidth = 2 * textPadding + WebInspector.measureTextWidth(context, '\u2026');
+    var minTextWidth = 2 * textPadding + UI.measureTextWidth(context, '\u2026');
     var barHeight = this._barHeight;
     var minVisibleBarLevel = Math.max(this._visibleLevelOffsets.upperBound(top) - 1, 0);
 
     /** @type {!Map<string, !Array<number>>} */
     var colorBuckets = new Map();
     for (var level = minVisibleBarLevel; level < this._dataProvider.maxStackDepth(); ++level) {
       if (this._levelToHeight(level) > top + height)
         break;
       if (!this._visibleLevels[level])
         continue;
@@ skipping 75 matching lines @@
       var entryIndex = titleIndices[i];
       var entryStartTime = entryStartTimes[entryIndex];
       var barX = this._timeToPositionClipped(entryStartTime);
       var barRight = Math.min(this._timeToPositionClipped(entryStartTime + entryTotalTimes[entryIndex]), width) + 1;
       var barWidth = barRight - barX;
       var barLevel = entryLevels[entryIndex];
       var barY = this._levelToHeight(barLevel);
       var text = this._dataProvider.entryTitle(entryIndex);
       if (text && text.length) {
         context.font = this._dataProvider.entryFont(entryIndex) || defaultFont;
-        text = WebInspector.trimTextMiddle(context, text, barWidth - 2 * textPadding);
+        text = UI.trimTextMiddle(context, text, barWidth - 2 * textPadding);
       }
       var unclippedBarX = this._timeToPosition(entryStartTime);
       if (this._dataProvider.decorateEntry(
               entryIndex, context, text, barX, barY, barWidth, barHeight, unclippedBarX, this._timeToPixel))
         continue;
       if (!text || !text.length)
         continue;
       context.fillStyle = this._dataProvider.textColor(entryIndex);
       context.fillText(text, barX + textPadding, barY + textBaseHeight);
     }
 
     this._drawFlowEvents(context, width, height);
 
     context.restore();
 
-    WebInspector.TimelineGrid.drawCanvasGrid(context, this._calculator, 3);
+    UI.TimelineGrid.drawCanvasGrid(context, this._calculator, 3);
     this._drawMarkers();
     this._drawGroupHeaders(width, height);
 
     this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
     this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
     this._updateMarkerHighlight();
   }
 
   /**
    * @param {number} width
    * @param {number} height
    */
   _drawGroupHeaders(width, height) {
     var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getContext('2d'));
     var top = this.scrollOffset();
     var ratio = window.devicePixelRatio;
     var barHeight = this._barHeight;
     var textBaseHeight = barHeight - this._dataProvider.textBaseline();
     var groups = this._rawTimelineData.groups || [];
     if (!groups.length)
       return;
 
     var groupOffsets = this._groupOffsets;
     var lastGroupOffset = Array.prototype.peekLast.call(groupOffsets);
-    var colorUsage = WebInspector.ThemeSupport.ColorUsage;
+    var colorUsage = UI.ThemeSupport.ColorUsage;
 
     context.save();
     context.scale(ratio, ratio);
     context.translate(0, -top);
 
-    context.fillStyle = WebInspector.themeSupport.patchColor('#eee', colorUsage.Background);
+    context.fillStyle = UI.themeSupport.patchColor('#eee', colorUsage.Background);
     forEachGroup.call(this, (offset, index, group) => {
       var paddingHeight = group.style.padding;
       if (paddingHeight < 5)
         return;
       context.fillRect(0, offset - paddingHeight + 2, width, paddingHeight - 4);
     });
     if (groups.length && lastGroupOffset < top + height)
       context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset);
 
-    context.strokeStyle = WebInspector.themeSupport.patchColor('#bbb', colorUsage.Background);
+    context.strokeStyle = UI.themeSupport.patchColor('#bbb', colorUsage.Background);
     context.beginPath();
     forEachGroup.call(this, (offset, index, group, isFirst) => {
       if (isFirst || group.style.padding < 4)
         return;
       hLine(offset - 2.5);
     });
     hLine(lastGroupOffset + 0.5);
     context.stroke();
 
     forEachGroup.call(this, (offset, index, group) => {
@@ skipping 11 matching lines @@
         nextGroup++;
       var endLevel = nextGroup < groups.length ? groups[nextGroup].startLevel : this._dataProvider.maxStackDepth();
       this._drawCollapsedOverviewForGroup(offset + 1, group.startLevel, endLevel);
     });
 
     context.save();
     forEachGroup.call(this, (offset, index, group) => {
       context.font = group.style.font;
       if (this._isGroupCollapsible(index) && !group.expanded || group.style.shareHeaderLine) {
         var width = this._labelWidthForGroup(context, group);
-        context.fillStyle = WebInspector.Color.parse(group.style.backgroundColor).setAlpha(0.7).asString(null);
+        context.fillStyle = Common.Color.parse(group.style.backgroundColor).setAlpha(0.7).asString(null);
         context.fillRect(
             this._headerLeftPadding - this._headerLabelXPadding, offset + this._headerLabelYPadding, width,
             barHeight - 2 * this._headerLabelYPadding);
       }
       context.fillStyle = group.style.color;
       context.fillText(
           group.name, Math.floor(this._expansionArrowIndent * (group.style.nestingLevel + 1) + this._arrowSide),
           offset + textBaseHeight);
     });
     context.restore();
 
-    context.fillStyle = WebInspector.themeSupport.patchColor('#6e6e6e', colorUsage.Foreground);
+    context.fillStyle = UI.themeSupport.patchColor('#6e6e6e', colorUsage.Foreground);
     context.beginPath();
     forEachGroup.call(this, (offset, index, group) => {
       if (this._isGroupCollapsible(index))
         drawExpansionArrow.call(
             this, this._expansionArrowIndent * (group.style.nestingLevel + 1),
             offset + textBaseHeight - this._arrowSide / 2, !!group.expanded);
     });
     context.fill();
 
-    context.strokeStyle = WebInspector.themeSupport.patchColor('#ddd', colorUsage.Background);
+    context.strokeStyle = UI.themeSupport.patchColor('#ddd', colorUsage.Background);
     context.beginPath();
     context.stroke();
 
     context.restore();
 
     /**
      * @param {number} y
      */
     function hLine(y) {
       context.moveTo(0, y);
       context.lineTo(width, y);
     }
 
     /**
      * @param {number} x
      * @param {number} y
      * @param {boolean} expanded
-     * @this {WebInspector.FlameChart}
+     * @this {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, !WebInspector.FlameChart.Group, boolean)} callback
-     * @this {WebInspector.FlameChart}
+     * @param {function(number, number, !UI.FlameChart.Group, boolean)} callback
+     * @this {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 {!WebInspector.FlameChart.Group} group
+   * @param {!UI.FlameChart.Group} group
    * @return {number}
    */
   _labelWidthForGroup(context, group) {
-    return WebInspector.measureTextWidth(context, group.name) + this._expansionArrowIndent * (group.style.nestingLevel + 1) +
+    return UI.measureTextWidth(context, group.name) + this._expansionArrowIndent * (group.style.nestingLevel + 1) +
         2 * this._headerLabelXPadding;
   }
 
   /**
    * @param {number} y
    * @param {number} startLevel
    * @param {number} endLevel
    */
   _drawCollapsedOverviewForGroup(y, startLevel, endLevel) {
-    var range = new WebInspector.SegmentedRange(mergeCallback);
+    var range = new Common.SegmentedRange(mergeCallback);
     var timeWindowRight = this._timeWindowRight;
     var timeWindowLeft = this._timeWindowLeft - this._paddingLeft / this._timeToPixel;
     var context = /** @type {!CanvasRenderingContext2D} */ (this._canvas.getContext('2d'));
     var barHeight = this._barHeight - 2;
     var entryStartTimes = this._rawTimelineData.entryStartTimes;
     var entryTotalTimes = this._rawTimelineData.entryTotalTimes;
 
     for (var level = startLevel; level < endLevel; ++level) {
       var levelIndexes = this._timelineLevels[level];
       var rightIndexOnLevel =
           levelIndexes.lowerBound(timeWindowRight, (time, entryIndex) => time - entryStartTimes[entryIndex]) - 1;
       var lastDrawOffset = Infinity;
 
       for (var entryIndexOnLevel = rightIndexOnLevel; entryIndexOnLevel >= 0; --entryIndexOnLevel) {
         var entryIndex = levelIndexes[entryIndexOnLevel];
         var entryStartTime = entryStartTimes[entryIndex];
         var startPosition = this._timeToPositionClipped(entryStartTime);
         var entryEndTime = entryStartTime + entryTotalTimes[entryIndex];
         if (isNaN(entryEndTime) || startPosition >= lastDrawOffset)
           continue;
         if (entryEndTime <= timeWindowLeft)
           break;
         lastDrawOffset = startPosition;
         var color = this._dataProvider.entryColor(entryIndex);
-        range.append(new WebInspector.Segment(startPosition, this._timeToPositionClipped(entryEndTime), color));
+        range.append(new Common.Segment(startPosition, this._timeToPositionClipped(entryEndTime), color));
       }
     }
 
     var segments = range.segments().slice().sort((a, b) => a.data.localeCompare(b.data));
     var lastColor;
     context.beginPath();
     for (var i = 0; i < segments.length; ++i) {
       var segment = segments[i];
       if (lastColor !== segments[i].data) {
         context.fill();
         context.beginPath();
         lastColor = segments[i].data;
         context.fillStyle = lastColor;
       }
       context.rect(segment.begin, y, segment.end - segment.begin, barHeight);
     }
     context.fill();
 
     /**
-     * @param {!WebInspector.Segment} a
-     * @param {!WebInspector.Segment} b
-     * @return {?WebInspector.Segment}
+     * @param {!Common.Segment} a
+     * @param {!Common.Segment} b
+     * @return {?Common.Segment}
      */
     function mergeCallback(a, b) {
       return a.data === b.data && a.end + 0.4 > b.end ? a : null;
     }
   }
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {number} height
    * @param {number} width
@@ skipping 44 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);
-    var height = WebInspector.FlameChart.DividersBarHeight - 1;
+    var height = UI.FlameChart.DividersBarHeight - 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 {?WebInspector.FlameChart.TimelineData} timelineData
+   * @param {?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 = WebInspector.FlameChart.DividersBarHeight;
+    var currentOffset = UI.FlameChart.DividersBarHeight;
     var visible = true;
     /** @type !Array<{nestingLevel: number, visible: boolean}> */
     var groupStack = [{nestingLevel: -1, visible: true}];
     for (var level = 0; level < levelCount; ++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) {
           groupStack.pop();
@@ skipping 168 matching lines @@
     /** @type {!Map<string,!Map<string,number>>} */
     this._textWidth = new Map();
     this.update();
   }
 
   _enabled() {
     return this._rawTimelineDataLength !== 0;
   }
 };
 
-WebInspector.FlameChart.DividersBarHeight = 18;
+UI.FlameChart.DividersBarHeight = 18;
 
-WebInspector.FlameChart.MinimalTimeWindowMs = 0.5;
+UI.FlameChart.MinimalTimeWindowMs = 0.5;
 
 /**
  * @interface
  */
-WebInspector.FlameChartDataProvider = function() {};
+UI.FlameChartDataProvider = function() {};
 
 /**
- * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined), style: !WebInspector.FlameChart.GroupStyle}}
+ * @typedef {!{name: string, startLevel: number, expanded: (boolean|undefined), style: !UI.FlameChart.GroupStyle}}
  */
-WebInspector.FlameChart.Group;
+UI.FlameChart.Group;
 
 /**
  * @typedef {!{
  *     height: number,
  *     padding: number,
  *     collapsible: boolean,
  *     font: string,
  *     color: string,
  *     backgroundColor: string,
  *     nestingLevel: number,
  *     shareHeaderLine: (boolean|undefined),
  *     useFirstLineForOverview: (boolean|undefined)
  * }}
  */
-WebInspector.FlameChart.GroupStyle;
+UI.FlameChart.GroupStyle;
 
 /**
  * @unrestricted
  */
-WebInspector.FlameChart.TimelineData = class {
+UI.FlameChart.TimelineData = class {
   /**
    * @param {!Array<number>|!Uint16Array} entryLevels
    * @param {!Array<number>|!Float32Array} entryTotalTimes
    * @param {!Array<number>|!Float64Array} entryStartTimes
-   * @param {?Array<!WebInspector.FlameChart.Group>} groups
+   * @param {?Array<!UI.FlameChart.Group>} groups
    */
   constructor(entryLevels, entryTotalTimes, entryStartTimes, groups) {
     this.entryLevels = entryLevels;
     this.entryTotalTimes = entryTotalTimes;
     this.entryStartTimes = entryStartTimes;
     this.groups = groups;
-    /** @type {!Array.<!WebInspector.FlameChartMarker>} */
+    /** @type {!Array.<!UI.FlameChartMarker>} */
     this.markers = [];
     this.flowStartTimes = [];
     this.flowStartLevels = [];
     this.flowEndTimes = [];
     this.flowEndLevels = [];
   }
 };
 
-WebInspector.FlameChartDataProvider.prototype = {
+UI.FlameChartDataProvider.prototype = {
   /**
    * @return {number}
    */
   barHeight: function() {},
 
   /**
    * @return {number}
    */
   minimumBoundary: function() {},
 
   /**
    * @return {number}
    */
   totalTime: function() {},
 
   /**
    * @param {number} value
    * @param {number=} precision
    * @return {string}
    */
   formatValue: function(value, precision) {},
 
   /**
    * @return {number}
    */
   maxStackDepth: function() {},
 
   /**
-   * @return {?WebInspector.FlameChart.TimelineData}
+   * @return {?UI.FlameChart.TimelineData}
    */
   timelineData: function() {},
 
   /**
    * @param {number} entryIndex
    * @return {?Element}
    */
   prepareHighlightedEntryInfo: function(entryIndex) {},
 
   /**
@@ skipping 58 matching lines @@
 
   /**
    * @return {number}
    */
   paddingLeft: function() {},
 };
 
 /**
  * @interface
  */
-WebInspector.FlameChartMarker = function() {};
+UI.FlameChartMarker = function() {};
 
-WebInspector.FlameChartMarker.prototype = {
+UI.FlameChartMarker.prototype = {
   /**
    * @return {number}
    */
   startTime: function() {},
 
   /**
    * @return {string}
    */
   color: function() {},
 
   /**
    * @return {string}
    */
   title: function() {},
 
   /**
    * @param {!CanvasRenderingContext2D} context
    * @param {number} x
    * @param {number} height
    * @param {number} pixelsPerMillisecond
    */
   draw: function(context, x, height, pixelsPerMillisecond) {},
 };
 
 /** @enum {symbol} */
-WebInspector.FlameChart.Events = {
+UI.FlameChart.Events = {
   EntrySelected: Symbol('EntrySelected')
 };
 
 /**
  * @unrestricted
  */
-WebInspector.FlameChart.ColorGenerator = class {
+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 {WebInspector.TimelineGrid.Calculator}
+ * @implements {UI.TimelineGrid.Calculator}
  * @unrestricted
  */
-WebInspector.FlameChart.Calculator = class {
+UI.FlameChart.Calculator = class {
   /**
-   * @param {!WebInspector.FlameChartDataProvider} dataProvider
+   * @param {!UI.FlameChartDataProvider} dataProvider
    */
   constructor(dataProvider) {
     this._dataProvider = dataProvider;
     this._paddingLeft = 0;
   }
 
   /**
    * @override
    * @return {number}
    */
   paddingLeft() {
     return this._paddingLeft;
   }
 
   /**
-   * @param {!WebInspector.FlameChart} mainPane
+   * @param {!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;
   }
 };