DevTools: Initial implementation of text view for native memory profiles.

The text representation can be easily copied to the symbolization service.

BUG=803276

Change-Id: Ice8157f0ba7544be4b300d5a97df36d41cc02db6
Reviewed-on: https://chromium-review.googlesource.com/1130498Reviewed-by: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Commit-Queue: Alexei Filippov <alph@chromium.org>
Cr-Commit-Position: refs/heads/master@{#573548}

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

@@ -17,6 +17,11 @@ Profiler.HeapProfileView = class extends Profiler.ProfileView {
     const views = [
       Profiler.ProfileView.ViewTypes.Flame, Profiler.ProfileView.ViewTypes.Heavy, Profiler.ProfileView.ViewTypes.Tree
     ];
+    const isNativeProfile = [
+      Profiler.SamplingNativeHeapProfileType.TypeId, Profiler.SamplingNativeHeapSnapshotType.TypeId
+    ].includes(profileHeader.profileType().id);
+    if (isNativeProfile)
+      views.push(Profiler.ProfileView.ViewTypes.Text);
     this.initialize(new Profiler.HeapProfileView.NodeFormatter(this), views);
   }
 
@@ -42,6 +47,37 @@ Profiler.HeapProfileView = class extends Profiler.ProfileView {
   createFlameChartDataProvider() {
     return new Profiler.HeapFlameChartDataProvider(this.profile, this._profileHeader.heapProfilerModel());
   }
+
+  /**
+   * @override
+   * @param {!UI.SimpleView} view
+   */
+  populateTextView(view) {
+    const guides = '+!:|';
+    let text = `Sampling memory profile.\n\nDate/Time:       ${new Date()}\n` +
+        `Report Version:  7\nNode weight:     1 KiB\n----\n\nCall graph:\n`;
+    const sortedChildren = this.profile.root.children.sort((a, b) => b.total - a.total);
+    for (const child of sortedChildren)
+      printTree('    ', child !== sortedChildren.peekLast(), child);
+    view.contentElement.createChild('pre', 'profile-text-view monospace').textContent = text;
+
+    /**
+     * @param {string} padding
+     * @param {boolean} drawGuide
+     * @param {!SDK.ProfileNode} node
+     */
+    function printTree(padding, drawGuide, node) {
+      const isAddress = node.functionName.startsWith('0x');
+      const functionName = isAddress ? '???' : node.functionName;
+      const address = isAddress ? node.functionName : '???';
+      text += `${padding}${Math.round(node.total / 1024)}  ${functionName}  [${address}]\n`;
+      const guideChar = drawGuide ? guides[padding.length / 2 % guides.length] : ' ';
+      const nextPadding = padding + guideChar + ' ';
+      const sortedChildren = node.children.sort((a, b) => b.total - a.total);
+      for (const child of sortedChildren)
+        printTree(nextPadding, child !== sortedChildren.peekLast(), child);
+    }
+  }
 };
 
 /**

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

@@ -75,9 +75,10 @@ Profiler.ProfileView = class extends UI.SimpleView {
     ];
 
     const optionNames = new Map([
-      [Profiler.ProfileView.ViewTypes.Flame, Common.UIString('Chart')],
-      [Profiler.ProfileView.ViewTypes.Heavy, Common.UIString('Heavy (Bottom Up)')],
-      [Profiler.ProfileView.ViewTypes.Tree, Common.UIString('Tree (Top Down)')],
+      [Profiler.ProfileView.ViewTypes.Flame, ls`Chart`],
+      [Profiler.ProfileView.ViewTypes.Heavy, ls`Heavy (Bottom Up)`],
+      [Profiler.ProfileView.ViewTypes.Tree, ls`Tree (Top Down)`],
+      [Profiler.ProfileView.ViewTypes.Text, ls`Text (Top Down)`],
     ]);
 
     const options =
@@ -240,6 +241,20 @@ Profiler.ProfileView = class extends UI.SimpleView {
     return this._linkifier;
   }
 
+  _ensureTextViewCreated() {
+    if (this._textView)
+      return;
+    this._textView = new UI.SimpleView(ls`Call tree`);
+    this._textView.registerRequiredCSS('profiler/profilesPanel.css');
+    this.populateTextView(this._textView);
+  }
+
+  /**
+   * @param {!UI.SimpleView} view
+   */
+  populateTextView(view) {
+  }
+
   /**
    * @return {!PerfUI.FlameChartDataProvider}
    */
@@ -300,6 +315,11 @@ Profiler.ProfileView = class extends UI.SimpleView {
         this._visibleView = this.dataGrid.asWidget();
         this._searchableElement = this.profileDataGridTree;
         break;
+      case Profiler.ProfileView.ViewTypes.Text:
+        this._ensureTextViewCreated();
+        this._visibleView = this._textView;
+        this._searchableElement = this._textView;
+        break;
     }
 
     const isFlame = this._viewType.get() === Profiler.ProfileView.ViewTypes.Flame;
@@ -377,7 +397,8 @@ Profiler.ProfileView._maxLinkLength = 30;
 Profiler.ProfileView.ViewTypes = {
   Flame: 'Flame',
   Tree: 'Tree',
-  Heavy: 'Heavy'
+  Heavy: 'Heavy',
+  Text: 'Text'
 };
 
 

third_party/blink/renderer/devtools/front_end/profiler/profilesPanel.css

@@ -237,3 +237,11 @@ body.inactive .profile-launcher-view-content button.running:not(.toolbar-item) {
 .cpu-profile-flame-chart-overview-pane {
     flex: 0 0 80px !important;
 }
+
+.profile-text-view {
+    padding: 10px;
+    overflow: auto;
+    margin: 0;
+    user-select: text;
+    cursor: text;
+}