ic-explorer.html 10.9 KB
Newer Older
1
<html>
2 3 4 5
<!--
Copyright 2016 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.
-->
6

7 8
<head>
  <style>
9 10 11 12
    html {
      font-family: monospace;
    }

13
    .entry-details {}
14

15
    .entry-details TD {}
16

17
    .details {
18 19 20 21 22 23 24 25 26 27
      width: 0.1em;
    }

    .details span {
      padding: 0 0.4em 0 0.4em;
      background-color: black;
      color: white;
      border-radius: 25px;
      text-align: center;
      cursor: -webkit-zoom-in;
28
    }
29

30 31 32 33
    .count {
      text-align: right;
      width: 5em;
    }
34

35 36 37 38
    .percentage {
      text-align: right;
      width: 5em;
    }
39

40 41
    .key {
      padding-left: 1em;
42
    }
43

44 45 46 47 48
    .drilldown-group-title {
      font-weight: bold;
      padding: 0.5em 0 0.2em 0;
    }
  </style>
49 50 51 52 53 54 55 56 57 58
  <script src="./splaytree.js" type="text/javascript"></script>
  <script src="./codemap.js" type="text/javascript"></script>
  <script src="./csvparser.js" type="text/javascript"></script>
  <script src="./consarray.js" type="text/javascript"></script>
  <script src="./profile.js" type="text/javascript"></script>
  <script src="./profile_view.js" type="text/javascript"></script>
  <script src="./logreader.js" type="text/javascript"></script>
  <script src="./ic-processor.js" type="text/javascript"></script>
  <script src="./SourceMap.js" type="text/javascript"></script>

59 60
  <script>
    "use strict"
61 62 63 64 65 66
    let entries = [];

    let properties = ['type', 'category', 'functionName', 'filePosition',
      'state', 'key', 'map', 'reason', 'file',
    ];

67
    // For compatibility with console scripts:
68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
    print = console.log;

    class CustomIcProcessor extends IcProcessor {
      constructor() {
        super();
        this.entries = [];
      }

      functionName(pc) {
        let entry = this.profile_.findEntry(pc);
        return this.formatName(entry);
      }

      processPropertyIC(type, pc, line, column, old_state, new_state, map, key,
          modifier, slow_reason) {
        let fnName = this.functionName(pc);
        this.entries.push(new Entry(type, fnName, line, column, key,
          old_state, new_state, map, slow_reason));

      }
    };
89

90

91
    class Entry {
92 93 94 95
      constructor(type, fn_file, line, column, key, oldState, newState,
          map, reason, additional) {
        this.type = type;
        this.category = "other";
96 97 98 99 100
        if (this.type.indexOf("Store") !== -1) {
          this.category = "Store";
        } else if (this.type.indexOf("Load") !== -1) {
          this.category = "Load";
        }
101 102 103 104 105 106 107 108 109 110 111 112
        let parts = fn_file.split(" ");
        this.functionName = parts[0];
        this.file = parts[1];
        let position = line + ":" + column;
        this.filePosition = this.file + ":" + position;
        this.oldState = oldState;
        this.newState = newState;
        this.state = this.oldState + " → " + this.newState;
        this.key = key;
        this.map = map.toString(16);
        this.reason = reason;
        this.additional = additional;
113
      }
114

115
      parseMapProperties(parts, offset) {
116
        let next = parts[++offset];
117
        if (!next.startsWith('dict')) return offset;
118
        this.propertiesMode =
119 120
          next.substr(5) == "0" ? "fast" : "slow";
        this.numberOfOwnProperties = parts[++offset].substr(4);
121
        next = parts[++offset];
122
        this.instanceType = next.substr(5, next.length - 6);
123 124 125
        return offset;
      }

126 127
      parsePositionAndFile(parts, start) {
        // find the position of 'at' in the parts array.
128 129
        let offset = start;
        for (let i = start + 1; i < parts.length; i++) {
130 131 132 133 134 135 136 137 138 139
          offset++;
          if (parts[i] == 'at') break;
        }
        if (parts[offset] !== 'at') return -1;
        this.position = parts.slice(start, offset).join(' ');
        offset += 1;
        this.isNative = parts[offset] == "native"
        offset += this.isNative ? 1 : 0;
        this.file = parts[offset];
        return offset;
140 141 142
      }
    }

