[tools] Fix v8-heap-stats

Don't use deprecated HTML Imports, directly fetch the template files from
html instead.

Bug: v8:10155
Change-Id: Ic85a8b2cf227231fc6abf5adca6f1f144bf728f2
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2113371
Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Commit-Queue: Igor Sheludko <ishell@chromium.org>
Cr-Commit-Position: refs/heads/master@{#66825}

tools/heap-stats/categories.js

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 // Categories for instance types.
-const CATEGORIES = new Map([
+export const CATEGORIES = new Map([
   [
     'user', new Set([
       'CONS_ONE_BYTE_STRING_TYPE',
@@ -204,7 +204,7 @@ const CATEGORIES = new Map([
 ]);
 
 // Maps category to description text that is shown in html.
-const CATEGORY_NAMES = new Map([
+export const CATEGORY_NAMES = new Map([
   ['user', 'JS'],
   ['system', 'Metadata'],
   ['code', 'Code'],

tools/heap-stats/details-selection-template.html

@@ -1,7 +1,6 @@
 <!-- Copyright 2018 the V8 project authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
-<template id="details-selection-template">
 <style>
 #dataSelectionSection {
   display: none;
@@ -139,7 +138,3 @@ found in the LICENSE file. -->
 
   <div id="categories"></div>
 </section>
-</template>
-
-<script type="text/javascript" src="categories.js"></script>
-<script type="text/javascript" src="details-selection.js"></script>

tools/heap-stats/details-selection.js

@@ -4,19 +4,18 @@
 
 'use strict';
 
-const details_selection_template =
-    document.currentScript.ownerDocument.querySelector(
-        '#details-selection-template');
+import {CATEGORIES, CATEGORY_NAMES} from '/categories.js';
 
-const VIEW_BY_INSTANCE_TYPE = 'by-instance-type';
-const VIEW_BY_INSTANCE_CATEGORY = 'by-instance-category';
-const VIEW_BY_FIELD_TYPE = 'by-field-type';
+export const VIEW_BY_INSTANCE_TYPE = 'by-instance-type';
+export const VIEW_BY_INSTANCE_CATEGORY = 'by-instance-category';
+export const VIEW_BY_FIELD_TYPE = 'by-field-type';
 
-class DetailsSelection extends HTMLElement {
+defineCustomElement('details-selection', (templateText) =>
+ class DetailsSelection extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({mode: 'open'});
-    shadowRoot.appendChild(details_selection_template.content.cloneNode(true));
+    shadowRoot.innerHTML = templateText;
     this.isolateSelect.addEventListener(
         'change', e => this.handleIsolateChange(e));
     this.dataViewSelect.addEventListener(
@@ -403,6 +402,4 @@ class DetailsSelection extends HTMLElement {
     link.click();
     this.shadowRoot.removeChild(link);
   }
-}
-
-customElements.define('details-selection', DetailsSelection);
+});

tools/heap-stats/global-timeline-template.html

@@ -1,7 +1,6 @@
 <!-- Copyright 2018 the V8 project authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
-<template id="global-timeline-template">
 <style>
 #chart {
   width: 100%;
@@ -12,5 +11,3 @@ found in the LICENSE file. -->
   <h2>Timeline</h2>
   <div id="chart"></div>
 </div>
-</template>
-<script type="text/javascript" src="global-timeline.js"></script>

tools/heap-stats/global-timeline.js

@@ -4,15 +4,18 @@
 
 'use strict';
 
-const global_timeline_template =
-    document.currentScript.ownerDocument.querySelector(
-        '#global-timeline-template');
+import {
+  VIEW_BY_INSTANCE_TYPE,
+  VIEW_BY_INSTANCE_CATEGORY,
+  VIEW_BY_FIELD_TYPE
+} from '/details-selection.js';
 
-class GlobalTimeline extends HTMLElement {
+defineCustomElement('global-timeline', (templateText) =>
+ class GlobalTimeline extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({mode: 'open'});
-    shadowRoot.appendChild(global_timeline_template.content.cloneNode(true));
+    shadowRoot.innerHTML = templateText;
   }
 
   $(id) {
@@ -217,6 +220,4 @@ class GlobalTimeline extends HTMLElement {
     this.show();
     chart.draw(data, google.charts.Line.convertOptions(options));
   }
-}
-
-customElements.define('global-timeline', GlobalTimeline);
+});

tools/heap-stats/helper.js

@@ -21,3 +21,10 @@ function formatBytes(bytes) {
 function formatSeconds(millis) {
   return (millis * kMillis2Seconds).toFixed(2) + 's';
 }
+
+function defineCustomElement(name, generator) {
+  let htmlTemplatePath = name + '-template.html';
+  fetch(htmlTemplatePath)
+    .then(stream => stream.text())
+    .then(templateText => customElements.define(name, generator(templateText)));
+}

tools/heap-stats/histogram-viewer-template.html

@@ -1,7 +1,6 @@
 <!-- Copyright 2018 the V8 project authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
-<template id="histogram-viewer-template">
 <style>
 #chart {
   width: 100%;
@@ -15,5 +14,3 @@ found in the LICENSE file. -->
   </ul>
   <div id="chart"></div>
 </div>
-</template>
-<script type="text/javascript"  src="histogram-viewer.js"></script>

tools/heap-stats/histogram-viewer.js

@@ -4,15 +4,18 @@
 
 'use strict';
 
-const histogram_viewer_template =
-    document.currentScript.ownerDocument.querySelector(
-        '#histogram-viewer-template');
+import {
+  VIEW_BY_INSTANCE_TYPE,
+  VIEW_BY_INSTANCE_CATEGORY,
+  VIEW_BY_FIELD_TYPE
+} from '/details-selection.js';
 
-class HistogramViewer extends HTMLElement {
+defineCustomElement('histogram-viewer', (templateText) =>
+ class HistogramViewer extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({mode: 'open'});
-    shadowRoot.appendChild(histogram_viewer_template.content.cloneNode(true));
+    shadowRoot.innerHTML = templateText;
   }
 
   $(id) {
@@ -185,6 +188,4 @@ class HistogramViewer extends HTMLElement {
     this.show();
     chart.draw(data, options);
   }
-}
-
-customElements.define('histogram-viewer', HistogramViewer);
+});

tools/heap-stats/index.html

@@ -18,10 +18,10 @@ found in the LICENSE file. -->
 
   <script src="helper.js"></script>
 
-  <link rel="import" href="details-selection.html">
-  <link rel="import" href="global-timeline.html">
-  <link rel="import" href="histogram-viewer.html">
-  <link rel="import" href="trace-file-reader.html">
+  <script type="module" src="/details-selection.js"></script>
+  <script type="module" src="/global-timeline.js"></script>
+  <script type="module" src="/histogram-viewer.js"></script>
+  <script type="module" src="/trace-file-reader.js"></script>
 
   <style>
 body {

tools/heap-stats/model.js

@@ -4,7 +4,7 @@
 
 'use strict';
 
-class Isolate {
+export class Isolate {
   constructor(address) {
     this.address = address;
     this.start = null;

tools/heap-stats/trace-file-reader-template.html

@@ -1,7 +1,6 @@
 <!-- Copyright 2018 the V8 project authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file. -->
-<template id="trace-file-reader-template">
 <style>
 #fileReader {
   width: 100%;
@@ -80,7 +79,3 @@ found in the LICENSE file. -->
     <div id="spinner"></div>
   </div>
 </section>
-</template>
-<script type="text/javascript" src="model.js"></script>
-
-<script src="trace-file-reader.js"></script>

tools/heap-stats/trace-file-reader.js

@@ -4,15 +4,14 @@
 
 'use strict';
 
-const trace_file_reader_template =
-    document.currentScript.ownerDocument.querySelector(
-        '#trace-file-reader-template');
+import {Isolate} from '/model.js';
 
-class TraceFileReader extends HTMLElement {
+defineCustomElement('trace-file-reader', (templateText) =>
+ class TraceFileReader extends HTMLElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow({mode: 'open'});
-    shadowRoot.appendChild(trace_file_reader_template.content.cloneNode(true));
+    shadowRoot.innerHTML = templateText;
     this.addEventListener('click', e => this.handleClick(e));
     this.addEventListener('dragover', e => this.handleDragOver(e));
     this.addEventListener('drop', e => this.handleChange(e));
@@ -314,6 +313,4 @@ class TraceFileReader extends HTMLElement {
     }
     return data;
   }
-}
-
-customElements.define('trace-file-reader', TraceFileReader);
+});