DevTools: Make line level profile support memory annotations.

BUG=937880

Change-Id: Ib222ad6cddf23b0f28863e75f1bc729e638c6ee4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1504460
Commit-Queue: Alexei Filippov <alph@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#638307}

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

@@ -5,6 +5,11 @@
             "className": "PerfUI.LineLevelProfile.LineDecorator",
             "decoratorType": "performance"
         },
+        {
+            "type": "@SourceFrame.LineDecorator",
+            "className": "PerfUI.LineLevelProfile.LineDecorator",
+            "decoratorType": "memory"
+        },
         {
             "type": "setting",
             "category": "Performance",

third_party/blink/renderer/devtools/front_end/profiler/CPUProfileView.js

@@ -46,7 +46,7 @@ Profiler.CPUProfileView = class extends Profiler.ProfileView {
    */
   wasShown() {
     super.wasShown();
-    const lineLevelProfile = PerfUI.LineLevelProfile.instance();
+    const lineLevelProfile = PerfUI.LineLevelProfile.Performance.instance();
     lineLevelProfile.reset();
     lineLevelProfile.appendCPUProfile(this._profileHeader.profileModel());
   }

third_party/blink/renderer/devtools/front_end/sdk/HeapProfilerModel.js

@@ -36,9 +36,12 @@ SDK.HeapProfilerModel = class extends SDK.SDKModel {
     this._heapProfilerAgent.enable();
   }
 
-  startSampling() {
+  /**
+   * @param {number=} samplingRateInBytes
+   */
+  startSampling(samplingRateInBytes) {
     const defaultSamplingIntervalInBytes = 16384;
-    this._heapProfilerAgent.startSampling(defaultSamplingIntervalInBytes);
+    this._heapProfilerAgent.startSampling(samplingRateInBytes || defaultSamplingIntervalInBytes);
   }
 
   /**

third_party/blink/renderer/devtools/front_end/source_frame/SourceFrame.js

@@ -757,8 +757,9 @@ SourceFrame.LineDecorator.prototype = {
   /**
    * @param {!Workspace.UISourceCode} uiSourceCode
    * @param {!TextEditor.CodeMirrorTextEditor} textEditor
+   * @param {string} type
    */
-  decorate(uiSourceCode, textEditor) {}
+  decorate(uiSourceCode, textEditor, type) {}
 };
 
 /**

third_party/blink/renderer/devtools/front_end/sources/UISourceCodeFrame.js

@@ -499,20 +499,18 @@ Sources.UISourceCodeFrame = class extends SourceFrame.SourceFrame {
   /**
    * @param {string} type
    */
-  _decorateTypeThrottled(type) {
+  async _decorateTypeThrottled(type) {
     if (this._typeDecorationsPending.has(type))
       return;
     this._typeDecorationsPending.add(type);
-    self.runtime.extensions(SourceFrame.LineDecorator)
-        .find(extension => extension.descriptor()['decoratorType'] === type)
-        .instance()
-        .then(decorator => {
-          this._typeDecorationsPending.delete(type);
-          this.textEditor.codeMirror().operation(() => {
-            decorator.decorate(
-                this._persistenceBinding ? this._persistenceBinding.network : this.uiSourceCode(), this.textEditor);
-          });
-        });
+    const decorator = await self.runtime.extensions(SourceFrame.LineDecorator)
+                          .find(extension => extension.descriptor()['decoratorType'] === type)
+                          .instance();
+    this._typeDecorationsPending.delete(type);
+    this.textEditor.codeMirror().operation(() => {
+      decorator.decorate(
+          this._persistenceBinding ? this._persistenceBinding.network : this.uiSourceCode(), this.textEditor, type);
+    });
   }
 
   _decorateAllTypes() {

third_party/blink/renderer/devtools/front_end/text_editor/cmdevtools.css

@@ -10,7 +10,13 @@
 }
 
 .CodeMirror-gutter-performance {
-    width: 74px;
+    width: 60px;
+    background-color: white;
+    margin-left: 3px;
+}
+
+.CodeMirror-gutter-memory {
+    width: 60px;
     background-color: white;
     margin-left: 3px;
 }
@@ -425,11 +431,16 @@ div.CodeMirror:focus-within span.CodeMirror-nonmatchingbracket {
     color: #eee;
 }
 
-.CodeMirror .text-editor-line-marker-performance {
+.CodeMirror .text-editor-line-marker-text {
     text-align: right;
     padding-right: 3px;
 }
 
+.CodeMirror .text-editor-line-marker-text span.line-marker-units {
+    color: #999;
+    margin-left: 3px;
+}
+
 .CodeMirror .text-editor-coverage-unused-marker {
     text-align: right;
     padding-right: 2px;

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

@@ -549,7 +549,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
   }
 
   _reset() {
-    PerfUI.LineLevelProfile.instance().reset();
+    PerfUI.LineLevelProfile.Performance.instance().reset();
     this._setModel(null);
   }
 
@@ -582,8 +582,10 @@ Timeline.TimelinePanel = class extends UI.Panel {
           Timeline.PerformanceModel.Events.WindowChanged, this._onModelWindowChanged, this);
       this._overviewPane.setBounds(
           model.timelineModel().minimumRecordTime(), model.timelineModel().maximumRecordTime());
+      const lineLevelProfile = PerfUI.LineLevelProfile.Performance.instance();
+      lineLevelProfile.reset();
       for (const profile of model.timelineModel().cpuProfiles())
-        PerfUI.LineLevelProfile.instance().appendCPUProfile(profile);
+        lineLevelProfile.appendCPUProfile(profile);
       this._setMarkers(model.timelineModel());
       this._flameChart.setSelection(null);
       this._overviewPane.setWindowTimes(model.window().left, model.window().right);

third_party/blink/web_tests/http/tests/devtools/tracing/timeline-js/timeline-js-line-level-profile-expected.txt

 Tests that a line-level CPU profile is shown in the text editor.
 
 .../devtools/tracing/resources/empty.js
-99 CodeMirror-gutter-performance 10.0 ms rgba(255, 187, 0, 0.263)
-101 CodeMirror-gutter-performance 1900.0 ms rgba(255, 187, 0, 0.718)
-0 CodeMirror-gutter-performance 100.0 ms rgba(255, 187, 0, 0.463)
-1 CodeMirror-gutter-performance 200.0 ms rgba(255, 187, 0, 0.52)
-2 CodeMirror-gutter-performance 300.0 ms rgba(255, 187, 0, 0.557)
-3 CodeMirror-gutter-performance 400.0 ms rgba(255, 187, 0, 0.58)
-54 CodeMirror-gutter-performance 220.0 ms rgba(255, 187, 0, 0.53)
+99 CodeMirror-gutter-performance 10.0ms rgba(255, 187, 0, 0.263)
+101 CodeMirror-gutter-performance 1900.0ms rgba(255, 187, 0, 0.718)
+0 CodeMirror-gutter-performance 100.0ms rgba(255, 187, 0, 0.463)
+1 CodeMirror-gutter-performance 200.0ms rgba(255, 187, 0, 0.52)
+2 CodeMirror-gutter-performance 300.0ms rgba(255, 187, 0, 0.557)
+3 CodeMirror-gutter-performance 400.0ms rgba(255, 187, 0, 0.58)
+54 CodeMirror-gutter-performance 220.0ms rgba(255, 187, 0, 0.53)
 

third_party/blink/web_tests/http/tests/devtools/tracing/timeline-js/timeline-js-line-level-profile.js

@@ -48,7 +48,7 @@
     var url = frame.uiSourceCode().url();
     TestRunner.addResult(TestRunner.formatters.formatAsURL(url));
     cpuProfile.nodes.forEach(n => n.callFrame.url = url);
-    var lineProfile = PerfUI.LineLevelProfile.instance();
+    var lineProfile = PerfUI.LineLevelProfile.Performance.instance();
     lineProfile.appendCPUProfile(new SDK.CPUProfileDataModel(cpuProfile));
     setTimeout(() => TestRunner.completeTest(), 0);
   }