DevTools: rename WebInspector into modules.

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
index 23ce2d3b57cf159b999dab8fd4faaf350c90e59f..ceb4193877251ea072a8de1fa89e2128c90767fd 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
@@ -28,21 +28,21 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 /**
- * @implements {WebInspector.FlameChartDataProvider}
+ * @implements {UI.FlameChartDataProvider}
  * @unrestricted
  */
-WebInspector.TimelineFlameChartDataProviderBase = class {
+Timeline.TimelineFlameChartDataProviderBase = class {
   /**
-   * @param {!WebInspector.TimelineModel} model
-   * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
+   * @param {!TimelineModel.TimelineModel} model
+   * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
    */
   constructor(model, filters) {
-    WebInspector.FlameChartDataProvider.call(this);
+    UI.FlameChartDataProvider.call(this);
     this.reset();
     this._model = model;
-    /** @type {?WebInspector.FlameChart.TimelineData} */
+    /** @type {?UI.FlameChart.TimelineData} */
     this._timelineData;
-    this._font = '11px ' + WebInspector.fontFamily();
+    this._font = '11px ' + Host.fontFamily();
     this._filters = filters;
   }
 
@@ -198,7 +198,7 @@ WebInspector.TimelineFlameChartDataProviderBase = class {
 
   /**
    * @param {number} entryIndex
-   * @return {?WebInspector.TimelineSelection}
+   * @return {?Timeline.TimelineSelection}
    */
   createSelection(entryIndex) {
     return null;
@@ -206,14 +206,14 @@ WebInspector.TimelineFlameChartDataProviderBase = class {
 
   /**
    * @override
-   * @return {!WebInspector.FlameChart.TimelineData}
+   * @return {!UI.FlameChart.TimelineData}
    */
   timelineData() {
     throw new Error('Not implemented');
   }
 
   /**
-   * @param {!WebInspector.TracingModel.Event} event
+   * @param {!SDK.TracingModel.Event} event
    * @return {boolean}
    */
   _isVisible(event) {
@@ -226,7 +226,7 @@ WebInspector.TimelineFlameChartDataProviderBase = class {
 /**
  * @enum {symbol}
  */
-WebInspector.TimelineFlameChartEntryType = {
+Timeline.TimelineFlameChartEntryType = {
   Frame: Symbol('Frame'),
   Event: Symbol('Event'),
   InteractionRecord: Symbol('InteractionRecord'),
@@ -235,27 +235,27 @@ WebInspector.TimelineFlameChartEntryType = {
 /**
  * @unrestricted
  */
-WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.TimelineFlameChartDataProviderBase {
+Timeline.TimelineFlameChartDataProvider = class extends Timeline.TimelineFlameChartDataProviderBase {
   /**
-   * @param {!WebInspector.TimelineModel} model
-   * @param {!WebInspector.TimelineFrameModel} frameModel
-   * @param {!WebInspector.TimelineIRModel} irModel
-   * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
+   * @param {!TimelineModel.TimelineModel} model
+   * @param {!TimelineModel.TimelineFrameModel} frameModel
+   * @param {!TimelineModel.TimelineIRModel} irModel
+   * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
    */
   constructor(model, frameModel, irModel, filters) {
     super(model, filters);
     this._frameModel = frameModel;
     this._irModel = irModel;
     this._consoleColorGenerator =
-        new WebInspector.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7);
+        new UI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7);
 
     this._headerLevel1 = {
       padding: 4,
       height: 17,
       collapsible: true,
-      color: WebInspector.themeSupport.patchColor('#222', WebInspector.ThemeSupport.ColorUsage.Foreground),
+      color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
       font: this._font,
-      backgroundColor: WebInspector.themeSupport.patchColor('white', WebInspector.ThemeSupport.ColorUsage.Background),
+      backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 0
     };
 
@@ -264,8 +264,8 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       height: 17,
       collapsible: false,
       font: this._font,
-      color: WebInspector.themeSupport.patchColor('#222', WebInspector.ThemeSupport.ColorUsage.Foreground),
-      backgroundColor: WebInspector.themeSupport.patchColor('white', WebInspector.ThemeSupport.ColorUsage.Background),
+      color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
+      backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 1,
       shareHeaderLine: true
     };
@@ -274,9 +274,9 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       padding: 4,
       height: 17,
       collapsible: true,
-      color: WebInspector.themeSupport.patchColor('#222', WebInspector.ThemeSupport.ColorUsage.Foreground),
+      color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
       font: this._font,
-      backgroundColor: WebInspector.themeSupport.patchColor('white', WebInspector.ThemeSupport.ColorUsage.Background),
+      backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 0,
       useFirstLineForOverview: true,
       shareHeaderLine: true
@@ -286,9 +286,9 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       padding: 2,
       height: 17,
       collapsible: true,
-      color: WebInspector.themeSupport.patchColor('#222', WebInspector.ThemeSupport.ColorUsage.Foreground),
+      color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
       font: this._font,
-      backgroundColor: WebInspector.themeSupport.patchColor('white', WebInspector.ThemeSupport.ColorUsage.Background),
+      backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 1,
       shareHeaderLine: true
     };
@@ -301,24 +301,24 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
    */
   entryTitle(entryIndex) {
     var entryType = this._entryType(entryIndex);
-    if (entryType === WebInspector.TimelineFlameChartEntryType.Event) {
-      var event = /** @type {!WebInspector.TracingModel.Event} */ (this._entryData[entryIndex]);
-      if (event.phase === WebInspector.TracingModel.Phase.AsyncStepInto ||
-          event.phase === WebInspector.TracingModel.Phase.AsyncStepPast)
+    if (entryType === Timeline.TimelineFlameChartEntryType.Event) {
+      var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
+      if (event.phase === SDK.TracingModel.Phase.AsyncStepInto ||
+          event.phase === SDK.TracingModel.Phase.AsyncStepPast)
         return event.name + ':' + event.args['step'];
       if (event._blackboxRoot)
-        return WebInspector.UIString('Blackboxed');
-      var name = WebInspector.TimelineUIUtils.eventStyle(event).title;
+        return Common.UIString('Blackboxed');
+      var name = Timeline.TimelineUIUtils.eventStyle(event).title;
       // TODO(yurys): support event dividers
       var detailsText =
-          WebInspector.TimelineUIUtils.buildDetailsTextForTraceEvent(event, this._model.targetByEvent(event));
-      if (event.name === WebInspector.TimelineModel.RecordType.JSFrame && detailsText)
+          Timeline.TimelineUIUtils.buildDetailsTextForTraceEvent(event, this._model.targetByEvent(event));
+      if (event.name === TimelineModel.TimelineModel.RecordType.JSFrame && detailsText)
         return detailsText;
-      return detailsText ? WebInspector.UIString('%s (%s)', name, detailsText) : name;
+      return detailsText ? Common.UIString('%s (%s)', name, detailsText) : name;
     }
     var title = this._entryIndexToTitle[entryIndex];
     if (!title) {
-      title = WebInspector.UIString('Unexpected entryIndex %d', entryIndex);
+      title = Common.UIString('Unexpected entryIndex %d', entryIndex);
       console.error(title);
     }
     return title;
@@ -342,29 +342,29 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
    */
   reset() {
     super.reset();
-    /** @type {!Array<!WebInspector.TracingModel.Event|!WebInspector.TimelineFrame|!WebInspector.TimelineIRModel.Phases>} */
+    /** @type {!Array<!SDK.TracingModel.Event|!TimelineModel.TimelineFrame|!TimelineModel.TimelineIRModel.Phases>} */
     this._entryData = [];
-    /** @type {!Array<!WebInspector.TimelineFlameChartEntryType>} */
+    /** @type {!Array<!Timeline.TimelineFlameChartEntryType>} */
     this._entryTypeByLevel = [];
     /** @type {!Array<string>} */
     this._entryIndexToTitle = [];
-    /** @type {!Array<!WebInspector.TimelineFlameChartMarker>} */
+    /** @type {!Array<!Timeline.TimelineFlameChartMarker>} */
     this._markers = [];
-    /** @type {!Map<!WebInspector.TimelineCategory, string>} */
+    /** @type {!Map<!Timeline.TimelineCategory, string>} */
     this._asyncColorByCategory = new Map();
-    /** @type {!Map<!WebInspector.TimelineIRModel.Phases, string>} */
+    /** @type {!Map<!TimelineModel.TimelineIRModel.Phases, string>} */
     this._asyncColorByInteractionPhase = new Map();
   }
 
   /**
    * @override
-   * @return {!WebInspector.FlameChart.TimelineData}
+   * @return {!UI.FlameChart.TimelineData}
    */
   timelineData() {
     if (this._timelineData)
       return this._timelineData;
 
-    this._timelineData = new WebInspector.FlameChart.TimelineData([], [], [], []);
+    this._timelineData = new UI.FlameChart.TimelineData([], [], [], []);
 
     this._flowEventIndexById = {};
     this._minimumBoundary = this._model.minimumRecordTime();
@@ -372,27 +372,27 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
     this._currentLevel = 0;
     this._appendFrameBars(this._frameModel.frames());
 
-    this._appendHeader(WebInspector.UIString('Interactions'), this._interactionsHeaderLevel1);
+    this._appendHeader(Common.UIString('Interactions'), this._interactionsHeaderLevel1);
     this._appendInteractionRecords();
 
-    var asyncEventGroups = WebInspector.TimelineModel.AsyncEventGroup;
+    var asyncEventGroups = TimelineModel.TimelineModel.AsyncEventGroup;
     var inputLatencies = this._model.mainThreadAsyncEvents().get(asyncEventGroups.input);
     if (inputLatencies && inputLatencies.length) {
-      var title = WebInspector.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.input);
+      var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.input);
       this._appendAsyncEventsGroup(title, inputLatencies, this._interactionsHeaderLevel2);
     }
     var animations = this._model.mainThreadAsyncEvents().get(asyncEventGroups.animation);
     if (animations && animations.length) {
-      var title = WebInspector.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.animation);
+      var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.animation);
       this._appendAsyncEventsGroup(title, animations, this._interactionsHeaderLevel2);
     }
     var threads = this._model.virtualThreads();
     if (!Runtime.experiments.isEnabled('timelinePerFrameTrack')) {
       this._appendThreadTimelineData(
-          WebInspector.UIString('Main'), this._model.mainThreadEvents(), this._model.mainThreadAsyncEvents(), true);
+          Common.UIString('Main'), this._model.mainThreadEvents(), this._model.mainThreadAsyncEvents(), true);
     } else {
       this._appendThreadTimelineData(
-          WebInspector.UIString('Page'), this._model.eventsForFrame(WebInspector.TimelineModel.PageFrame.mainFrameId), this._model.mainThreadAsyncEvents(), true);
+          Common.UIString('Page'), this._model.eventsForFrame(TimelineModel.TimelineModel.PageFrame.mainFrameId), this._model.mainThreadAsyncEvents(), true);
       for (var frame of this._model.rootFrames()) {
         // Ignore top frame itself, since it should be part of page events.
         frame.children.forEach(this._appendFrameEvents.bind(this, 0));
@@ -401,10 +401,10 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
     var compositorThreads = threads.filter(thread => thread.name.startsWith('CompositorTileWorker'));
     var otherThreads = threads.filter(thread => !thread.name.startsWith('CompositorTileWorker'));
     if (compositorThreads.length) {
-      this._appendHeader(WebInspector.UIString('Raster'), this._headerLevel1);
+      this._appendHeader(Common.UIString('Raster'), this._headerLevel1);
       for (var i = 0; i < compositorThreads.length; ++i)
         this._appendSyncEvents(
-            compositorThreads[i].events, WebInspector.UIString('Rasterizer Thread %d', i), this._headerLevel2);
+            compositorThreads[i].events, Common.UIString('Rasterizer Thread %d', i), this._headerLevel2);
     }
     this._appendGPUEvents();
 
@@ -412,8 +412,8 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
         thread => this._appendThreadTimelineData(thread.name, thread.events, thread.asyncEventsByGroup));
 
     /**
-     * @param {!WebInspector.TimelineFlameChartMarker} a
-     * @param {!WebInspector.TimelineFlameChartMarker} b
+     * @param {!Timeline.TimelineFlameChartMarker} a
+     * @param {!Timeline.TimelineFlameChartMarker} b
      */
     function compareStartTime(a, b) {
       return a.startTime() - b.startTime();
@@ -428,21 +428,21 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
 
   /**
    * @param {number} level
-   * @param {!WebInspector.TimelineModel.PageFrame} frame
+   * @param {!TimelineModel.TimelineModel.PageFrame} frame
    */
   _appendFrameEvents(level, frame) {
     var events = this._model.eventsForFrame(frame.id);
     var clonedHeader = Object.assign({}, this._headerLevel1);
     clonedHeader.nestingLevel = level;
-    this._appendSyncEvents(events, WebInspector.TimelineUIUtils.displayNameForFrame(frame),
-                           /** @type {!WebInspector.FlameChart.GroupStyle} */ (clonedHeader));
+    this._appendSyncEvents(events, Timeline.TimelineUIUtils.displayNameForFrame(frame),
+                           /** @type {!UI.FlameChart.GroupStyle} */ (clonedHeader));
     frame.children.forEach(this._appendFrameEvents.bind(this, level + 1));
   }
 
   /**
    * @param {string} threadTitle
-   * @param {!Array<!WebInspector.TracingModel.Event>} syncEvents
-   * @param {!Map<!WebInspector.TimelineModel.AsyncEventGroup, !Array<!WebInspector.TracingModel.AsyncEvent>>} asyncEvents
+   * @param {!Array<!SDK.TracingModel.Event>} syncEvents
+   * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.TracingModel.AsyncEvent>>} asyncEvents
    * @param {boolean=} forceExpanded
    */
   _appendThreadTimelineData(threadTitle, syncEvents, asyncEvents, forceExpanded) {
@@ -451,9 +451,9 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   }
 
   /**
-   * @param {!Array<!WebInspector.TracingModel.Event>} events
+   * @param {!Array<!SDK.TracingModel.Event>} events
    * @param {string} title
-   * @param {!WebInspector.FlameChart.GroupStyle} style
+   * @param {!UI.FlameChart.GroupStyle} style
    * @param {boolean=} forceExpanded
    */
   _appendSyncEvents(events, title, style, forceExpanded) {
@@ -463,14 +463,14 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
     var maxStackDepth = 0;
     for (var i = 0; i < events.length; ++i) {
       var e = events[i];
-      if (WebInspector.TimelineModel.isMarkerEvent(e))
-        this._markers.push(new WebInspector.TimelineFlameChartMarker(
+      if (TimelineModel.TimelineModel.isMarkerEvent(e))
+        this._markers.push(new Timeline.TimelineFlameChartMarker(
             e.startTime, e.startTime - this._model.minimumRecordTime(),
-            WebInspector.TimelineUIUtils.markerStyleForEvent(e)));
-      if (!WebInspector.TracingModel.isFlowPhase(e.phase)) {
-        if (!e.endTime && e.phase !== WebInspector.TracingModel.Phase.Instant)
+            Timeline.TimelineUIUtils.markerStyleForEvent(e)));
+      if (!SDK.TracingModel.isFlowPhase(e.phase)) {
+        if (!e.endTime && e.phase !== SDK.TracingModel.Phase.Instant)
           continue;
-        if (WebInspector.TracingModel.isAsyncPhase(e.phase))
+        if (SDK.TracingModel.isAsyncPhase(e.phase))
           continue;
         if (!this._isVisible(e))
           continue;
@@ -498,16 +498,16 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
         openEvents.push(e);
     }
     this._entryTypeByLevel.length = this._currentLevel + maxStackDepth;
-    this._entryTypeByLevel.fill(WebInspector.TimelineFlameChartEntryType.Event, this._currentLevel);
+    this._entryTypeByLevel.fill(Timeline.TimelineFlameChartEntryType.Event, this._currentLevel);
     this._currentLevel += maxStackDepth;
   }
 
   /**
-   * @param {!WebInspector.TracingModel.Event} event
+   * @param {!SDK.TracingModel.Event} event
    * @return {boolean}
    */
   _isBlackboxedEvent(event) {
-    if (event.name !== WebInspector.TimelineModel.RecordType.JSFrame)
+    if (event.name !== TimelineModel.TimelineModel.RecordType.JSFrame)
       return false;
     var url = event.args['data']['url'];
     return url && this._isBlackboxedURL(url);
@@ -518,14 +518,14 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
    * @return {boolean}
    */
   _isBlackboxedURL(url) {
-    return WebInspector.blackboxManager.isBlackboxedURL(url);
+    return Bindings.blackboxManager.isBlackboxedURL(url);
   }
 
   /**
-   * @param {!Map<!WebInspector.TimelineModel.AsyncEventGroup, !Array<!WebInspector.TracingModel.AsyncEvent>>} asyncEvents
+   * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.TracingModel.AsyncEvent>>} asyncEvents
    */
   _appendAsyncEvents(asyncEvents) {
-    var groups = WebInspector.TimelineModel.AsyncEventGroup;
+    var groups = TimelineModel.TimelineModel.AsyncEventGroup;
     var groupArray = Object.keys(groups).map(key => groups[key]);
 
     groupArray.remove(groups.animation);
@@ -536,15 +536,15 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       var events = asyncEvents.get(group);
       if (!events)
         continue;
-      var title = WebInspector.TimelineUIUtils.titleForAsyncEventGroup(group);
+      var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(group);
       this._appendAsyncEventsGroup(title, events, this._headerLevel1);
     }
   }
 
   /**
    * @param {string} header
-   * @param {!Array<!WebInspector.TracingModel.AsyncEvent>} events
-   * @param {!WebInspector.FlameChart.GroupStyle} style
+   * @param {!Array<!SDK.TracingModel.AsyncEvent>} events
+   * @param {!UI.FlameChart.GroupStyle} style
    */
   _appendAsyncEventsGroup(header, events, style) {
     var lastUsedTimeByLevel = [];
@@ -565,28 +565,28 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       lastUsedTimeByLevel[level] = asyncEvent.endTime;
     }
     this._entryTypeByLevel.length = this._currentLevel + lastUsedTimeByLevel.length;
-    this._entryTypeByLevel.fill(WebInspector.TimelineFlameChartEntryType.Event, this._currentLevel);
+    this._entryTypeByLevel.fill(Timeline.TimelineFlameChartEntryType.Event, this._currentLevel);
     this._currentLevel += lastUsedTimeByLevel.length;
   }
 
   _appendGPUEvents() {
-    if (this._appendSyncEvents(this._model.gpuEvents(), WebInspector.UIString('GPU'), this._headerLevel1, false))
+    if (this._appendSyncEvents(this._model.gpuEvents(), Common.UIString('GPU'), this._headerLevel1, false))
       ++this._currentLevel;
   }
 
   _appendInteractionRecords() {
     this._irModel.interactionRecords().forEach(this._appendSegment, this);
-    this._entryTypeByLevel[this._currentLevel++] = WebInspector.TimelineFlameChartEntryType.InteractionRecord;
+    this._entryTypeByLevel[this._currentLevel++] = Timeline.TimelineFlameChartEntryType.InteractionRecord;
   }
 
   /**
-   * @param {!Array.<!WebInspector.TimelineFrame>} frames
+   * @param {!Array.<!TimelineModel.TimelineFrame>} frames
    */
   _appendFrameBars(frames) {
-    var style = WebInspector.TimelineUIUtils.markerStyleForFrame();
-    this._entryTypeByLevel[this._currentLevel] = WebInspector.TimelineFlameChartEntryType.Frame;
+    var style = Timeline.TimelineUIUtils.markerStyleForFrame();
+    this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartEntryType.Frame;
     for (var i = 0; i < frames.length; ++i) {
-      this._markers.push(new WebInspector.TimelineFlameChartMarker(
+      this._markers.push(new Timeline.TimelineFlameChartMarker(
           frames[i].startTime, frames[i].startTime - this._model.minimumRecordTime(), style));
       this._appendFrame(frames[i]);
     }
@@ -595,7 +595,7 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
 
   /**
    * @param {number} entryIndex
-   * @return {!WebInspector.TimelineFlameChartEntryType}
+   * @return {!Timeline.TimelineFlameChartEntryType}
    */
   _entryType(entryIndex) {
     return this._entryTypeByLevel[this._timelineData.entryLevels[entryIndex]];
@@ -611,33 +611,33 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
     var title;
     var warning;
     var type = this._entryType(entryIndex);
-    if (type === WebInspector.TimelineFlameChartEntryType.Event) {
-      var event = /** @type {!WebInspector.TracingModel.Event} */ (this._entryData[entryIndex]);
+    if (type === Timeline.TimelineFlameChartEntryType.Event) {
+      var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       var totalTime = event.duration;
       var selfTime = event.selfTime;
       var /** @const */ eps = 1e-6;
       if (typeof totalTime === 'number') {
         time = Math.abs(totalTime - selfTime) > eps && selfTime > eps ?
-            WebInspector.UIString(
+            Common.UIString(
                 '%s (self %s)', Number.millisToString(totalTime, true), Number.millisToString(selfTime, true)) :
             Number.millisToString(totalTime, true);
       }
       title = this.entryTitle(entryIndex);
-      warning = WebInspector.TimelineUIUtils.eventWarning(event);
-    } else if (type === WebInspector.TimelineFlameChartEntryType.Frame) {
-      var frame = /** @type {!WebInspector.TimelineFrame} */ (this._entryData[entryIndex]);
-      time = WebInspector.UIString(
+      warning = Timeline.TimelineUIUtils.eventWarning(event);
+    } else if (type === Timeline.TimelineFlameChartEntryType.Frame) {
+      var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryIndex]);
+      time = Common.UIString(
           '%s ~ %.0f\u2009fps', Number.preciseMillisToString(frame.duration, 1), (1000 / frame.duration));
-      title = frame.idle ? WebInspector.UIString('Idle Frame') : WebInspector.UIString('Frame');
+      title = frame.idle ? Common.UIString('Idle Frame') : Common.UIString('Frame');
       if (frame.hasWarnings()) {
         warning = createElement('span');
-        warning.textContent = WebInspector.UIString('Long frame');
+        warning.textContent = Common.UIString('Long frame');
       }
     } else {
       return null;
     }
     var element = createElement('div');
-    var root = WebInspector.createShadowRootWithCoreStyles(element, 'timeline/timelineFlamechartPopover.css');
+    var root = UI.createShadowRootWithCoreStyles(element, 'timeline/timelineFlamechartPopover.css');
     var contents = root.createChild('div', 'timeline-flamechart-popover');
     contents.createChild('span', 'timeline-info-time').textContent = time;
     contents.createChild('span', 'timeline-info-title').textContent = title;
@@ -659,32 +659,32 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       var color = cache.get(key);
       if (color)
         return color;
-      var parsedColor = WebInspector.Color.parse(lookupColor(key));
-      color = parsedColor.setAlpha(0.7).asString(WebInspector.Color.Format.RGBA) || '';
+      var parsedColor = Common.Color.parse(lookupColor(key));
+      color = parsedColor.setAlpha(0.7).asString(Common.Color.Format.RGBA) || '';
       cache.set(key, color);
       return color;
     }
 
     var type = this._entryType(entryIndex);
-    if (type === WebInspector.TimelineFlameChartEntryType.Event) {
-      var event = /** @type {!WebInspector.TracingModel.Event} */ (this._entryData[entryIndex]);
-      if (!WebInspector.TracingModel.isAsyncPhase(event.phase))
-        return WebInspector.TimelineUIUtils.eventColor(event);
-      if (event.hasCategory(WebInspector.TimelineModel.Category.Console) ||
-          event.hasCategory(WebInspector.TimelineModel.Category.UserTiming))
+    if (type === Timeline.TimelineFlameChartEntryType.Event) {
+      var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
+      if (!SDK.TracingModel.isAsyncPhase(event.phase))
+        return Timeline.TimelineUIUtils.eventColor(event);
+      if (event.hasCategory(TimelineModel.TimelineModel.Category.Console) ||
+          event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming))
         return this._consoleColorGenerator.colorForID(event.name);
-      if (event.hasCategory(WebInspector.TimelineModel.Category.LatencyInfo)) {
+      if (event.hasCategory(TimelineModel.TimelineModel.Category.LatencyInfo)) {
         var phase =
-            WebInspector.TimelineIRModel.phaseForEvent(event) || WebInspector.TimelineIRModel.Phases.Uncategorized;
+            TimelineModel.TimelineIRModel.phaseForEvent(event) || TimelineModel.TimelineIRModel.Phases.Uncategorized;
         return patchColorAndCache(
-            this._asyncColorByInteractionPhase, phase, WebInspector.TimelineUIUtils.interactionPhaseColor);
+            this._asyncColorByInteractionPhase, phase, Timeline.TimelineUIUtils.interactionPhaseColor);
       }
-      var category = WebInspector.TimelineUIUtils.eventStyle(event).category;
+      var category = Timeline.TimelineUIUtils.eventStyle(event).category;
       return patchColorAndCache(this._asyncColorByCategory, category, () => category.color);
     }
-    if (type === WebInspector.TimelineFlameChartEntryType.Frame)
+    if (type === Timeline.TimelineFlameChartEntryType.Frame)
       return 'white';
-    if (type === WebInspector.TimelineFlameChartEntryType.InteractionRecord)
+    if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord)
       return 'transparent';
     return '';
   }
@@ -705,10 +705,10 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   decorateEntry(entryIndex, context, text, barX, barY, barWidth, barHeight, unclippedBarX, timeToPixels) {
     var data = this._entryData[entryIndex];
     var type = this._entryType(entryIndex);
-    if (type === WebInspector.TimelineFlameChartEntryType.Frame) {
+    if (type === Timeline.TimelineFlameChartEntryType.Frame) {
       var /** @const */ vPadding = 1;
       var /** @const */ hPadding = 1;
-      var frame = /** {!WebInspector.TimelineFrame} */ (data);
+      var frame = /** {!TimelineModel.TimelineFrame} */ (data);
       barX += hPadding;
       barWidth -= 2 * hPadding;
       barY += vPadding;
@@ -724,9 +724,9 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       return true;
     }
 
-    if (type === WebInspector.TimelineFlameChartEntryType.InteractionRecord) {
-      var color = WebInspector.TimelineUIUtils.interactionPhaseColor(
-          /** @type {!WebInspector.TimelineIRModel.Phases} */ (this._entryData[entryIndex]));
+    if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord) {
+      var color = Timeline.TimelineUIUtils.interactionPhaseColor(
+          /** @type {!TimelineModel.TimelineIRModel.Phases} */ (this._entryData[entryIndex]));
       context.fillStyle = color;
       context.fillRect(barX, barY, barWidth - 1, 2);
       context.fillRect(barX, barY - 3, 2, 3);
@@ -734,17 +734,17 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       return false;
     }
 
-    if (type === WebInspector.TimelineFlameChartEntryType.Event) {
-      var event = /** @type {!WebInspector.TracingModel.Event} */ (this._entryData[entryIndex]);
-      if (event.hasCategory(WebInspector.TimelineModel.Category.LatencyInfo)) {
-        var timeWaitingForMainThread = WebInspector.TimelineData.forEvent(event).timeWaitingForMainThread;
+    if (type === Timeline.TimelineFlameChartEntryType.Event) {
+      var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
+      if (event.hasCategory(TimelineModel.TimelineModel.Category.LatencyInfo)) {
+        var timeWaitingForMainThread = TimelineModel.TimelineData.forEvent(event).timeWaitingForMainThread;
         if (timeWaitingForMainThread) {
           context.fillStyle = 'hsla(0, 70%, 60%, 1)';
           var width = Math.floor(unclippedBarX - barX + timeWaitingForMainThread * timeToPixels);
           context.fillRect(barX, barY + barHeight - 3, width, 2);
         }
       }
-      if (WebInspector.TimelineData.forEvent(event).warning)
+      if (TimelineModel.TimelineData.forEvent(event).warning)
         paintWarningDecoration(barX, barWidth - 1.5);
     }
 
@@ -777,14 +777,14 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
    */
   forceDecoration(entryIndex) {
     var type = this._entryType(entryIndex);
-    return type === WebInspector.TimelineFlameChartEntryType.Frame ||
-        type === WebInspector.TimelineFlameChartEntryType.Event &&
-        !!WebInspector.TimelineData.forEvent(/** @type {!WebInspector.TracingModel.Event} */ (this._entryData[entryIndex])).warning;
+    return type === Timeline.TimelineFlameChartEntryType.Frame ||
+        type === Timeline.TimelineFlameChartEntryType.Event &&
+        !!TimelineModel.TimelineData.forEvent(/** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex])).warning;
   }
 
   /**
    * @param {string} title
-   * @param {!WebInspector.FlameChart.GroupStyle} style
+   * @param {!UI.FlameChart.GroupStyle} style
    * @param {boolean=} expanded
    */
   _appendHeader(title, style, expanded) {
@@ -792,7 +792,7 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   }
 
   /**
-   * @param {!WebInspector.TracingModel.Event} event
+   * @param {!SDK.TracingModel.Event} event
    * @param {number} level
    */
   _appendEvent(event, level) {
@@ -800,22 +800,22 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
     this._entryData.push(event);
     this._timelineData.entryLevels[index] = level;
     var duration;
-    if (WebInspector.TimelineModel.isMarkerEvent(event))
+    if (TimelineModel.TimelineModel.isMarkerEvent(event))
       duration = undefined;
     else
-      duration = event.duration || WebInspector.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
+      duration = event.duration || Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
     this._timelineData.entryTotalTimes[index] = duration;
     this._timelineData.entryStartTimes[index] = event.startTime;
   }
 
   /**
-   * @param {!WebInspector.TracingModel.Event} event
+   * @param {!SDK.TracingModel.Event} event
    * @param {number} level
    */
   _appendFlowEvent(event, level) {
     var timelineData = this._timelineData;
     /**
-     * @param {!WebInspector.TracingModel.Event} event
+     * @param {!SDK.TracingModel.Event} event
      * @return {number}
      */
     function pushStartFlow(event) {
@@ -826,7 +826,7 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
     }
 
     /**
-     * @param {!WebInspector.TracingModel.Event} event
+     * @param {!SDK.TracingModel.Event} event
      * @param {number} flowIndex
      */
     function pushEndFlow(event, flowIndex) {
@@ -835,14 +835,14 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
     }
 
     switch (event.phase) {
-      case WebInspector.TracingModel.Phase.FlowBegin:
+      case SDK.TracingModel.Phase.FlowBegin:
         this._flowEventIndexById[event.id] = pushStartFlow(event);
         break;
-      case WebInspector.TracingModel.Phase.FlowStep:
+      case SDK.TracingModel.Phase.FlowStep:
         pushEndFlow(event, this._flowEventIndexById[event.id]);
         this._flowEventIndexById[event.id] = pushStartFlow(event);
         break;
-      case WebInspector.TracingModel.Phase.FlowEnd:
+      case SDK.TracingModel.Phase.FlowEnd:
         pushEndFlow(event, this._flowEventIndexById[event.id]);
         delete this._flowEventIndexById[event.id];
         break;
@@ -850,18 +850,18 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   }
 
   /**
-   * @param {!WebInspector.TracingModel.AsyncEvent} asyncEvent
+   * @param {!SDK.TracingModel.AsyncEvent} asyncEvent
    * @param {number} level
    */
   _appendAsyncEvent(asyncEvent, level) {
-    if (WebInspector.TracingModel.isNestableAsyncPhase(asyncEvent.phase)) {
+    if (SDK.TracingModel.isNestableAsyncPhase(asyncEvent.phase)) {
       // FIXME: also add steps once we support event nesting in the FlameChart.
       this._appendEvent(asyncEvent, level);
       return;
     }
     var steps = asyncEvent.steps;
     // If we have past steps, put the end event for each range rather than start one.
-    var eventOffset = steps.length > 1 && steps[1].phase === WebInspector.TracingModel.Phase.AsyncStepPast ? 1 : 0;
+    var eventOffset = steps.length > 1 && steps[1].phase === SDK.TracingModel.Phase.AsyncStepPast ? 1 : 0;
     for (var i = 0; i < steps.length - 1; ++i) {
       var index = this._entryData.length;
       this._entryData.push(steps[i + eventOffset]);
@@ -873,7 +873,7 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   }
 
   /**
-   * @param {!WebInspector.TimelineFrame} frame
+   * @param {!TimelineModel.TimelineFrame} frame
    */
   _appendFrame(frame) {
     var index = this._entryData.length;
@@ -885,11 +885,11 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   }
 
   /**
-   * @param {!WebInspector.Segment} segment
+   * @param {!Common.Segment} segment
    */
   _appendSegment(segment) {
     var index = this._entryData.length;
-    this._entryData.push(/** @type {!WebInspector.TimelineIRModel.Phases} */ (segment.data));
+    this._entryData.push(/** @type {!TimelineModel.TimelineIRModel.Phases} */ (segment.data));
     this._entryIndexToTitle[index] = /** @type {string} */ (segment.data);
     this._timelineData.entryLevels[index] = this._currentLevel;
     this._timelineData.entryTotalTimes[index] = segment.end - segment.begin;
@@ -899,67 +899,67 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   /**
    * @override
    * @param {number} entryIndex
-   * @return {?WebInspector.TimelineSelection}
+   * @return {?Timeline.TimelineSelection}
    */
   createSelection(entryIndex) {
     var type = this._entryType(entryIndex);
     var timelineSelection = null;
-    if (type === WebInspector.TimelineFlameChartEntryType.Event)
-      timelineSelection = WebInspector.TimelineSelection.fromTraceEvent(
-          /** @type {!WebInspector.TracingModel.Event} */ (this._entryData[entryIndex]));
-    else if (type === WebInspector.TimelineFlameChartEntryType.Frame)
-      timelineSelection = WebInspector.TimelineSelection.fromFrame(
-          /** @type {!WebInspector.TimelineFrame} */ (this._entryData[entryIndex]));
+    if (type === Timeline.TimelineFlameChartEntryType.Event)
+      timelineSelection = Timeline.TimelineSelection.fromTraceEvent(
+          /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]));
+    else if (type === Timeline.TimelineFlameChartEntryType.Frame)
+      timelineSelection = Timeline.TimelineSelection.fromFrame(
+          /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryIndex]));
     if (timelineSelection)
-      this._lastSelection = new WebInspector.TimelineFlameChartView.Selection(timelineSelection, entryIndex);
+      this._lastSelection = new Timeline.TimelineFlameChartView.Selection(timelineSelection, entryIndex);
     return timelineSelection;
   }
 
   /**
-   * @param {?WebInspector.TimelineSelection} selection
+   * @param {?Timeline.TimelineSelection} selection
    * @return {number}
    */
   entryIndexForSelection(selection) {
-    if (!selection || selection.type() === WebInspector.TimelineSelection.Type.Range)
+    if (!selection || selection.type() === Timeline.TimelineSelection.Type.Range)
       return -1;
 
     if (this._lastSelection && this._lastSelection.timelineSelection.object() === selection.object())
       return this._lastSelection.entryIndex;
     var index = this._entryData.indexOf(
-        /** @type {!WebInspector.TracingModel.Event|!WebInspector.TimelineFrame|!WebInspector.TimelineIRModel.Phases} */
+        /** @type {!SDK.TracingModel.Event|!TimelineModel.TimelineFrame|!TimelineModel.TimelineIRModel.Phases} */
         (selection.object()));
     if (index !== -1)
-      this._lastSelection = new WebInspector.TimelineFlameChartView.Selection(selection, index);
+      this._lastSelection = new Timeline.TimelineFlameChartView.Selection(selection, index);
     return index;
   }
 };
 
-WebInspector.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;
+Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;
 
 /**
  * @unrestricted
  */
-WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.TimelineFlameChartDataProviderBase {
+Timeline.TimelineFlameChartNetworkDataProvider = class extends Timeline.TimelineFlameChartDataProviderBase {
   /**
-   * @param {!WebInspector.TimelineModel} model
+   * @param {!TimelineModel.TimelineModel} model
    */
   constructor(model) {
     super(model, []);
-    var loadingCategory = WebInspector.TimelineUIUtils.categories()['loading'];
+    var loadingCategory = Timeline.TimelineUIUtils.categories()['loading'];
     this._waitingColor = loadingCategory.childColor;
     this._processingColor = loadingCategory.color;
   }
 
   /**
    * @override
-   * @return {!WebInspector.FlameChart.TimelineData}
+   * @return {!UI.FlameChart.TimelineData}
    */
   timelineData() {
     if (this._timelineData)
       return this._timelineData;
-    /** @type {!Array<!WebInspector.TimelineModel.NetworkRequest>} */
+    /** @type {!Array<!TimelineModel.TimelineModel.NetworkRequest>} */
     this._requests = [];
-    this._timelineData = new WebInspector.FlameChart.TimelineData([], [], [], []);
+    this._timelineData = new UI.FlameChart.TimelineData([], [], [], []);
     this._appendTimelineData(this._model.mainThreadEvents());
     return this._timelineData;
   }
@@ -969,7 +969,7 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
    */
   reset() {
     super.reset();
-    /** @type {!Array<!WebInspector.TimelineModel.NetworkRequest>} */
+    /** @type {!Array<!TimelineModel.TimelineModel.NetworkRequest>} */
     this._requests = [];
   }
 
@@ -986,19 +986,19 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
   /**
    * @override
    * @param {number} index
-   * @return {?WebInspector.TimelineSelection}
+   * @return {?Timeline.TimelineSelection}
    */
   createSelection(index) {
     if (index === -1)
       return null;
     var request = this._requests[index];
-    this._lastSelection = new WebInspector.TimelineFlameChartView.Selection(
-        WebInspector.TimelineSelection.fromNetworkRequest(request), index);
+    this._lastSelection = new Timeline.TimelineFlameChartView.Selection(
+        Timeline.TimelineSelection.fromNetworkRequest(request), index);
     return this._lastSelection.timelineSelection;
   }
 
   /**
-   * @param {?WebInspector.TimelineSelection} selection
+   * @param {?Timeline.TimelineSelection} selection
    * @return {number}
    */
   entryIndexForSelection(selection) {
@@ -1008,13 +1008,13 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
     if (this._lastSelection && this._lastSelection.timelineSelection.object() === selection.object())
       return this._lastSelection.entryIndex;
 
-    if (selection.type() !== WebInspector.TimelineSelection.Type.NetworkRequest)
+    if (selection.type() !== Timeline.TimelineSelection.Type.NetworkRequest)
       return -1;
-    var request = /** @type{!WebInspector.TimelineModel.NetworkRequest} */ (selection.object());
+    var request = /** @type{!TimelineModel.TimelineModel.NetworkRequest} */ (selection.object());
     var index = this._requests.indexOf(request);
     if (index !== -1)
-      this._lastSelection = new WebInspector.TimelineFlameChartView.Selection(
-          WebInspector.TimelineSelection.fromNetworkRequest(request), index);
+      this._lastSelection = new Timeline.TimelineFlameChartView.Selection(
+          Timeline.TimelineSelection.fromNetworkRequest(request), index);
     return index;
   }
 
@@ -1024,9 +1024,9 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
    * @return {string}
    */
   entryColor(index) {
-    var request = /** @type {!WebInspector.TimelineModel.NetworkRequest} */ (this._requests[index]);
-    var category = WebInspector.TimelineUIUtils.networkRequestCategory(request);
-    return WebInspector.TimelineUIUtils.networkCategoryColor(category);
+    var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._requests[index]);
+    var category = Timeline.TimelineUIUtils.networkRequestCategory(request);
+    return Timeline.TimelineUIUtils.networkCategoryColor(category);
   }
 
   /**
@@ -1035,7 +1035,7 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
    * @return {?string}
    */
   entryTitle(index) {
-    var request = /** @type {!WebInspector.TimelineModel.NetworkRequest} */ (this._requests[index]);
+    var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._requests[index]);
     return request.url || null;
   }
 
@@ -1053,7 +1053,7 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
    * @return {boolean}
    */
   decorateEntry(index, context, text, barX, barY, barWidth, barHeight, unclippedBarX, timeToPixelRatio) {
-    const request = /** @type {!WebInspector.TimelineModel.NetworkRequest} */ (this._requests[index]);
+    const request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._requests[index]);
     if (!request.timing)
       return false;
 
@@ -1076,7 +1076,7 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
 
     context.fillStyle = 'hsla(0, 100%, 100%, 0.8)';
     context.fillRect(sendStart + 0.5, barY + 0.5, headersEnd - sendStart - 0.5, barHeight - 2);
-    context.fillStyle = WebInspector.themeSupport.patchColor('white', WebInspector.ThemeSupport.ColorUsage.Background);
+    context.fillStyle = UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background);
     context.fillRect(barX, barY - 0.5, sendStart - barX, barHeight);
     context.fillRect(finish, barY - 0.5, barX + barWidth - finish, barHeight);
 
@@ -1118,7 +1118,7 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
       const text = this.entryTitle(index);
       if (text && text.length) {
         context.fillStyle = '#333';
-        const trimmedText = WebInspector.trimTextMiddle(context, text, textWidth - 2 * textPadding);
+        const trimmedText = UI.trimTextMiddle(context, text, textWidth - 2 * textPadding);
         const textBaseHeight = barHeight - this.textBaseline();
         context.fillText(trimmedText, textStart + textPadding, barY + textBaseHeight);
       }
@@ -1143,11 +1143,11 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
    */
   prepareHighlightedEntryInfo(index) {
     var /** @const */ maxURLChars = 80;
-    var request = /** @type {!WebInspector.TimelineModel.NetworkRequest} */ (this._requests[index]);
+    var request = /** @type {!TimelineModel.TimelineModel.NetworkRequest} */ (this._requests[index]);
     if (!request.url)
       return null;
     var element = createElement('div');
-    var root = WebInspector.createShadowRootWithCoreStyles(element, 'timeline/timelineFlamechartPopover.css');
+    var root = UI.createShadowRootWithCoreStyles(element, 'timeline/timelineFlamechartPopover.css');
     var contents = root.createChild('div', 'timeline-flamechart-popover');
     var duration = request.endTime - request.startTime;
     if (request.startTime && isFinite(duration))
@@ -1155,7 +1155,7 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
     if (typeof request.priority === 'string') {
       var div = contents.createChild('span');
       div.textContent =
-          WebInspector.uiLabelForPriority(/** @type {!Protocol.Network.ResourcePriority} */ (request.priority));
+          Components.uiLabelForPriority(/** @type {!Protocol.Network.ResourcePriority} */ (request.priority));
       div.style.color = this._colorForPriority(request.priority) || 'black';
     }
     contents.createChild('span').textContent = request.url.trimMiddle(maxURLChars);
@@ -1183,7 +1183,7 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
   }
 
   /**
-   * @param {!Array.<!WebInspector.TracingModel.Event>} events
+   * @param {!Array.<!SDK.TracingModel.Event>} events
    */
   _appendTimelineData(events) {
     this._minimumBoundary = this._model.minimumRecordTime();
@@ -1215,13 +1215,13 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
       if (this._timelineData.entryLevels[i] === -1)
         this._timelineData.entryLevels[i] = index;
     }
-    this._timelineData = new WebInspector.FlameChart.TimelineData(
+    this._timelineData = new UI.FlameChart.TimelineData(
         this._timelineData.entryLevels, this._timelineData.entryTotalTimes, this._timelineData.entryStartTimes, null);
     this._currentLevel = index;
   }
 
   /**
-   * @param {!WebInspector.TimelineModel.NetworkRequest} request
+   * @param {!TimelineModel.TimelineModel.NetworkRequest} request
    */
   _appendEntry(request) {
     this._requests.push(request);
@@ -1232,14 +1232,14 @@ WebInspector.TimelineFlameChartNetworkDataProvider = class extends WebInspector.
 };
 
 /**
- * @implements {WebInspector.FlameChartMarker}
+ * @implements {UI.FlameChartMarker}
  * @unrestricted
  */
-WebInspector.TimelineFlameChartMarker = class {
+Timeline.TimelineFlameChartMarker = class {
   /**
    * @param {number} startTime
    * @param {number} startOffset
-   * @param {!WebInspector.TimelineMarkerStyle} style
+   * @param {!Timeline.TimelineMarkerStyle} style
    */
   constructor(startTime, startOffset, style) {
     this._startTime = startTime;
@@ -1269,7 +1269,7 @@ WebInspector.TimelineFlameChartMarker = class {
    */
   title() {
     var startTime = Number.millisToString(this._startOffset);
-    return WebInspector.UIString('%s at %s', this._style.title, startTime);
+    return Common.UIString('%s at %s', this._style.title, startTime);
   }
 
   /**
@@ -1310,17 +1310,17 @@ WebInspector.TimelineFlameChartMarker = class {
 };
 
 /**
- * @implements {WebInspector.TimelineModeView}
- * @implements {WebInspector.FlameChartDelegate}
+ * @implements {Timeline.TimelineModeView}
+ * @implements {UI.FlameChartDelegate}
  * @unrestricted
  */
-WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
+Timeline.TimelineFlameChartView = class extends UI.VBox {
   /**
-   * @param {!WebInspector.TimelineModeViewDelegate} delegate
-   * @param {!WebInspector.TimelineModel} timelineModel
-   * @param {!WebInspector.TimelineFrameModel} frameModel
-   * @param {!WebInspector.TimelineIRModel} irModel
-   * @param {!Array<!WebInspector.TimelineModel.Filter>} filters
+   * @param {!Timeline.TimelineModeViewDelegate} delegate
+   * @param {!TimelineModel.TimelineModel} timelineModel
+   * @param {!TimelineModel.TimelineFrameModel} frameModel
+   * @param {!TimelineModel.TimelineIRModel} irModel
+   * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
    */
   constructor(delegate, timelineModel, frameModel, irModel, filters) {
     super();
@@ -1328,15 +1328,15 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
     this._delegate = delegate;
     this._model = timelineModel;
 
-    this._splitWidget = new WebInspector.SplitWidget(false, false, 'timelineFlamechartMainView', 150);
+    this._splitWidget = new UI.SplitWidget(false, false, 'timelineFlamechartMainView', 150);
 
-    this._dataProvider = new WebInspector.TimelineFlameChartDataProvider(this._model, frameModel, irModel, filters);
+    this._dataProvider = new Timeline.TimelineFlameChartDataProvider(this._model, frameModel, irModel, filters);
     var mainViewGroupExpansionSetting =
-        WebInspector.settings.createSetting('timelineFlamechartMainViewGroupExpansion', {});
-    this._mainView = new WebInspector.FlameChart(this._dataProvider, this, mainViewGroupExpansionSetting);
+        Common.settings.createSetting('timelineFlamechartMainViewGroupExpansion', {});
+    this._mainView = new UI.FlameChart(this._dataProvider, this, mainViewGroupExpansionSetting);
 
-    this._networkDataProvider = new WebInspector.TimelineFlameChartNetworkDataProvider(this._model);
-    this._networkView = new WebInspector.FlameChart(this._networkDataProvider, this);
+    this._networkDataProvider = new Timeline.TimelineFlameChartNetworkDataProvider(this._model);
+    this._networkView = new UI.FlameChart(this._networkDataProvider, this);
 
     this._splitWidget.setMainWidget(this._mainView);
     this._splitWidget.setSidebarWidget(this._networkView);
@@ -1344,20 +1344,20 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
 
     this._onMainEntrySelected = this._onEntrySelected.bind(this, this._dataProvider);
     this._onNetworkEntrySelected = this._onEntrySelected.bind(this, this._networkDataProvider);
-    this._mainView.addEventListener(WebInspector.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
+    this._mainView.addEventListener(UI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
     this._networkView.addEventListener(
-        WebInspector.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
-    WebInspector.blackboxManager.addChangeListener(this.refreshRecords, this);
+        UI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
+    Bindings.blackboxManager.addChangeListener(this.refreshRecords, this);
   }
 
   /**
    * @override
    */
   dispose() {
-    this._mainView.removeEventListener(WebInspector.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
+    this._mainView.removeEventListener(UI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
     this._networkView.removeEventListener(
-        WebInspector.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
-    WebInspector.blackboxManager.removeChangeListener(this.refreshRecords, this);
+        UI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
+    Bindings.blackboxManager.removeChangeListener(this.refreshRecords, this);
   }
 
   /**
@@ -1383,7 +1383,7 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
    * @param {number} endTime
    */
   updateRangeSelection(startTime, endTime) {
-    this._delegate.select(WebInspector.TimelineSelection.fromRange(startTime, endTime));
+    this._delegate.select(Timeline.TimelineSelection.fromRange(startTime, endTime));
   }
 
   /**
@@ -1398,11 +1398,11 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
 
   /**
    * @override
-   * @param {?WebInspector.TracingModel.Event} event
+   * @param {?SDK.TracingModel.Event} event
    */
   highlightEvent(event) {
     var entryIndex =
-        event ? this._dataProvider.entryIndexForSelection(WebInspector.TimelineSelection.fromTraceEvent(event)) : -1;
+        event ? this._dataProvider.entryIndexForSelection(Timeline.TimelineSelection.fromTraceEvent(event)) : -1;
     if (entryIndex >= 0)
       this._mainView.highlightEntry(entryIndex);
     else
@@ -1419,7 +1419,7 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
 
   /**
    * @override
-   * @return {!WebInspector.Widget}
+   * @return {!UI.Widget}
    */
   view() {
     return this;
@@ -1450,7 +1450,7 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
 
   /**
    * @override
-   * @param {?WebInspector.TracingModel.Event} event
+   * @param {?SDK.TracingModel.Event} event
    * @param {string=} regex
    * @param {boolean=} select
    */
@@ -1467,7 +1467,7 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
 
   /**
    * @override
-   * @param {?WebInspector.TimelineSelection} selection
+   * @param {?Timeline.TimelineSelection} selection
    */
   setSelection(selection) {
     var index = this._dataProvider.entryIndexForSelection(selection);
@@ -1477,8 +1477,8 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
   }
 
   /**
-   * @param {!WebInspector.FlameChartDataProvider} dataProvider
-   * @param {!WebInspector.Event} event
+   * @param {!UI.FlameChartDataProvider} dataProvider
+   * @param {!Common.Event} event
    */
   _onEntrySelected(dataProvider, event) {
     var entryIndex = /** @type{number} */ (event.data);
@@ -1500,9 +1500,9 @@ WebInspector.TimelineFlameChartView = class extends WebInspector.VBox {
 /**
  * @unrestricted
  */
-WebInspector.TimelineFlameChartView.Selection = class {
+Timeline.TimelineFlameChartView.Selection = class {
   /**
-   * @param {!WebInspector.TimelineSelection} selection
+   * @param {!Timeline.TimelineSelection} selection
    * @param {number} entryIndex
    */
   constructor(selection, entryIndex) {