143
    function loadFile() {
144
      let files = document.getElementById("uploadInput").files;
145

146 147
      let file = files[0];
      let reader = new FileReader();
148

149
      reader.onload = function(evt) {
150 151 152
        let icProcessor = new CustomIcProcessor();
        icProcessor.processString(this.result);
        entries = icProcessor.entries;
153

154
        document.getElementById("count").innerHTML = entries.length;
155 156 157 158
        updateTable();
      }
      reader.readAsText(file);
      initGroupKeySelect();
159 160 161
    }


162 163 164 165 166 167 168 169 170 171 172 173 174 175
    class Group {
      constructor(property, key, entry) {
        this.property = property;
        this.key = key;
        this.count = 1;
        this.entries = [entry];
        this.percentage = undefined;
        this.groups = undefined;
      }

      add(entry) {
        this.count++;
        this.entries.push(entry)
      }
176

177 178
      createSubGroups() {
        this.groups = {};
179 180
        for (let i = 0; i < properties.length; i++) {
          let subProperty = properties[i];
181 182 183 184
          if (this.property == subProperty) continue;
          this.groups[subProperty] = groupBy(this.entries, subProperty);
        }
      }
185 186
    }

187
    function groupBy(entries, property) {
188 189 190 191 192
      let accumulator = Object.create(null);
      let length = entries.length;
      for (let i = 0; i < length; i++) {
        let entry = entries[i];
        let key = entry[property];
193 194 195
        if (accumulator[key] == undefined) {
          accumulator[key] = new Group(property, key, entry)
        } else {
196
          let group = accumulator[key];
197 198 199 200
          if (group.entries == undefined) console.log([group, entry]);
          group.add(entry)
        }
      }
201 202 203
      let result = []
      for (let key in accumulator) {
        let group = accumulator[key];
204 205 206 207 208 209 210 211
        group.percentage = Math.round(group.count / length * 100 * 100) / 100;
        result.push(group);
      }
      result.sort((a, b) => {
        return b.count - a.count
      });
      return result;
    }
212 213 214



215
    function escapeHtml(unsafe) {
216
      if (!unsafe) return "";
217
      return unsafe.toString()
218 219 220 221 222 223 224 225 226 227 228 229 230 231
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
    }

    function processValue(unsafe) {
      if (!unsafe) return "";
      if (!unsafe.startsWith("http")) return escapeHtml(unsafe);
      let a = document.createElement("a");
      a.href = unsafe;
      a.textContent = unsafe;
      return a;
232
    }
233

234
    function updateTable() {
235 236 237
      let select = document.getElementById("group-key");
      let key = select.options[select.selectedIndex].text;
      let tableBody = document.getElementById("table-body");
238
      removeAllChildren(tableBody);
239
      let groups = groupBy(entries, key, true);
240 241
      display(groups, tableBody);
    }
242

243 244 245
    function selecedOption(node) {
      return node.options[node.selectedIndex]
    }
246

247 248 249 250 251
    function removeAllChildren(node) {
      while (node.firstChild) {
        node.removeChild(node.firstChild);
      }
    }
252

253
    function display(entries, parent) {
254
      let fragment = document.createDocumentFragment();
255

256
      function td(tr, content, className) {
257 258 259 260 261 262
        let td = document.createElement("td");
        if (typeof content == "object") {
          td.appendChild(content);
        } else {
          td.innerHTML = content;
        }
263 264 265 266
        td.className = className
        tr.appendChild(td);
        return td
      }
267 268 269 270
      let max = Math.min(1000, entries.length)
      for (let i = 0; i < max; i++) {
        let entry = entries[i];
        let tr = document.createElement("tr");
271
        tr.entry = entry;
272
        td(tr, '<span onclick="toggleDetails(this)">&#8505;</a>', 'details');
273 274
        td(tr, entry.percentage + "%", 'percentage');
        td(tr, entry.count, 'count');
275
        td(tr, processValue(entry.key), 'key');
276 277
        fragment.appendChild(tr);
      }
278
      let omitted = entries.length - max;
279
      if (omitted > 0) {
280 281
        let tr = document.createElement("tr");
        let td = td(tr, 'Omitted ' + omitted + " entries.");
282 283 284 285 286
        td.colSpan = 4;
        fragment.appendChild(tr);
      }
      parent.appendChild(fragment);
    }
