DevTools: override logic in Timeline Panel for UiDevTools

This enables showing more details in the Timeline Panel.

Steps to use:
 - Run chrome with --enable-ui-devtools
 - Navigate to chrome://inspect#other
 - Connect to UiDevToolsClient
 - Record a performance trace

Change-Id: If8af634f894f937bd4192c774bedf105b8563a42
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1767717Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Wei Li <weili@chromium.org>
Commit-Queue: Wei Li <weili@chromium.org>
Cr-Commit-Position: refs/heads/master@{#701706}

chrome/browser/devtools/devtools_ui_bindings.cc

@@ -313,7 +313,7 @@ std::string SanitizeFrontendQueryParam(
   // Convert boolean flags to true.
   if (key == "can_dock" || key == "debugFrontend" || key == "experiments" ||
       key == "isSharedWorker" || key == "v8only" || key == "remoteFrontend" ||
-      key == "nodeFrontend" || key == "hasOtherClients")
+      key == "nodeFrontend" || key == "hasOtherClients" || key == "uiDevTools")
     return "true";
 
   // Pass connection endpoints as is.

components/ui_devtools/devtools_server.cc

@@ -26,7 +26,7 @@ namespace ui_devtools {
 
 namespace {
 const char kChromeDeveloperToolsPrefix[] =
-    "devtools://devtools/bundled/devtools_app.html?ws=";
+    "devtools://devtools/bundled/devtools_app.html?uiDevTools=true&ws=";
 }  // namespace
 
 UiDevToolsServer* UiDevToolsServer::devtools_server_ = nullptr;

third_party/blink/renderer/devtools/BUILD.gn

@@ -771,6 +771,8 @@ all_devtools_files = [
   "front_end/timeline/timelineStatusDialog.css",
   "front_end/timeline/TimelineTreeView.js",
   "front_end/timeline/TimelineUIUtils.js",
+  "front_end/timeline/UIDevtoolsController.js",
+  "front_end/timeline/UIDevtoolsUtils.js",
   "front_end/toolbox_bootstrap/module.json",
   "front_end/toolbox_bootstrap/Toolbox.js",
   "front_end/toolbox.js",

third_party/blink/renderer/devtools/front_end/timeline/TimelineEventOverview.js

@@ -204,7 +204,7 @@ Timeline.TimelineEventOverviewCPUActivity = class extends Timeline.TimelineEvent
     const scale = width / timeSpan;
     const quantTime = quantSizePx / scale;
     const categories = Timeline.TimelineUIUtils.categories();
-    const categoryOrder = ['idle', 'loading', 'painting', 'rendering', 'scripting', 'other'];
+    const categoryOrder = Timeline.TimelineUIUtils.getTimelineMainEventCategories();
     const otherIndex = categoryOrder.indexOf('other');
     const idleIndex = 0;
     console.assert(idleIndex === categoryOrder.indexOf('idle'));

third_party/blink/renderer/devtools/front_end/timeline/TimelinePanel.js

@@ -526,7 +526,11 @@ Timeline.TimelinePanel = class extends UI.Panel {
         provider => Timeline.TimelinePanel._settingForTraceProvider(provider).get());
 
     const mainTarget = /** @type {!SDK.Target} */ (SDK.targetManager.mainTarget());
-    this._controller = new Timeline.TimelineController(mainTarget, this);
+    if (Timeline.UIDevtoolsUtils.isUiDevTools()) {
+      this._controller = new Timeline.UIDevtoolsController(mainTarget, this);
+    } else {
+      this._controller = new Timeline.TimelineController(mainTarget, this);
+    }
     this._setUIControlsEnabled(false);
     this._hideLandingPage();
     const response = await this._controller.startRecording(recordingOptions, enabledTraceProviders);

third_party/blink/renderer/devtools/front_end/timeline/TimelineUIUtils.js

@@ -153,6 +153,10 @@ Timeline.TimelineUIUtils = class {
     return eventStyles;
   }
 
+  static setEventStylesMap(eventStyles) {
+    Timeline.TimelineUIUtils._eventStylesMap = eventStyles;
+  }
+
   /**
    * @param {!TimelineModel.TimelineIRModel.InputEvents} inputEventType
    * @return {?string}
@@ -1666,6 +1670,31 @@ Timeline.TimelineUIUtils = class {
     return Timeline.TimelineUIUtils._categories;
   }
 
+  /**
+   * @param {!Object.<string, !Timeline.TimelineCategory>} categories
+   */
+  static setCategories(categories) {
+    Timeline.TimelineUIUtils._categories = categories;
+  }
+
+  /**
+   * @return {!Array}
+   */
+  static getTimelineMainEventCategories() {
+    if (Timeline.TimelineUIUtils._eventCategories) {
+      return Timeline.TimelineUIUtils._eventCategories;
+    }
+    Timeline.TimelineUIUtils._eventCategories = ['idle', 'loading', 'painting', 'rendering', 'scripting', 'other'];
+    return Timeline.TimelineUIUtils._eventCategories;
+  }
+
+  /**
+   * @param {!Array} categories
+   */
+  static setTimelineMainEventCategories(categories) {
+    Timeline.TimelineUIUtils._eventCategories = categories;
+  }
+
   /**
    * @param {!Object} aggregatedStats
    * @param {!Timeline.TimelineCategory=} selfCategory

third_party/blink/renderer/devtools/front_end/timeline/UIDevtoolsController.js

+/*
+ * Copyright (C) 2019 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
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * 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.
+ */
+
+/**
+ * @extends {Timeline.TimelineController}
+ * @unrestricted
+ */
+Timeline.UIDevtoolsController = class extends Timeline.TimelineController {
+  constructor(target, client) {
+    super(target, client);
+    Timeline.TimelineUIUtils.setEventStylesMap(Timeline.UIDevtoolsUtils.categorizeEvents());
+    Timeline.TimelineUIUtils.setCategories(Timeline.UIDevtoolsUtils.categories());
+    Timeline.TimelineUIUtils.setTimelineMainEventCategories(Timeline.UIDevtoolsUtils.getMainCategoriesList());
+  }
+};
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/timeline/UIDevtoolsUtils.js

+/*
+ * Copyright (C) 2019 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
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * 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.
+ */
+
+/**
+ * @unrestricted
+ */
+Timeline.UIDevtoolsUtils = class {
+  /**
+   * @return {boolean}
+   */
+  static isUiDevTools() {
+    return Runtime.queryParam('uiDevTools') === 'true';
+  }
+
+  /**
+   * @return {!Object.<string, !Timeline.TimelineRecordStyle>}
+   */
+  static categorizeEvents() {
+    if (Timeline.UIDevtoolsUtils._eventStylesMap) {
+      return Timeline.UIDevtoolsUtils._eventStylesMap;
+    }
+
+    const type = Timeline.UIDevtoolsUtils.RecordType;
+    const categories = Timeline.UIDevtoolsUtils.categories();
+    const drawing = categories['drawing'];
+    const rasterizing = categories['rasterizing'];
+    const layout = categories['layout'];
+    const painting = categories['painting'];
+    const other = categories['other'];
+
+    const eventStyles = {};
+
+    // Paint Categories
+    eventStyles[type.ViewPaint] = new Timeline.TimelineRecordStyle(ls`View::Paint`, painting);
+    eventStyles[type.ViewOnPaint] = new Timeline.TimelineRecordStyle(ls`View::OnPaint`, painting);
+    eventStyles[type.ViewPaintChildren] = new Timeline.TimelineRecordStyle(ls`View::PaintChildren`, painting);
+    eventStyles[type.ViewOnPaintBackground] = new Timeline.TimelineRecordStyle(ls`View::OnPaintBackground`, painting);
+    eventStyles[type.ViewOnPaintBorder] = new Timeline.TimelineRecordStyle(ls`View::OnPaintBorder`, painting);
+    eventStyles[type.LayerPaintContentsToDisplayList] =
+        new Timeline.TimelineRecordStyle(ls`Layer::PaintContentsToDisplayList`, painting);
+
+    // Layout Categories
+    eventStyles[type.ViewLayout] = new Timeline.TimelineRecordStyle(ls`View::Layout`, layout);
+    eventStyles[type.ViewLayoutBoundsChanged] =
+        new Timeline.TimelineRecordStyle(ls`View::Layout(bounds_changed)`, layout);
+
+    // Raster Categories
+    eventStyles[type.RasterTask] = new Timeline.TimelineRecordStyle(ls`RasterTask`, rasterizing);
+    eventStyles[type.RasterizerTaskImplRunOnWorkerThread] =
+        new Timeline.TimelineRecordStyle(ls`RasterizerTaskImpl::RunOnWorkerThread`, rasterizing);
+
+    // Draw Categories
+    eventStyles[type.DirectRendererDrawFrame] =
+        new Timeline.TimelineRecordStyle(ls`DirectRenderer::DrawFrame`, drawing);
+    eventStyles[type.BeginFrame] = new Timeline.TimelineRecordStyle(ls`Frame Start`, drawing, true);
+    eventStyles[type.DrawFrame] = new Timeline.TimelineRecordStyle(ls`Draw Frame`, drawing, true);
+    eventStyles[type.NeedsBeginFrameChanged] =
+        new Timeline.TimelineRecordStyle(ls`NeedsBeginFrameChanged`, drawing, true);
+
+    // Other Categories
+    eventStyles[type.ThreadControllerImplRunTask] =
+        new Timeline.TimelineRecordStyle(ls`ThreadControllerImpl::RunTask`, other);
+
+    Timeline.UIDevtoolsUtils._eventStylesMap = eventStyles;
+    return eventStyles;
+  }
+
+  /**
+   * @return {!Object.<string, !Timeline.TimelineCategory>}
+   */
+  static categories() {
+    if (Timeline.UIDevtoolsUtils._categories) {
+      return Timeline.UIDevtoolsUtils._categories;
+    }
+    Timeline.UIDevtoolsUtils._categories = {
+      layout: new Timeline.TimelineCategory('layout', ls`Layout`, true, 'hsl(214, 67%, 74%)', 'hsl(214, 67%, 66%)'),
+      rasterizing: new Timeline.TimelineCategory(
+          'rasterizing', ls`Rasterizing`, true, 'hsl(43, 83%, 72%)', 'hsl(43, 83%, 64%) '),
+      drawing: new Timeline.TimelineCategory('drawing', ls`Drawing`, true, 'hsl(256, 67%, 76%)', 'hsl(256, 67%, 70%)'),
+      painting:
+          new Timeline.TimelineCategory('painting', ls`Painting`, true, 'hsl(109, 33%, 64%)', 'hsl(109, 33%, 55%)'),
+      other: new Timeline.TimelineCategory('other', ls`System`, false, 'hsl(0, 0%, 87%)', 'hsl(0, 0%, 79%)'),
+      idle: new Timeline.TimelineCategory('idle', ls`Idle`, false, 'hsl(0, 0%, 98%)', 'hsl(0, 0%, 98%)')
+    };
+    return Timeline.UIDevtoolsUtils._categories;
+  }
+
+  /**
+   * @return {!Array}
+   */
+  static getMainCategoriesList() {
+    return ['idle', 'drawing', 'painting', 'rasterizing', 'layout', 'other'];
+  }
+};
+
+
+/**
+ * @enum {string}
+ */
+Timeline.UIDevtoolsUtils.RecordType = {
+  ViewPaint: 'View::Paint',
+  ViewOnPaint: 'View::OnPaint',
+  ViewPaintChildren: 'View::PaintChildren',
+  ViewOnPaintBackground: 'View::OnPaintBackground',
+  ViewOnPaintBorder: 'View::OnPaintBorder',
+  ViewLayout: 'View::Layout',
+  ViewLayoutBoundsChanged: 'View::Layout(bounds_changed)',
+  LayerPaintContentsToDisplayList: 'Layer::PaintContentsToDisplayList',
+  DirectRendererDrawFrame: 'DirectRenderer::DrawFrame',
+  RasterTask: 'RasterTask',
+  RasterizerTaskImplRunOnWorkerThread: 'RasterizerTaskImpl::RunOnWorkerThread',
+  BeginFrame: 'BeginFrame',
+  DrawFrame: 'DrawFrame',
+  NeedsBeginFrameChanged: 'NeedsBeginFrameChanged',
+  ThreadControllerImplRunTask: 'ThreadControllerImpl::RunTask',
+};

third_party/blink/renderer/devtools/front_end/timeline/module.json

@@ -248,7 +248,9 @@
         "TimelineUIUtils.js",
         "TimelineLayersView.js",
         "TimelinePaintProfilerView.js",
-        "TimelinePanel.js"
+        "TimelinePanel.js",
+        "UIDevtoolsUtils.js",
+        "UIDevtoolsController.js"
     ],
     "resources": [
         "historyToolbarButton.css",

third_party/blink/renderer/devtools/front_end/timeline/timeline_strings.grdp

@@ -75,6 +75,9 @@
   <message name="IDS_DEVTOOLS_09d66464ad53e6080988ad30824ea023" desc="Text in Timeline Flame Chart Data Provider of the Performance panel">
     Frame — <ph name="TRACK_URL">$1s<ex>https://example.com</ex></ph>
   </message>
+  <message name="IDS_DEVTOOLS_0a9d131e2c626ead31d9ecb8c54e3372" desc="Text in UIDevtools Utils of the Performance panel">
+    View::OnPaintBackground
+  </message>
   <message name="IDS_DEVTOOLS_0d015d96f63a8c12d96b8399482b593f" desc="Text in Timeline UIUtils of the Performance panel">
     Uncategorized
   </message>
@@ -175,6 +178,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_2a0e96bf571559add541036a25ca1d36" desc="Text in Timeline UIUtils of the Performance panel">
     Call Stacks
   </message>
+  <message name="IDS_DEVTOOLS_2a4d793c571c935ed156c25249a45219" desc="Text in UIDevtools Utils of the Performance panel">
+    View::OnPaintBorder
+  </message>
   <message name="IDS_DEVTOOLS_2a5021aea912316167342b34cbf358b4" desc="Text in Timeline UIUtils of the Performance panel">
     Compile Module
   </message>
@@ -262,6 +268,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_3df7062234c9e55d49648289c5b2c80f" desc="Text in Timeline UIUtils of the Performance panel">
     Time spent in rendering
   </message>
+  <message name="IDS_DEVTOOLS_3e8436f8c107f458c78f61101ef33bef" desc="Text in UIDevtools Utils of the Performance panel">
+    DirectRenderer::DrawFrame
+  </message>
   <message name="IDS_DEVTOOLS_3e8e23cb13898f3f9760a0f1d9203bd1" desc="Text of a DOM element in Timeline UIUtils of the Performance panel">
     Stack trace:
   </message>
@@ -394,6 +403,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_5fbceaa309bba91ee916d46e06ac0080" desc="Text in Timeline UIUtils of the Performance panel">
     Touch Move
   </message>
+  <message name="IDS_DEVTOOLS_5fc3cf362fe793dce7e093c63b583f88" desc="Text in UIDevtools Utils of the Performance panel">
+    View::Layout(bounds_changed)
+  </message>
   <message name="IDS_DEVTOOLS_5fe7053d3a0e35c2a3242996e690e160" desc="Text in Timeline UIUtils of the Performance panel">
     Update Layer
   </message>
@@ -430,6 +442,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_67eed98f4bc75c4ab261b79a0e2c52cd" desc="Text in Timeline UIUtils of the Performance panel">
     Cache Rejected
   </message>
+  <message name="IDS_DEVTOOLS_681d72abce5de4f856e71bfb1856796b" desc="Text in UIDevtools Utils of the Performance panel">
+    Drawing
+  </message>
   <message name="IDS_DEVTOOLS_686155af75a60a0f6e9d80c1f7edd3e9" desc="Text in Timeline Tree View of the Performance panel">
     JavaScript
   </message>
@@ -454,6 +469,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_6d8a59067ffe0498f3f5f2c03025b799" desc="Text in Timeline Tree View of the Performance panel">
     Group by URL
   </message>
+  <message name="IDS_DEVTOOLS_6ebfbd6a11e852377844c8fd6e1608cc" desc="Text in UIDevtools Utils of the Performance panel">
+    View::OnPaint
+  </message>
   <message name="IDS_DEVTOOLS_70582905817c902e7a334c24718cba88" desc="Text in Timeline UIUtils of the Performance panel">
     Touch End
   </message>
@@ -469,6 +487,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_71613aba6474d2e2dc12d00cc46743f0" desc="Text in Timeline UIUtils of the Performance panel">
     Touch Start
   </message>
+  <message name="IDS_DEVTOOLS_733bca87dd487283ef74a651c4eea432" desc="Text in UIDevtools Utils of the Performance panel">
+    View::PaintChildren
+  </message>
   <message name="IDS_DEVTOOLS_7363d05ecc1497f2f8ae05b334b45651" desc="Title of disable capture jsprofile setting in timeline panel of the performance panel">
     Disable JavaScript samples
   </message>
@@ -523,6 +544,9 @@ Click the reload button <ph name="RELOADBUTTON">$3s<ex>reload</ex></ph> or hit <
   <message name="IDS_DEVTOOLS_86c8559f4d7d1d74dc3e04baf2b65cc6" desc="Text in Timeline UIUtils of the Performance panel">
     Decoded Body
   </message>
+  <message name="IDS_DEVTOOLS_86d31b04bab25c0e7f353b8b3a000445" desc="Text in UIDevtools Utils of the Performance panel">
+    Rasterizing
+  </message>
   <message name="IDS_DEVTOOLS_871646cb17b6936aa29df33b8d550051" desc="Text in Timeline UIUtils of the Performance panel">
     Update Layer Tree
   </message>
@@ -627,6 +651,9 @@ Then, zoom and pan the timeline with the mousewheel or <ph name="NAVIGATENODE">$
   <message name="IDS_DEVTOOLS_a10717d996573373c8f9a01c49bbb6a5" desc="Text in Timeline Panel of the Performance panel">
     Loading profile…
   </message>
+  <message name="IDS_DEVTOOLS_a34991663b140f981410a06acc058849" desc="Text in UIDevtools Utils of the Performance panel">
+    ThreadControllerImpl::RunTask
+  </message>
   <message name="IDS_DEVTOOLS_a3b61900010aa9472919c6c7ac247fed" desc="Text of a DOM element in Timeline UIUtils of the Performance panel">
     (changed id to &quot;<ph name="INVALIDATION_CHANGEDID">$1s<ex>id2</ex></ph>&quot;<ph name="EXTRADATA">$2s<ex>a, b</ex></ph>)
   </message>
@@ -645,6 +672,9 @@ Then, zoom and pan the timeline with the mousewheel or <ph name="NAVIGATENODE">$
   <message name="IDS_DEVTOOLS_a7c815fafe60ae637d38216fa6300395" desc="Text in Timeline UIUtils of the Performance panel">
     FCP
   </message>
+  <message name="IDS_DEVTOOLS_a9e8acf624d918c753e98cefbd2352c9" desc="Text in UIDevtools Utils of the Performance panel">
+    NeedsBeginFrameChanged
+  </message>
   <message name="IDS_DEVTOOLS_aa40d845ecb78d5bd01ff8b0cc9e213e" desc="Text in Timeline UIUtils of the Performance panel">
     Receive Data
   </message>
@@ -696,6 +726,9 @@ Then, zoom and pan the timeline with the mousewheel or <ph name="NAVIGATENODE">$
   <message name="IDS_DEVTOOLS_b4c7087912916a68642000d8759baec2" desc="Text in Timeline UIUtils of the Performance panel">
     Scroll Begin
   </message>
+  <message name="IDS_DEVTOOLS_b4ecf19a9a7427854c0b9bfa03260707" desc="Text in UIDevtools Utils of the Performance panel">
+    View::Layout
+  </message>
   <message name="IDS_DEVTOOLS_b53fbbb58656447400f07904e68c0f12" desc="Text in Timeline UIUtils of the Performance panel">
     Create WebSocket
   </message>
@@ -789,6 +822,9 @@ Then, zoom and pan the timeline with the mousewheel or <ph name="NAVIGATENODE">$
   <message name="IDS_DEVTOOLS_cf56f8ebb3727b1d4d5a17fb18d4df74" desc="Text in Timeline UIUtils of the Performance panel">
     Paint Setup
   </message>
+  <message name="IDS_DEVTOOLS_cfa720bcf2892b7532563ba7e661fc94" desc="Text in UIDevtools Utils of the Performance panel">
+    View::Paint
+  </message>
   <message name="IDS_DEVTOOLS_d0369e883465f2849df8b38966901bbf" desc="Text in Timeline Panel of the Performance panel">
     CPU:
   </message>
@@ -798,6 +834,9 @@ Then, zoom and pan the timeline with the mousewheel or <ph name="NAVIGATENODE">$
   <message name="IDS_DEVTOOLS_d0c91aff68287a1a0003af56b91cadde" desc="Range text content in Counters Graph of the Performance panel">
     [<ph name="MIN">$1s<ex>2</ex></ph> – <ph name="MAX">$2s<ex>10</ex></ph>]
   </message>
+  <message name="IDS_DEVTOOLS_d147f3c372833715f5bcff727b0665aa" desc="Text in UIDevtools Utils of the Performance panel">
+    RasterizerTaskImpl::RunOnWorkerThread
+  </message>
   <message name="IDS_DEVTOOLS_d14e91fe7abe33fc8a05c193fc812d68" desc="Text in Timeline UIUtils of the Performance panel">
     Mime Type
   </message>
@@ -876,6 +915,9 @@ Then, zoom and pan the timeline with the mousewheel or <ph name="NAVIGATENODE">$
   <message name="IDS_DEVTOOLS_dfe67b764ba5e3f6b674f049db64e165" desc="Call site stack label in Timeline UIUtils of the Performance panel">
     First Layout Invalidation
   </message>
+  <message name="IDS_DEVTOOLS_e0421c199e321b5a5c4379892d6e16e9" desc="Text in UIDevtools Utils of the Performance panel">
+    RasterTask
+  </message>
   <message name="IDS_DEVTOOLS_e0c70bcb54d7f58615eb895c232049ce" desc="Text in Timeline UIUtils of the Performance panel">
     Composite Layers
   </message>
@@ -942,6 +984,9 @@ Then, zoom and pan the timeline with the mousewheel or <ph name="NAVIGATENODE">$
   <message name="IDS_DEVTOOLS_f5baffc95ebfe1ede488388589db922b" desc="Title in Timeline UIUtils of the Performance panel">
     Other Invalidations
   </message>
+  <message name="IDS_DEVTOOLS_f8dd1d7ea0aea500de367999ebba5c47" desc="Text in UIDevtools Utils of the Performance panel">
+    Layer::PaintContentsToDisplayList
+  </message>
   <message name="IDS_DEVTOOLS_fa7c73b6eb5f3c3b77e47d8a4557af3e" desc="Title of an action in the timeline tool to load from file">
     Load profile…
   </message>

third_party/blink/web_tests/http/tests/devtools/tracing/ui-devtools-not-generic-trace-expected.txt

+Checks Ui DevTools performance panel does not use generic tracing.
+
+isGenericTrace: false
+
+Number of frames: 3
+
+

third_party/blink/web_tests/http/tests/devtools/tracing/ui-devtools-not-generic-trace.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Checks Ui DevTools performance panel does not use generic tracing.\n`);
+  Runtime.experiments.enableForTest('timelineShowAllEvents');
+  await TestRunner.loadModule('performance_test_runner');
+  await TestRunner.showPanel('timeline');
+
+  const rawTraceEvents = [
+    {
+      'args': {'name': 'CrBrowserMain'},
+      'cat': '__metadata',
+      'name': 'process_name',
+      'ph': 'M',
+      'pid': 10000,
+      'tid': 123,
+      'ts': 0
+    },
+    {
+      'args': {
+        "data": {
+          "persistentIds":true,
+          "frames": [
+            { "frame":"ui_devtools_browser_frame", "name":"Browser",
+              "processId":10000 },
+            { "frame":"ui_devtools_gpu_frame", "name":"Gpu",
+              "processId":20000 },
+          ]
+        }
+      },
+      'cat': 'disabled-by-default-devtools.timeline',
+      'name': 'TracingStartedInBrowser',
+      'ph': 'I',
+      'pid': 17800,
+      'tid': 123,
+      'ts': 100000,
+      'tts': 606543
+    },
+    {"pid":10000,"tid":210657,"ts":382830364662,"ph":"X","cat":"viz,benchmark","name":"DirectRenderer::DrawFrame","dur":895,"tdur":895,"tts":1341607,"args":{}},
+    {"pid":10000,"tid":210683,"ts":382830893114,"ph":"B","cat":"cc,disabled-by-default-devtools.timeline","name":"RasterTask","tts":28550,"args":{"tileData":{"tileId":{"id_ref":"0x298e7bb83210"},"tileResolution":"HIGH_RESOLUTION","sourceFrameNumber":37,"layerId":82}}},
+    {"pid":10000,"tid":10000,"ts":100500,"ph":"I","cat":"disabled-by-default-devtools.timeline","name":"SetLayerTreeId","s":"t","tts":606560,"args":{"data":{"frame":"ui_devtools_browser_frame","layerTreeId":1}}},
+    {"pid":10000,"tid":10000,"ts":101000,"ph":"I","cat":"disabled-by-default-devtools.timeline.frame","name":"BeginFrame","s":"t","tts":606660,"args":{"layerTreeId":1}},
+    {"pid":10000,"tid":10000,"ts":101200,"ph":"I","cat":"disabled-by-default-devtools.timeline.frame","name":"DrawFrame","s":"t","tts":606760,"args":{"layerTreeId":1}},
+    {"pid":10000,"tid":10000,"ts":101300,"ph":"I","cat":"disabled-by-default-devtools.timeline.frame","name":"DrawFrame","s":"t","tts":606860,"args":{"layerTreeId":1}},
+    {"pid":10000,"tid":10000,"ts":101400,"ph":"I","cat":"disabled-by-default-devtools.timeline.frame","name":"DrawFrame","s":"t","tts":606960,"args":{"layerTreeId":1}},
+  ];
+
+  const timeline = UI.panels.timeline;
+  const model = PerformanceTestRunner.createPerformanceModelWithEvents(rawTraceEvents);
+  timeline._setModel(model);
+
+  TestRunner.addResult(`isGenericTrace: ${model.timelineModel().isGenericTrace()}\n`);
+  const frames = timeline._flameChart._mainDataProvider._performanceModel.frames();
+  TestRunner.addResult(`Number of frames: ${frames.length}\n`);
+
+  TestRunner.completeTest();
+})();