287

288
    function displayDrilldown(entry, previousSibling) {
289
      let tr = document.createElement('tr');
290 291 292 293
      tr.className = "entry-details";
      tr.style.display = "none";
      // indent by one td.
      tr.appendChild(document.createElement("td"));
294
      let td = document.createElement("td");
295
      td.colSpan = 3;
296
      for (let key in entry.groups) {
297 298 299 300 301 302
        td.appendChild(displayDrilldownGroup(entry, key));
      }
      tr.appendChild(td);
      // Append the new TR after previousSibling.
      previousSibling.parentNode.insertBefore(tr, previousSibling.nextSibling)
    }
303

304
    function displayDrilldownGroup(entry, key) {
305 306 307
      let max = 20;
      let group = entry.groups[key];
      let div = document.createElement("div")
308
      div.className = 'drilldown-group-title'
309 310
      div.textContent = key + ' [top ' + max + ' out of ' + group.length + ']';
      let table = document.createElement("table");
311 312 313 314
      display(group.slice(0, max), table, false)
      div.appendChild(table);
      return div;
    }
315

316
    function toggleDetails(node) {
317 318
      let tr = node.parentNode.parentNode;
      let entry = tr.entry;
319

320 321 322 323 324
      // Create subgroup in-place if the don't exist yet.
      if (entry.groups === undefined) {
        entry.createSubGroups();
        displayDrilldown(entry, tr);
      }
325 326
      let details = tr.nextSibling;
      let display = details.style.display;
327 328 329 330 331 332 333
      if (display != "none") {
        display = "none";
      } else {
        display = "table-row"
      };
      details.style.display = display;
    }
334

335
    function initGroupKeySelect() {
336 337 338
      let select = document.getElementById("group-key");
      for (let i in properties) {
        let option = document.createElement("option");
339 340 341 342
        option.text = properties[i];
        select.add(option);
      }
    }
343

344 345 346
    function handleOnLoad() {
      document.querySelector("#uploadInput").focus();
    }
347
  </script>
348 349
</head>

350
<body onload="handleOnLoad()">
351
  <h1>
352 353 354 355
    <span style="color: #00FF00">I</span>
    <span style="color: #FF00FF">C</span>
    <span style="color: #00FFFF">E</span>
  </h1> Your IC-Explorer.
356 357 358

  <div id="legend" style="padding-right: 200px">
    <div style="float:right;  border-style: solid; border-width: 1px; padding:20px">
359 360 361 362 363 364 365
      0 uninitialized<br>
      . premonomorphic<br>
      1 monomorphic<br>
      ^ recompute handler<br>
      P polymorphic<br>
      N megamorphic<br>
      G generic
366 367 368
    </div>
  </div>

369 370
  <h2>Usage</h2> Run your script with <code>--trace_ic</code> and upload <code>v8.log</code> on this page:<br/>
  <code>/path/to/d8 --trace_ic your_script.js</code>
371 372
  <h2>Data</h2>
  <form name="fileForm">
373
    <p>
374
      <input id="uploadInput" type="file" name="files" onchange="loadFile();"> trace entries: <span id="count">0</span>
375 376 377 378
    </p>
  </form>
  <h2>Result</h2>
  <p>
379 380
    Group-Key:
    <select id="group-key" onchange="updateTable()"></select>
381 382 383 384 385 386 387 388 389
  </p>
  <p>
    <table id="table" width="100%">
      <tbody id="table-body">
      </tbody>
    </table>
  </p>
</body>

390
</html>