xprof-nightly 2.22.3a20251208__cp311-none-manylinux2014_x86_64.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. xprof/__init__.py +22 -0
  2. xprof/convert/_pywrap_profiler_plugin.so +0 -0
  3. xprof/convert/csv_writer.py +87 -0
  4. xprof/convert/raw_to_tool_data.py +232 -0
  5. xprof/convert/trace_events_json.py +105 -0
  6. xprof/integration_tests/tf_mnist.py +100 -0
  7. xprof/integration_tests/tf_profiler_session.py +40 -0
  8. xprof/integration_tests/tpu/tensorflow/tpu_tf2_keras_test.py +183 -0
  9. xprof/profile_plugin.py +1521 -0
  10. xprof/profile_plugin_loader.py +82 -0
  11. xprof/protobuf/dcn_collective_info_pb2.py +44 -0
  12. xprof/protobuf/dcn_slack_analysis_pb2.py +42 -0
  13. xprof/protobuf/diagnostics_pb2.py +36 -0
  14. xprof/protobuf/event_time_fraction_analyzer_pb2.py +42 -0
  15. xprof/protobuf/hardware_types_pb2.py +40 -0
  16. xprof/protobuf/hlo_stats_pb2.py +39 -0
  17. xprof/protobuf/inference_stats_pb2.py +86 -0
  18. xprof/protobuf/input_pipeline_pb2.py +52 -0
  19. xprof/protobuf/kernel_stats_pb2.py +38 -0
  20. xprof/protobuf/memory_profile_pb2.py +54 -0
  21. xprof/protobuf/memory_viewer_preprocess_pb2.py +49 -0
  22. xprof/protobuf/op_metrics_pb2.py +65 -0
  23. xprof/protobuf/op_profile_pb2.py +49 -0
  24. xprof/protobuf/op_stats_pb2.py +71 -0
  25. xprof/protobuf/overview_page_pb2.py +64 -0
  26. xprof/protobuf/pod_stats_pb2.py +45 -0
  27. xprof/protobuf/pod_viewer_pb2.py +61 -0
  28. xprof/protobuf/power_metrics_pb2.py +38 -0
  29. xprof/protobuf/roofline_model_pb2.py +42 -0
  30. xprof/protobuf/smart_suggestion_pb2.py +38 -0
  31. xprof/protobuf/source_info_pb2.py +36 -0
  32. xprof/protobuf/source_stats_pb2.py +48 -0
  33. xprof/protobuf/steps_db_pb2.py +76 -0
  34. xprof/protobuf/task_pb2.py +37 -0
  35. xprof/protobuf/tf_data_stats_pb2.py +72 -0
  36. xprof/protobuf/tf_function_pb2.py +52 -0
  37. xprof/protobuf/tf_stats_pb2.py +40 -0
  38. xprof/protobuf/tfstreamz_pb2.py +40 -0
  39. xprof/protobuf/topology_pb2.py +50 -0
  40. xprof/protobuf/tpu_input_pipeline_pb2.py +43 -0
  41. xprof/protobuf/trace_events_old_pb2.py +54 -0
  42. xprof/protobuf/trace_events_pb2.py +64 -0
  43. xprof/protobuf/trace_events_raw_pb2.py +45 -0
  44. xprof/protobuf/trace_filter_config_pb2.py +40 -0
  45. xprof/server.py +319 -0
  46. xprof/standalone/base_plugin.py +52 -0
  47. xprof/standalone/context.py +22 -0
  48. xprof/standalone/data_provider.py +32 -0
  49. xprof/standalone/plugin_asset_util.py +131 -0
  50. xprof/standalone/plugin_event_multiplexer.py +185 -0
  51. xprof/standalone/tensorboard_shim.py +31 -0
  52. xprof/static/bundle.js +130500 -0
  53. xprof/static/index.html +64 -0
  54. xprof/static/index.js +3 -0
  55. xprof/static/materialicons.woff2 +0 -0
  56. xprof/static/styles.css +1 -0
  57. xprof/static/trace_viewer_index.html +3929 -0
  58. xprof/static/trace_viewer_index.js +15906 -0
  59. xprof/static/zone.js +3558 -0
  60. xprof/version.py +17 -0
  61. xprof_nightly-2.22.3a20251208.dist-info/METADATA +301 -0
  62. xprof_nightly-2.22.3a20251208.dist-info/RECORD +65 -0
  63. xprof_nightly-2.22.3a20251208.dist-info/WHEEL +5 -0
  64. xprof_nightly-2.22.3a20251208.dist-info/entry_points.txt +5 -0
  65. xprof_nightly-2.22.3a20251208.dist-info/top_level.txt +1 -0
@@ -0,0 +1,3929 @@
1
+ <!doctype html><!--
2
+ @license
3
+ Copyright 2020 The TensorFlow Authors. All Rights Reserved.
4
+
5
+ Licensed under the Apache License, Version 2.0 (the "License");
6
+ you may not use this file except in compliance with the License.
7
+ You may obtain a copy of the License at
8
+
9
+ http://www.apache.org/licenses/LICENSE-2.0
10
+
11
+ Unless required by applicable law or agreed to in writing, software
12
+ distributed under the License is distributed on an "AS IS" BASIS,
13
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
+ See the License for the specific language governing permissions and
15
+ limitations under the License.
16
+ --><html><head>
17
+ <meta charset="utf-8">
18
+ <title>Trace Viewer</title>
19
+
20
+
21
+
22
+
23
+
24
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
25
+ <meta http-equiv="origin-trial" content="AnYuQDtUf6OrWCmR9Okd67JhWVTbmnRedvPi1TEvAxac8+1p6o9q08FoDO6oCbLD0xEqev+SkZFiIhFSzlY9HgUAAABxeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXVzZXJjb250ZW50LmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViQ29tcG9uZW50c1YwIiwiZXhwaXJ5IjoxNjA0NjE0NTM4LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=">
26
+ <meta http-equiv="origin-trial" content="AkFXw3wHnOs/XXYqFXpc3diDLrRFd9PTgGs/gs43haZmngI/u1g8L4bDnSKLZkB6fecjmjTwcAMQFCpWMAoHSQEAAAB8eyJvcmlnaW4iOiJodHRwczovL2Nocm9taXVtLWJ1aWxkLXN0YXRzLmFwcHNwb3QuY29tOjQ0MyIsImZlYXR1cmUiOiJXZWJDb21wb25lbnRzVjAiLCJleHBpcnkiOjE2MTIyMjM5OTksImlzU3ViZG9tYWluIjp0cnVlfQ==">
27
+ <meta http-equiv="origin-trial" content="AtQY4wpX9+nj+Vn27cTgygzIPbtB2WoAoMQR5jK9mCm/H2gRIDH6MmGVAaziv9XnYTDKjhBnQYtecbTiIHCQiAIAAACEeyJvcmlnaW4iOiJodHRwczovL2Nocm9taXVtLWJ1aWxkLXN0YXRzLXN0YWdpbmcuYXBwc3BvdC5jb206NDQzIiwiZmVhdHVyZSI6IldlYkNvbXBvbmVudHNWMCIsImV4cGlyeSI6MTYxMjIyMzk5OSwiaXNTdWJkb21haW4iOnRydWV9">
28
+
29
+
30
+
31
+ <style>
32
+ html, body {
33
+ font-size: 14px;
34
+ font-weight: 400;
35
+ line-height: 20px;
36
+ }
37
+
38
+ .no-webcomponents-container.hidden {
39
+ display: none;
40
+ }
41
+
42
+ .no-webcomponents-container {
43
+ display: flex;
44
+ justify-content: center;
45
+ margin-top: 80px;
46
+ font-family: Roboto, sans-serif;
47
+ }
48
+
49
+ .no-webcomponents-container .title {
50
+ font-size: 22px;
51
+ font-weight: bold;
52
+ }
53
+
54
+ .no-webcomponents-container .contents {
55
+ max-width: 600px;
56
+ }
57
+
58
+ #event-details {
59
+ float: right;
60
+ display: flex;
61
+ /* only display detail panel if content exists, up to 30% width */
62
+ width: fit-content;
63
+ max-width: 30%;
64
+ background-color: #ececec;
65
+ }
66
+
67
+ #side_panel_container,
68
+ #view_options_dropdown,
69
+ #view_console_button {
70
+ display: none;
71
+ }
72
+
73
+ input:focus {
74
+ outline: none;
75
+ }
76
+
77
+ tr-ui-b-tab-view {
78
+ height: fit-content;
79
+ float: left;
80
+ flex: 1;
81
+ }
82
+
83
+ tr-ui-a-single-thread-slice-sub-view {
84
+ flex-direction: column !important;
85
+ }
86
+
87
+ tr-v-ui-scalar-span {
88
+ float: left;
89
+ }
90
+
91
+ tr-ui-find-control {
92
+ /* keep consistent with menubar total height 20px */
93
+ height: 20px;
94
+ }
95
+
96
+ /* Align height of different buttons on the menubar
97
+ * tr-ui-b-toolbar-button, button.tr-ui-b-dropdown
98
+ */
99
+ tr-ui-b-toolbar-button {
100
+ padding: 2px 0;
101
+ /* total height = 14px + 2*2padding + 1*2 border = 20px */
102
+ height: 14px;
103
+ cursor: pointer;
104
+ border: silver solid 1px;
105
+ }
106
+
107
+ #analysis {
108
+ flex-flow: row nowrap;
109
+ /* make vertical drag handle and the tabs covering the whole content height */
110
+ height: fit-content;
111
+ /* won't cover the whole window with super long content */
112
+ max-height: 40%;
113
+ }
114
+
115
+ #eventSummaryTable table.tr-ui-b-table {
116
+ /* Make text content wrap when the container resizes. */
117
+ overflow-wrap: anywhere;
118
+
119
+ /* Table layout fixed is needed since otherwise the td element's width don't
120
+ * get calculated properly for `resize: horizontal`. We set width to 100% so the table still
121
+ * dynamically reflows based on window width. */
122
+ table-layout:fixed;
123
+ width: 100%;
124
+ }
125
+
126
+ /* Columns in Event Summary Table. */
127
+ #eventSummaryTable thead.tr-ui-b-table > tr.tr-ui-b-table > td.tr-ui-b-table {
128
+ /* Allow Event Summary Table Columns width to be resizable */
129
+ resize: horizontal;
130
+ min-width: 100px;
131
+ }
132
+
133
+ /* Name Column in Event Summary Table. */
134
+ #eventSummaryTable thead.tr-ui-b-table > tr.tr-ui-b-table > td.tr-ui-b-table:first-child {
135
+ min-width: 350px;
136
+ width: 500px;
137
+ max-width: 900px;
138
+ }
139
+
140
+ #eventSummaryTable tr-ui-a-analysis-link {
141
+ /* Override Catapult CSS which sets this as no-wrap preventing resizing the HTML element. */
142
+ white-space: normal;
143
+ }
144
+
145
+ tr-ui-a-generic-object-view {
146
+ /* Help break the long op name */
147
+ overflow-wrap: anywhere;
148
+ }
149
+
150
+ </style>
151
+
152
+
153
+ <style>
154
+ body {
155
+ margin: 0;
156
+ }
157
+ </style>
158
+ </head><body><template id="overlay-template">
159
+ <style>
160
+ overlay-mask {
161
+ left: 0;
162
+ padding: 8px;
163
+ position: absolute;
164
+ top: 0;
165
+ z-index: 1000;
166
+ font-family: sans-serif;
167
+ -webkit-justify-content: center;
168
+ background: rgba(0, 0, 0, 0.8);
169
+ display: flex;
170
+ height: 100%;
171
+ left: 0;
172
+ position: fixed;
173
+ top: 0;
174
+ width: 100%;
175
+ }
176
+ overlay-mask:focus {
177
+ outline: none;
178
+ }
179
+ overlay-vertical-centering-container {
180
+ -webkit-justify-content: center;
181
+ flex-direction: column;
182
+ display: flex;
183
+ }
184
+ overlay-frame {
185
+ z-index: 1100;
186
+ background: rgb(255, 255, 255);
187
+ border: 1px solid #ccc;
188
+ margin: 75px;
189
+ display: flex;
190
+ flex-direction: column;
191
+ min-height: 0;
192
+ }
193
+ title-bar {
194
+ -webkit-align-items: center;
195
+ flex-direction: row;
196
+ border-bottom: 1px solid #ccc;
197
+ background-color: #ddd;
198
+ display: flex;
199
+ padding: 5px;
200
+ flex: 0 0 auto;
201
+ }
202
+ title {
203
+ display: inline;
204
+ font-weight: bold;
205
+ flex: 1 1 auto;
206
+ }
207
+ close-button {
208
+ -webkit-align-self: flex-end;
209
+ border: 1px solid #eee;
210
+ background-color: #999;
211
+ font-size: 10pt;
212
+ font-weight: bold;
213
+ padding: 2px;
214
+ text-align: center;
215
+ width: 16px;
216
+ }
217
+ close-button:hover {
218
+ background-color: #ddd;
219
+ border-color: black;
220
+ cursor: pointer;
221
+ }
222
+ overlay-content {
223
+ display: flex;
224
+ flex: 1 1 auto;
225
+ flex-direction: column;
226
+ overflow-y: auto;
227
+ padding: 10px;
228
+ min-width: 300px;
229
+ min-height: 0;
230
+ }
231
+ button-bar {
232
+ -webkit-align-items: baseline;
233
+ border-top: 1px solid #ccc;
234
+ display: flex;
235
+ flex: 0 0 auto;
236
+ flex-direction: row-reverse;
237
+ padding: 4px;
238
+ }
239
+ </style>
240
+
241
+ <overlay-mask>
242
+ <overlay-vertical-centering-container>
243
+ <overlay-frame>
244
+ <title-bar>
245
+ <title></title>
246
+ <close-button>✕</close-button>
247
+ </title-bar>
248
+ <overlay-content>
249
+ <content></content>
250
+ </overlay-content>
251
+ <button-bar></button-bar>
252
+ </overlay-frame>
253
+ </overlay-vertical-centering-container>
254
+ </overlay-mask>
255
+ </template><dom-module id="tr-ui-a-analysis-link">
256
+ <template>
257
+ <style>
258
+ :host {
259
+ display: inline;
260
+ cursor: pointer;
261
+ cursor: pointer;
262
+ white-space: nowrap;
263
+ }
264
+ a {
265
+ text-decoration: underline;
266
+ }
267
+ </style>
268
+ <a href="{{href}}" on-click="onClicked_" on-mouseenter="onMouseEnter_" on-mouseleave="onMouseLeave_"><slot></slot></a>
269
+
270
+ </template>
271
+ </dom-module><dom-module id="tr-ui-b-table">
272
+ <template>
273
+ <style>
274
+ :host {
275
+ display: flex;
276
+ flex-direction: column;
277
+ }
278
+
279
+ table {
280
+ flex: 1 1 auto;
281
+ align-self: stretch;
282
+ border-collapse: separate;
283
+ border-spacing: 0;
284
+ border-width: 0;
285
+ -webkit-user-select: initial;
286
+ }
287
+
288
+ tr > td {
289
+ padding: 2px 4px 2px 4px;
290
+ vertical-align: top;
291
+ }
292
+
293
+ table > tbody:focus {
294
+ outline: none;
295
+ }
296
+ table > tbody:focus[selection-mode="row"] > tr[selected],
297
+ table > tbody:focus[selection-mode="cell"] > tr > td[selected],
298
+ table > tbody:focus > tr.empty-row > td {
299
+ outline: 1px dotted #666666;
300
+ outline-offset: -1px;
301
+ }
302
+
303
+ button.toggle-button {
304
+ height: 15px;
305
+ line-height: 60%;
306
+ vertical-align: middle;
307
+ width: 100%;
308
+ }
309
+
310
+ button > * {
311
+ height: 15px;
312
+ vertical-align: middle;
313
+ }
314
+
315
+ td.button-column {
316
+ width: 30px;
317
+ }
318
+
319
+ table > thead > tr > td.sensitive:hover {
320
+ background-color: #fcfcfc;
321
+ }
322
+
323
+ table > thead > tr > td {
324
+ font-weight: bold;
325
+ text-align: left;
326
+
327
+ background-color: #eee;
328
+ white-space: nowrap;
329
+ overflow: hidden;
330
+ text-overflow: ellipsis;
331
+
332
+ border-top: 1px solid #ffffff;
333
+ border-bottom: 1px solid #aaa;
334
+ }
335
+
336
+ table > tfoot {
337
+ background-color: #eee;
338
+ font-weight: bold;
339
+ }
340
+
341
+ /* Light row and cell highlight. */
342
+ table > tbody[row-highlight-style="light"] > tr[selected],
343
+ table > tbody[cell-highlight-style="light"] > tr > td[selected] {
344
+ background-color: rgb(213, 236, 229); /* light turquoise */
345
+ }
346
+ table > tbody[row-highlight-style="light"] >
347
+ tr:not(.empty-row):not([selected]):hover,
348
+ table > tbody[cell-highlight-style="light"] >
349
+ tr:not(.empty-row):not([selected]) > td:hover {
350
+ background-color: #f6f6f6; /* light grey */
351
+ }
352
+
353
+ /* Dark row and cell highlight. */
354
+ table > tbody[row-highlight-style="dark"] > tr[selected],
355
+ table > tbody[cell-highlight-style="dark"] > tr > td[selected] {
356
+ background-color: rgb(103, 199, 165); /* turquoise */
357
+ }
358
+ table > tbody[row-highlight-style="dark"] >
359
+ tr:not(.empty-row):not([selected]):hover,
360
+ table > tbody[cell-highlight-style="dark"] >
361
+ tr:not(.empty-row):not([selected]) > td:hover {
362
+ background-color: #e6e6e6; /* grey */
363
+ }
364
+ table > tbody[row-highlight-style="dark"] > tr:hover[selected],
365
+ table > tbody[cell-highlight-style="dark"] > tr[selected] > td:hover {
366
+ background-color: rgb(171, 217, 202); /* semi-light turquoise */
367
+ }
368
+
369
+ table > colgroup > col[selected] {
370
+ background-color: #e6e6e6; /* grey */
371
+ }
372
+
373
+ table > tbody > tr.empty-row > td {
374
+ color: #666;
375
+ font-style: italic;
376
+ text-align: center;
377
+ }
378
+
379
+ table > tbody.has-footer > tr:last-child > td {
380
+ border-bottom: 1px solid #aaa;
381
+ }
382
+
383
+ table > tfoot > tr:first-child > td {
384
+ border-top: 1px solid #ffffff;
385
+ }
386
+
387
+ :host([zebra]) table tbody tr:nth-child(even) {
388
+ background-color: #f4f4f4;
389
+ }
390
+
391
+ expand-button {
392
+ -webkit-user-select: none;
393
+ cursor: pointer;
394
+ margin-right: 3px;
395
+ font-size: smaller;
396
+ height: 1rem;
397
+ }
398
+
399
+ expand-button.button-expanded {
400
+ transform: rotate(90deg);
401
+ }
402
+ </style>
403
+ <table>
404
+ <colgroup id="cols">
405
+ </colgroup>
406
+ <thead id="head">
407
+ </thead>
408
+ <tbody id="body">
409
+ </tbody>
410
+ <tfoot id="foot">
411
+ </tfoot>
412
+ </table>
413
+ </template>
414
+ </dom-module><dom-module id="tr-ui-b-table-header-cell">
415
+ <template>
416
+ <style>
417
+ :host {
418
+ -webkit-user-select: none;
419
+ display: flex;
420
+ }
421
+
422
+ span {
423
+ flex: 0 1 auto;
424
+ }
425
+
426
+ #side {
427
+ -webkit-user-select: none;
428
+ flex: 0 0 auto;
429
+ padding-left: 2px;
430
+ padding-right: 2px;
431
+ vertical-align: top;
432
+ font-size: 15px;
433
+ font-family: sans-serif;
434
+ line-height: 85%;
435
+ margin-left: 5px;
436
+ }
437
+
438
+ #side.disabled {
439
+ color: rgb(140, 140, 140);
440
+ }
441
+
442
+ #title:empty, #side:empty {
443
+ display: none;
444
+ }
445
+ </style>
446
+
447
+ <span id="title"></span>
448
+ <span id="side"></span>
449
+ </template>
450
+ </dom-module><dom-module id="tr-v-ui-scalar-context-controller">
451
+ <template></template>
452
+ </dom-module><dom-module id="tr-v-ui-scalar-span">
453
+ <template>
454
+ <style>
455
+ :host {
456
+ display: flex;
457
+ flex-direction: row;
458
+ justify-content: flex-end;
459
+ position: relative;
460
+ /* Limit the sparkline's negative z-index to the span only. */
461
+ isolation: isolate;
462
+ }
463
+
464
+ :host(.left-align) {
465
+ justify-content: flex-start;
466
+ }
467
+
468
+ :host(.inline) {
469
+ display: inline-flex;
470
+ }
471
+
472
+ #sparkline {
473
+ width: 0%;
474
+ position: absolute;
475
+ bottom: 0;
476
+ display: none;
477
+ height: 100%;
478
+ background-color: hsla(216, 100%, 94.5%, .75);
479
+ border-color: hsl(216, 100%, 89%);
480
+ box-sizing: border-box;
481
+ z-index: -1;
482
+ }
483
+ #sparkline.positive {
484
+ border-right-style: solid;
485
+ /* The border width must be kept in sync with buildSparklineStyle_(). */
486
+ border-right-width: 1px;
487
+ }
488
+ #sparkline:not(.positive) {
489
+ border-left-style: solid;
490
+ /* The border width must be kept in sync with buildSparklineStyle_(). */
491
+ border-left-width: 1px;
492
+ }
493
+ #sparkline.better {
494
+ background-color: hsla(115, 100%, 93%, .75);
495
+ border-color: hsl(118, 60%, 80%);
496
+ }
497
+ #sparkline.worse {
498
+ background-color: hsla(0, 100%, 88%, .75);
499
+ border-color: hsl(0, 100%, 80%);
500
+ }
501
+
502
+ #content {
503
+ white-space: nowrap;
504
+ }
505
+ #content, #significance, #warning {
506
+ flex-grow: 0;
507
+ }
508
+ #content.better {
509
+ color: green;
510
+ }
511
+ #content.worse {
512
+ color: red;
513
+ }
514
+
515
+ #significance svg {
516
+ margin-left: 4px;
517
+ display: none;
518
+ height: 1em;
519
+ vertical-align: text-top;
520
+ stroke-width: 4;
521
+ fill: rgba(0, 0, 0, 0);
522
+ }
523
+ #significance #insignificant {
524
+ stroke: black;
525
+ }
526
+ #significance #significantly_better {
527
+ stroke: green;
528
+ }
529
+ #significance #significantly_worse {
530
+ stroke: red;
531
+ }
532
+
533
+ #warning {
534
+ display: none;
535
+ margin-left: 4px;
536
+ height: 1em;
537
+ vertical-align: text-top;
538
+ stroke-width: 0;
539
+ }
540
+ #warning path {
541
+ fill: rgb(255, 185, 185);
542
+ }
543
+ #warning rect {
544
+ fill: red;
545
+ }
546
+ </style>
547
+
548
+ <span id="sparkline"></span>
549
+
550
+ <span id="content"></span>
551
+
552
+ <span id="significance">
553
+
554
+ <svg id="insignificant" viewbox="0 0 128 128">
555
+ <circle cx="64" cy="64" r="60"></circle>
556
+ <circle cx="44" cy="44" r="4"></circle>
557
+ <circle cx="84" cy="44" r="4"></circle>
558
+ <line x1="36" x2="92" y1="80" y2="80"></line>
559
+ </svg>
560
+
561
+
562
+ <svg id="significantly_better" viewbox="0 0 128 128">
563
+ <circle cx="64" cy="64" r="60"></circle>
564
+ <circle cx="44" cy="44" r="4"></circle>
565
+ <circle cx="84" cy="44" r="4"></circle>
566
+ <path d="M 28 64 Q 64 128 100 64"></path>
567
+ </svg>
568
+
569
+
570
+ <svg id="significantly_worse" viewbox="0 0 128 128">
571
+ <circle cx="64" cy="64" r="60"></circle>
572
+ <circle cx="44" cy="44" r="4"></circle>
573
+ <circle cx="84" cy="44" r="4"></circle>
574
+ <path d="M 36 96 Q 64 48 92 96"></path>
575
+ </svg>
576
+ </span>
577
+
578
+ <svg id="warning" viewbox="0 0 128 128">
579
+ <path d="M 64 0 L 128 128 L 0 128 L 64 0"></path>
580
+ <rect height="84" width="8" x="60" y="0"></rect>
581
+ <rect height="24" width="8" x="60" y="100"></rect>
582
+ </svg>
583
+ </template>
584
+ </dom-module><dom-module id="tr-ui-a-generic-object-view">
585
+ <template>
586
+ <style>
587
+ :host {
588
+ display: block;
589
+ font-family: monospace;
590
+ }
591
+ </style>
592
+ <div id="content">
593
+ </div>
594
+ </template>
595
+ </dom-module><dom-module id="tr-ui-a-generic-object-view-with-label">
596
+ <template>
597
+ <style>
598
+ :host {
599
+ display: block;
600
+ }
601
+ </style>
602
+ </template>
603
+ </dom-module><dom-module id="tr-ui-b-drag-handle">
604
+ <template>
605
+ <style>
606
+ :host {
607
+ -webkit-user-select: none;
608
+ box-sizing: border-box;
609
+ display: block;
610
+ }
611
+
612
+ :host(.horizontal-drag-handle) {
613
+ background-image: -webkit-gradient(linear,
614
+ 0 0, 0 100%,
615
+ from(#E5E5E5),
616
+ to(#D1D1D1));
617
+ border-bottom: 1px solid #8e8e8e;
618
+ border-top: 1px solid white;
619
+ cursor: ns-resize;
620
+ flex: 0 0 auto;
621
+ height: 7px;
622
+ position: relative;
623
+ }
624
+
625
+ :host(.vertical-drag-handle) {
626
+ background-image: -webkit-gradient(linear,
627
+ 0 0, 100% 0,
628
+ from(#E5E5E5),
629
+ to(#D1D1D1));
630
+ border-left: 1px solid white;
631
+ border-right: 1px solid #8e8e8e;
632
+ cursor: ew-resize;
633
+ flex: 0 0 auto;
634
+ position: relative;
635
+ width: 7px;
636
+ }
637
+ </style>
638
+ <div></div>
639
+ </template>
640
+ </dom-module><dom-module id="tv-ui-b-hotkey-controller">
641
+ <template>
642
+ <div></div>
643
+ </template>
644
+ </dom-module><dom-module id="tr-ui-b-info-bar">
645
+ <template>
646
+ <style>
647
+ :host {
648
+ align-items: center;
649
+ flex: 0 0 auto;
650
+ background-color: rgb(252, 235, 162);
651
+ border-bottom: 1px solid #A3A3A3;
652
+ border-left: 1px solid white;
653
+ border-right: 1px solid #A3A3A3;
654
+ border-top: 1px solid white;
655
+ display: flex;
656
+ min-height: 26px;
657
+ padding: 0 3px 0 3px;
658
+ }
659
+
660
+ :host([hidden]) {
661
+ display: none !important;
662
+ }
663
+
664
+ #message { flex: 1 1 auto; }
665
+ </style>
666
+
667
+ <span id="message"></span>
668
+ <span id="buttons"></span>
669
+ </template>
670
+ </dom-module><dom-module id="tr-ui-b-mouse-mode-icon">
671
+ <template>
672
+ <style>
673
+ :host {
674
+ display: block;
675
+ background-image: url(data:image/png;base64,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);
676
+ width: 27px;
677
+ height: 30px;
678
+ }
679
+ :host.active {
680
+ cursor: auto;
681
+ }
682
+ </style>
683
+ </template>
684
+ </dom-module><dom-module id="tr-ui-b-mouse-mode-selector">
685
+ <template>
686
+ <style>
687
+ :host {
688
+
689
+ -webkit-user-drag: element;
690
+ -webkit-user-select: none;
691
+
692
+ background: #DDD;
693
+ border: 1px solid #BBB;
694
+ border-radius: 4px;
695
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
696
+ left: calc(100% - 120px);
697
+ position: absolute;
698
+ top: 100px;
699
+ user-select: none;
700
+ width: 29px;
701
+ z-index: 20;
702
+ }
703
+
704
+ .drag-handle {
705
+ background: url(data:image/png;base64,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) 2px 3px no-repeat;
706
+ background-repeat: no-repeat;
707
+ border-bottom: 1px solid #BCBCBC;
708
+ cursor: move;
709
+ display: block;
710
+ height: 13px;
711
+ width: 27px;
712
+ }
713
+
714
+ .tool-button {
715
+ background-position: center center;
716
+ background-repeat: no-repeat;
717
+ border-bottom: 1px solid #BCBCBC;
718
+ border-top: 1px solid #F1F1F1;
719
+ cursor: pointer;
720
+ }
721
+
722
+ .buttons > .tool-button:last-child {
723
+ border-bottom: none;
724
+ }
725
+
726
+ </style>
727
+ <div class="drag-handle"></div>
728
+ <div class="buttons">
729
+ </div>
730
+ </template>
731
+ </dom-module><dom-module id="tr-ui-e-chrome-cc-display-item-list-item">
732
+ <template>
733
+ <style>
734
+ :host {
735
+ border-bottom: 1px solid #555;
736
+ display: block;
737
+ font-size: 12px;
738
+ padding: 3px 5px;
739
+ }
740
+
741
+ :host(:hover) {
742
+ background-color: #f0f0f0;
743
+ cursor: pointer;
744
+ }
745
+
746
+ .header {
747
+ font-weight: bold;
748
+ margin: 2px 0;
749
+ }
750
+
751
+ .header > .extra {
752
+ background-color: #777;
753
+ border-radius: 4px;
754
+ color: white;
755
+ margin: 0 6px;
756
+ text-decoration: none;
757
+ padding: 2px 4px;
758
+ }
759
+
760
+ .raw-details {
761
+ white-space: pre-wrap;
762
+ }
763
+
764
+ .details > dl {
765
+ margin: 0;
766
+ }
767
+
768
+ :host(:not([selected])) .details {
769
+ display: none;
770
+ }
771
+ </style>
772
+ <div class="header">
773
+ {{name}}
774
+ <template if="{{_computeIfSKP(richDetails)}}" is="dom-if">
775
+ <a class="extra" download="drawing.skp" href$="{{_computeHref(richDetails)}}" on-click="{{stopPropagation}}">SKP</a>
776
+ </template>
777
+ </div>
778
+ <div class="details">
779
+ <template if="{{rawDetails}}" is="dom-if">
780
+ <div class="raw-details">{{rawDetails}}</div>
781
+ </template>
782
+ <template if="{{richDetails}}" is="dom-if">
783
+ <dl>
784
+ <template if="{{richDetails.visualRect}}" is="dom-if">
785
+ <dt>Visual rect</dt>
786
+ <dd>{{richDetails.visualRect.x}},{{richDetails.visualRect.y}}
787
+ {{richDetails.visualRect.width}}×{{richDetails.visualRect.height}}
788
+ </dd>
789
+ </template>
790
+ </dl>
791
+ </template>
792
+ </div>
793
+ </template>
794
+
795
+ </dom-module><template id="tr-ui-e-chrome-cc-display-item-debugger-template">
796
+ <left-panel>
797
+ <display-item-info>
798
+ <header>
799
+ <span class="title">Display Item List</span>
800
+ <span class="size"></span>
801
+ <div class="export">
802
+ <input class="dlfilename" type="text" value="displayitemlist.json">
803
+ <button class="dlexport">Export display item list</button>
804
+ </div>
805
+ <div class="export">
806
+ <input class="skpfilename" type="text" value="skpicture.skp">
807
+ <button class="skpexport">Export list as SkPicture</button>
808
+ </div>
809
+ </header>
810
+ </display-item-info>
811
+ </left-panel>
812
+ <right-panel>
813
+ <raster-area>
814
+ <canvas-scroller>
815
+ <canvas></canvas>
816
+ </canvas-scroller>
817
+ </raster-area>
818
+ </right-panel>
819
+ </template><template id="quad-stack-view-template">
820
+ <style>
821
+ #chrome-left {
822
+ background-image: url(data:image/png;base64,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);
823
+ display: none;
824
+ }
825
+ #chrome-mid {
826
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAABICAYAAADRa1RpAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAB3RJTUUH3QcNFycE5v9iFQAAAQtJREFUOMvtkjGSWzEMQx/0eYrM3v8k3vgqycalSwlI8Ufyl3OBFMtGIgUCIEd6PB6RBEASqvfONSrJXrDNbNkQ8ywA2y/SmayW+ZIESTsiyQsxo40xmMS2aUmYbheHpCVd0+UqJGGMsey3mUyldoUvlY3D9rIN0K7Wbe/WbZ+y1yWtaVtrp3VJzAEX6ZVjc2p7b2mtnYhNdl6m05rwtfV/ltx7XypJTpXeO7Y5juOlchzHaWxyrJmuhLapqgIJONv05+srThBgiQpBTSRwGOr3rwccgWHUhJ7P5/YNlbd/2XiL78L/WajP240AQUihfnx84EDJjCHKHjTAbkimQDgBjAJ1/3kHAgEk/gL71AHEWVXPGQAAAABJRU5ErkJggg==);
827
+ display: none;
828
+ }
829
+ #chrome-right {
830
+ background-image: url(data:image/png;base64,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);
831
+ display: none;
832
+ }
833
+ </style>
834
+
835
+ <div id="header"></div>
836
+ <input id="stacking-distance-slider" max="400" min="1" step="1" type="range">
837
+
838
+ <div id="canvas-scroller">
839
+ <canvas id="canvas"></canvas>
840
+ </div>
841
+ <img id="chrome-left">
842
+ <img id="chrome-mid">
843
+ <img id="chrome-right">
844
+ </template><template id="tr-ui-e-chrome-cc-layer-tree-quad-stack-view-template">
845
+ <style>
846
+ #input-event {
847
+ background-image: url(data:image/png;base64,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);
848
+ display: none;
849
+ }
850
+ </style>
851
+ <img id="input-event">
852
+ </template><template id="tr-ui-e-chrome-cc-picture-debugger-template">
853
+ <left-panel>
854
+ <picture-info>
855
+ <div>
856
+ <span class="title">Skia Picture</span>
857
+ <span class="size"></span>
858
+ </div>
859
+ <div>
860
+ <input class="filename" type="text" value="skpicture.skp">
861
+ <button class="export">Export</button>
862
+ </div>
863
+ </picture-info>
864
+ </left-panel>
865
+ <right-panel>
866
+ <tr-ui-e-chrome-cc-picture-ops-chart-view>
867
+ </tr-ui-e-chrome-cc-picture-ops-chart-view>
868
+ <raster-area><canvas></canvas></raster-area>
869
+ </right-panel>
870
+ </template><dom-module id="tr-ui-a-stack-frame">
871
+ <template>
872
+ <style>
873
+ :host {
874
+ display: flex;
875
+ flex-direction: row;
876
+ align-items: center;
877
+ font-size: 12px;
878
+ }
879
+ </style>
880
+ <tr-ui-b-table id="table"></tr-ui-b-table>
881
+ </template>
882
+ </dom-module><dom-module id="tr-ui-a-single-event-sub-view">
883
+ <template>
884
+ <style>
885
+ :host {
886
+ display: flex;
887
+ flex: 0 1;
888
+ flex-direction: column;
889
+ }
890
+ #table {
891
+ flex: 0 1 auto;
892
+ align-self: stretch;
893
+ font-size: 12px;
894
+ }
895
+ </style>
896
+ <tr-ui-b-table id="table">
897
+ </tr-ui-b-table>
898
+ </template>
899
+ </dom-module><dom-module id="tr-ui-e-chrome-cc-raster-task-view">
900
+ <template>
901
+ <style>
902
+ :host {
903
+ display: flex;
904
+ flex-direction: column;
905
+ }
906
+ #heading {
907
+ flex: 0 0 auto;
908
+ }
909
+ tr-ui-b-table {
910
+ font-size: 12px;
911
+ }
912
+ </style>
913
+
914
+ <div id="heading">
915
+ Rasterization costs in
916
+ <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link>
917
+ </div>
918
+ <tr-ui-b-table id="content"></tr-ui-b-table>
919
+ </template>
920
+ </dom-module><dom-module id="tr-ui-e-chrome-codesearch">
921
+ <template>
922
+ <style>
923
+ :host {
924
+ white-space: nowrap;
925
+ }
926
+ #codesearchLink {
927
+ font-size: x-small;
928
+ margin-left: 20px;
929
+ text-decoration: none;
930
+ }
931
+ </style>
932
+ <a id="codesearchLink" on-click="onClick" target="_blank">🔍</a>
933
+ </template>
934
+ </dom-module><style>
935
+ .tr-ui-e-chrome-gpu-state-snapshot-view{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAAZiS0dEAEwATABMYqp3KAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB90JCQsBMCH7ZqYAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAUElEQVRYw+3WwQkAIAiF4Vc0hTO5/wiuURvYIcQOv1cRPhDlDXffSsrMsrYiQi/zU80FAACAVX3nt3lWAABA/x+ovnPyAAAA5AHyAAAA3wMOd34Xd+lsglgAAAAASUVORK5CYII=);display:flex;overflow:auto}.tr-ui-e-chrome-gpu-state-snapshot-view img{display:block;margin:16px auto 16px auto}
936
+ </style><dom-module id="tr-ui-a-layout-tree-sub-view">
937
+ <template>
938
+ <style>
939
+ tr-ui-b-table {
940
+ font-size: 12px;
941
+ }
942
+ </style>
943
+ <div id="content"></div>
944
+ </template>
945
+ </dom-module><template id="tr-ui-e-img-image-snapshot-view-template">
946
+ <style>
947
+ .image-info {
948
+ margin-bottom: 5px;
949
+ }
950
+
951
+ .image-info .title {
952
+ font-weight: bold;
953
+ margin-left: 5px;
954
+ margin-right: 5px;
955
+ }
956
+
957
+ .image-info .size {
958
+ margin-right: 5px;
959
+ }
960
+
961
+ .image-container {
962
+ min-height: 100px;
963
+ min-width: 200px;
964
+ overflow: auto;
965
+ }
966
+ </style>
967
+
968
+ <div class="image-info">
969
+ <span class="title">Image</span>
970
+ <span class="size">(unknown)</span>
971
+ <span class="instructions">
972
+ [ Drag with mouse to zoom in and out ]
973
+ </span>
974
+ </div>
975
+ <div class="image-container">
976
+ <img alt="Image snapshot">
977
+ </div>
978
+ </template><dom-module id="tr-ui-e-s-frame-data-side-panel">
979
+ <template>
980
+ <style>
981
+ :host {
982
+ display: flex;
983
+ width: 600px;
984
+ flex-direction: column;
985
+ }
986
+ table-container {
987
+ display: flex;
988
+ overflow: auto;
989
+ font-size: 12px;
990
+ }
991
+ </style>
992
+ <div>
993
+ Organize by:
994
+ <select id="select">
995
+ <option value="none">None</option>
996
+ <option value="tree">Frame Tree</option>
997
+ </select>
998
+ </div>
999
+ <table-container>
1000
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1001
+ </table-container>
1002
+ </template>
1003
+ </dom-module><dom-module id="tr-ui-b-chart-legend-key">
1004
+ <template>
1005
+ <style>
1006
+ #checkbox {
1007
+ margin: 0;
1008
+ visibility: hidden;
1009
+ vertical-align: text-top;
1010
+ }
1011
+ #label, #link {
1012
+ white-space: nowrap;
1013
+ text-overflow: ellipsis;
1014
+ overflow: hidden;
1015
+ display: inline-block;
1016
+ }
1017
+ </style>
1018
+
1019
+ <input checked id="checkbox" type="checkbox">
1020
+ <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link>
1021
+ <label id="label"></label>
1022
+ </template>
1023
+ </dom-module><template id="chart-base-template">
1024
+ <svg>
1025
+ <g id="chart-area" xmlns="http://www.w3.org/2000/svg">
1026
+ <g class="x axis"></g>
1027
+ <g class="y axis"></g>
1028
+ <text id="title"></text>
1029
+ </g>
1030
+ </svg>
1031
+ </template><dom-module id="tr-ui-e-s-input-latency-side-panel">
1032
+ <template>
1033
+ <style>
1034
+ :host {
1035
+ flex-direction: column;
1036
+ display: flex;
1037
+ }
1038
+ toolbar {
1039
+ flex: 0 0 auto;
1040
+ border-bottom: 1px solid black;
1041
+ display: flex;
1042
+ }
1043
+ result-area {
1044
+ flex: 1 1 auto;
1045
+ display: block;
1046
+ min-height: 0;
1047
+ overflow-y: auto;
1048
+ }
1049
+ </style>
1050
+
1051
+ <toolbar id="toolbar"></toolbar>
1052
+ <result-area id="result_area"></result-area>
1053
+ </template>
1054
+ </dom-module><dom-module id="tr-ui-b-heading">
1055
+ <template>
1056
+ <style>
1057
+ :host {
1058
+ background-color: rgb(243, 245, 247);
1059
+ border-right: 1px solid #8e8e8e;
1060
+ display: block;
1061
+ height: 100%;
1062
+ margin: 0;
1063
+ padding: 0 5px 0 0;
1064
+ }
1065
+
1066
+ heading {
1067
+ display: block;
1068
+ overflow-x: hidden;
1069
+ text-align: left;
1070
+ white-space: nowrap;
1071
+ }
1072
+
1073
+ #arrow {
1074
+ flex: 0 0 auto;
1075
+ font-family: sans-serif;
1076
+ margin-left: 5px;
1077
+ margin-right: 5px;
1078
+ width: 8px;
1079
+ }
1080
+
1081
+ #link, #heading_content {
1082
+ display: none;
1083
+ }
1084
+ </style>
1085
+ <heading id="heading" on-click="onHeadingDivClicked_">
1086
+ <span id="arrow"></span>
1087
+ <span id="heading_content"></span>
1088
+ <tr-ui-a-analysis-link id="link"></tr-ui-a-analysis-link>
1089
+ </heading>
1090
+ </template>
1091
+ </dom-module><style>
1092
+ .track-button{background-color:rgba(255,255,255,0.5);border:1px solid rgba(0,0,0,0.1);color:rgba(0,0,0,0.2);font-size:10px;height:12px;text-align:center;width:12px}.track-button:hover{background-color:rgba(255,255,255,1.0);border:1px solid rgba(0,0,0,0.5);box-shadow:0 0 .05em rgba(0,0,0,0.4);color:rgba(0,0,0,1)}.track-close-button{left:2px;position:absolute;top:2px}.track-collapse-button{left:3px;position:absolute;top:2px}
1093
+ </style><style>
1094
+ .object-instance-track{height:18px}
1095
+ </style><style>
1096
+ .tr-ui-e-system-stats-instance-track{height:500px}.tr-ui-e-system-stats-instance-track ul{list-style:none;list-style-position:outside;margin:0;overflow:hidden}
1097
+ </style><style>
1098
+ .tr-ui-e-system-stats-snapshot-view .subhead{font-size:small;padding-bottom:10px}.tr-ui-e-system-stats-snapshot-view ul{background-position:0 5px;background-repeat:no-repeat;cursor:pointer;font-family:monospace;list-style:none;margin:0;padding-left:15px}.tr-ui-e-system-stats-snapshot-view li{background-position:0 5px;background-repeat:no-repeat;cursor:pointer;list-style:none;margin:0;padding-left:15px}
1099
+ </style><dom-module id="tr-ui-e-v8-gc-objects-stats-table">
1100
+ <template>
1101
+ <style>
1102
+ tr-ui-b-table {
1103
+ flex: 0 0 auto;
1104
+ align-self: stretch;
1105
+ margin-top: 1em;
1106
+ font-size: 12px;
1107
+ }
1108
+ .diff {
1109
+ display: inline-block;
1110
+ margin-top: 1em;
1111
+ margin-left: 0.8em;
1112
+ }
1113
+ </style>
1114
+ <div class="diff" id="diffOption">
1115
+ Diff
1116
+ </div>
1117
+ <tr-ui-b-table id="diffTable"></tr-ui-b-table>
1118
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1119
+ </template>
1120
+ </dom-module><dom-module id="tr-ui-e-multi-v8-gc-stats-thread-slice-sub-view">
1121
+ <template>
1122
+ <style>
1123
+ </style>
1124
+ <tr-ui-e-v8-gc-objects-stats-table id="gcObjectsStats">
1125
+ </tr-ui-e-v8-gc-objects-stats-table>
1126
+ </template>
1127
+ </dom-module><dom-module id="tr-ui-e-v8-ic-stats-table">
1128
+ <template>
1129
+ <style>
1130
+ tr-ui-b-table {
1131
+ flex: 0 0 auto;
1132
+ align-self: stretch;
1133
+ margin-top: 1em;
1134
+ font-size: 12px;
1135
+ }
1136
+ #total {
1137
+ margin-top: 1em;
1138
+ margin-left: 0.8em;
1139
+ }
1140
+ #groupOption {
1141
+ display: inline-block;
1142
+ margin-top: 1em;
1143
+ margin-left: 0.8em;
1144
+ }
1145
+ </style>
1146
+ <div style="padding-right: 200px">
1147
+ <div style="float:right; border-style: solid; border-width: 1px; padding:20px">
1148
+ X no feedback<br>
1149
+ 0 uninitialized<br>
1150
+ . premonomorphic<br>
1151
+ 1 monomorphic<br>
1152
+ ^ recompute handler<br>
1153
+ P polymorphic<br>
1154
+ N megamorphic<br>
1155
+ G generic
1156
+ </div>
1157
+ </div>
1158
+ <div id="total">
1159
+ </div>
1160
+ <div id="groupOption">
1161
+ Group Key
1162
+ </div>
1163
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1164
+ </template>
1165
+ </dom-module><dom-module id="tr-ui-e-multi-v8-ic-stats-thread-slice-sub-view">
1166
+ <template>
1167
+ <tr-ui-e-v8-ic-stats-table id="table">
1168
+ </tr-ui-e-v8-ic-stats-table>
1169
+ </template>
1170
+ </dom-module><dom-module id="tr-ui-e-v8-runtime-call-stats-table">
1171
+ <template>
1172
+ <style>
1173
+ #table, #blink_rcs_table {
1174
+ flex: 0 0 auto;
1175
+ align-self: stretch;
1176
+ margin-top: 1em;
1177
+ font-size: 12px;
1178
+ }
1179
+
1180
+ #v8_rcs_heading, #blink_rcs_heading {
1181
+ padding-top: 1em;
1182
+ font-size: 18px;
1183
+ }
1184
+ </style>
1185
+ <h1 id="v8_rcs_heading"></h1>
1186
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1187
+ <h1 id="blink_rcs_heading"></h1>
1188
+ <tr-ui-b-table id="blink_rcs_table"></tr-ui-b-table>
1189
+ </template>
1190
+ </dom-module><dom-module id="tr-ui-e-multi-v8-thread-slice-sub-view">
1191
+ <template>
1192
+ <tr-ui-a-multi-thread-slice-sub-view id="content"></tr-ui-a-multi-thread-slice-sub-view>
1193
+ <tr-ui-e-v8-runtime-call-stats-table id="runtimeCallStats"></tr-ui-e-v8-runtime-call-stats-table>
1194
+ </template>
1195
+ </dom-module><dom-module id="tr-ui-e-single-v8-gc-stats-thread-slice-sub-view">
1196
+ <template>
1197
+ <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
1198
+ <tr-ui-e-v8-gc-objects-stats-table id="gcObjectsStats"></tr-ui-e-v8-gc-objects-stats-table>
1199
+ </template>
1200
+ </dom-module><dom-module id="tr-ui-e-single-v8-ic-stats-thread-slice-sub-view">
1201
+ <template>
1202
+ <tr-ui-e-v8-ic-stats-table id="table">
1203
+ </tr-ui-e-v8-ic-stats-table>
1204
+ </template>
1205
+ </dom-module><dom-module id="tr-ui-e-single-v8-thread-slice-sub-view">
1206
+ <template>
1207
+ <tr-ui-a-single-thread-slice-sub-view id="content"></tr-ui-a-single-thread-slice-sub-view>
1208
+ <tr-ui-e-v8-runtime-call-stats-table id="runtimeCallStats"></tr-ui-e-v8-runtime-call-stats-table>
1209
+ </template>
1210
+ </dom-module><dom-module id="tr-ui-a-alert-sub-view">
1211
+ <template>
1212
+ <style>
1213
+ :host {
1214
+ display: flex;
1215
+ flex-direction: column;
1216
+ }
1217
+ #table {
1218
+ flex: 1 1 auto;
1219
+ align-self: stretch;
1220
+ font-size: 12px;
1221
+ }
1222
+ </style>
1223
+ <tr-ui-b-table id="table">
1224
+ </tr-ui-b-table>
1225
+ </template>
1226
+ </dom-module><dom-module id="tr-ui-b-tab-view">
1227
+ <template>
1228
+ <style>
1229
+ :host {
1230
+ display: flex;
1231
+ flex-direction: column;
1232
+ }
1233
+
1234
+ #selection_description, #tabs {
1235
+ font-size: 12px;
1236
+ }
1237
+
1238
+ #selection_description {
1239
+ display: inline-block;
1240
+ font-weight: bold;
1241
+ margin: 9px 0px 4px 20px;
1242
+ }
1243
+
1244
+ #tabs {
1245
+ flex: 0 0 auto;
1246
+ border-top: 1px solid #8e8e8e;
1247
+ border-bottom: 1px solid #8e8e8e;
1248
+ background-color: #ececec;
1249
+ overflow: hidden;
1250
+ margin: 0;
1251
+ }
1252
+
1253
+ #tabs input[type=radio] {
1254
+ display: none;
1255
+ }
1256
+
1257
+ #tabs tab label {
1258
+ cursor: pointer;
1259
+ display: inline-block;
1260
+ border: 1px solid #ececec;
1261
+ margin: 5px 0px 0px 15px;
1262
+ padding: 3px 10px 3px 10px;
1263
+ }
1264
+
1265
+ #tabs tab label span {
1266
+ font-weight: bold;
1267
+ }
1268
+
1269
+ #tabs:focus input[type=radio]:checked ~ label {
1270
+ outline: dotted 1px #8e8e8e;
1271
+ outline-offset: -2px;
1272
+ }
1273
+
1274
+ #tabs input[type=radio]:checked ~ label {
1275
+ background-color: white;
1276
+ border: 1px solid #8e8e8e;
1277
+ border-bottom: 1px solid white;
1278
+ }
1279
+
1280
+ #subView {
1281
+ flex: 1 1 auto;
1282
+ min-width: 0;
1283
+ display: flex;
1284
+ }
1285
+
1286
+ #subView > * {
1287
+ flex: 1 1 auto;
1288
+ min-width: 0;
1289
+ }
1290
+ </style>
1291
+ <div hidden="[[tabsHidden]]" id="tabs">
1292
+ <label id="selection_description">[[label_]]</label>
1293
+ <template is="dom-repeat" items="[[subViews_]]">
1294
+ <tab>
1295
+ <input checked="[[isChecked_(item)]]" id$="[[computeRadioId_(item)]]" name="tabs" on-change="onTabChanged_" type="radio">
1296
+ <label for$="[[computeRadioId_(item)]]">
1297
+ <template if="[[item.tabIcon]]" is="dom-if">
1298
+ <span style$="[[item.tabIcon.style]]">[[item.tabIcon.text]]</span>
1299
+ </template>
1300
+ [[item.tabLabel]]
1301
+ </label>
1302
+ </tab>
1303
+ </template>
1304
+ </div>
1305
+ <div id="subView"></div>
1306
+ <slot>
1307
+ </slot>
1308
+ </template>
1309
+ </dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-breakdown-view">
1310
+ <template>
1311
+ <tr-ui-b-tab-view id="tabs"></tr-ui-b-tab-view>
1312
+ </template>
1313
+ </dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-breakdown-view-tab">
1314
+ <template>
1315
+ <tr-v-ui-scalar-context-controller></tr-v-ui-scalar-context-controller>
1316
+ <tr-ui-b-info-bar hidden id="info"></tr-ui-b-info-bar>
1317
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1318
+ </template>
1319
+ </dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-path-view">
1320
+ <template>
1321
+ <style>
1322
+ :host {
1323
+ display: flex;
1324
+ flex-direction: column;
1325
+ }
1326
+ </style>
1327
+ <tr-v-ui-scalar-context-controller></tr-v-ui-scalar-context-controller>
1328
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1329
+ </template>
1330
+ </dom-module><dom-module id="tr-ui-a-memory-dump-heap-details-pane">
1331
+ <template>
1332
+ <style>
1333
+ :host {
1334
+ display: flex;
1335
+ flex-direction: column;
1336
+ }
1337
+
1338
+ #header {
1339
+ flex: 0 0 auto;
1340
+ display: flex;
1341
+ flex-direction: row;
1342
+ align-items: center;
1343
+
1344
+ background-color: #eee;
1345
+ border-bottom: 1px solid #8e8e8e;
1346
+ border-top: 1px solid white;
1347
+ }
1348
+
1349
+ #label {
1350
+ flex: 1 1 auto;
1351
+ padding: 8px;
1352
+ font-size: 15px;
1353
+ font-weight: bold;
1354
+ }
1355
+
1356
+ #view_mode_container {
1357
+ display: none;
1358
+ flex: 0 0 auto;
1359
+ padding: 5px;
1360
+ font-size: 15px;
1361
+ }
1362
+
1363
+ #contents {
1364
+ flex: 1 0 auto;
1365
+ align-self: stretch;
1366
+ font-size: 12px;
1367
+ }
1368
+
1369
+ #info_text {
1370
+ padding: 8px;
1371
+ color: #666;
1372
+ font-style: italic;
1373
+ text-align: center;
1374
+ }
1375
+
1376
+ #split_view {
1377
+ display: none; /* Hide until memory allocator dumps are set. */
1378
+ flex: 1 0 auto;
1379
+ align-self: stretch;
1380
+ flex-direction: row;
1381
+ }
1382
+
1383
+ #path_view {
1384
+ width: 50%;
1385
+ }
1386
+
1387
+ #breakdown_view {
1388
+ flex: 1 1 auto;
1389
+ width: 0;
1390
+ }
1391
+
1392
+ #path_view, #breakdown_view {
1393
+ overflow-x: auto; /* Show scrollbar if necessary. */
1394
+ }
1395
+ </style>
1396
+ <div id="header">
1397
+ <div id="label">Heap details</div>
1398
+ <div id="view_mode_container">
1399
+ <span>View mode:</span>
1400
+
1401
+ </div>
1402
+ </div>
1403
+ <div id="contents">
1404
+ <tr-ui-b-info-bar hidden id="info_bar">
1405
+ </tr-ui-b-info-bar>
1406
+
1407
+ <div id="info_text">No heap dump selected</div>
1408
+
1409
+ <div id="split_view">
1410
+ <tr-ui-a-memory-dump-heap-details-path-view id="path_view">
1411
+ </tr-ui-a-memory-dump-heap-details-path-view>
1412
+ <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle>
1413
+ <tr-ui-a-memory-dump-heap-details-breakdown-view id="breakdown_view">
1414
+ </tr-ui-a-memory-dump-heap-details-breakdown-view>
1415
+ </div>
1416
+ </div>
1417
+ </template>
1418
+ </dom-module><dom-module id="tr-ui-a-memory-dump-allocator-details-pane">
1419
+ <template>
1420
+ <style>
1421
+ :host {
1422
+ display: flex;
1423
+ flex-direction: column;
1424
+ }
1425
+
1426
+ #label {
1427
+ flex: 0 0 auto;
1428
+ padding: 8px;
1429
+
1430
+ background-color: #eee;
1431
+ border-bottom: 1px solid #8e8e8e;
1432
+ border-top: 1px solid white;
1433
+
1434
+ font-size: 15px;
1435
+ font-weight: bold;
1436
+ }
1437
+
1438
+ #contents {
1439
+ flex: 1 0 auto;
1440
+ align-self: stretch;
1441
+ font-size: 12px;
1442
+ }
1443
+
1444
+ #info_text {
1445
+ padding: 8px;
1446
+ color: #666;
1447
+ font-style: italic;
1448
+ text-align: center;
1449
+ }
1450
+
1451
+ #table {
1452
+ display: none; /* Hide until memory allocator dumps are set. */
1453
+ flex: 1 0 auto;
1454
+ align-self: stretch;
1455
+ font-size: 12px;
1456
+ }
1457
+ </style>
1458
+ <div id="label">Component details</div>
1459
+ <div id="contents">
1460
+ <div id="info_text">No memory allocator dump selected</div>
1461
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1462
+ </div>
1463
+ </template>
1464
+ </dom-module><dom-module id="tr-ui-a-memory-dump-vm-regions-details-pane">
1465
+ <template>
1466
+ <style>
1467
+ :host {
1468
+ display: flex;
1469
+ flex-direction: column;
1470
+ }
1471
+
1472
+ #label {
1473
+ flex: 0 0 auto;
1474
+ padding: 8px;
1475
+
1476
+ background-color: #eee;
1477
+ border-bottom: 1px solid #8e8e8e;
1478
+ border-top: 1px solid white;
1479
+
1480
+ font-size: 15px;
1481
+ font-weight: bold;
1482
+ }
1483
+
1484
+ #contents {
1485
+ flex: 1 0 auto;
1486
+ align-self: stretch;
1487
+ font-size: 12px;
1488
+ }
1489
+
1490
+ #info_text {
1491
+ padding: 8px;
1492
+ color: #666;
1493
+ font-style: italic;
1494
+ text-align: center;
1495
+ }
1496
+
1497
+ #table {
1498
+ display: none; /* Hide until memory dumps are set. */
1499
+ flex: 1 0 auto;
1500
+ align-self: stretch;
1501
+ font-size: 12px;
1502
+ }
1503
+ </style>
1504
+ <div id="label">Memory maps</div>
1505
+ <div id="contents">
1506
+ <div id="info_text">No memory maps selected</div>
1507
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1508
+ </div>
1509
+ </template>
1510
+ </dom-module><dom-module id="tr-ui-b-color-legend">
1511
+ <template>
1512
+ <style>
1513
+ :host {
1514
+ display: inline-block;
1515
+ }
1516
+
1517
+ #square {
1518
+ font-size: 150%; /* Make the square bigger. */
1519
+ line-height: 0%; /* Prevent the square from increasing legend height. */
1520
+ }
1521
+ </style>
1522
+ <span id="square"></span>
1523
+ <span id="label"></span>
1524
+ </template>
1525
+ </dom-module><dom-module id="tr-ui-b-view-specific-brushing-state">
1526
+ <template></template>
1527
+ </dom-module><dom-module id="tr-ui-a-memory-dump-overview-pane">
1528
+ <template>
1529
+ <style>
1530
+ :host {
1531
+ display: flex;
1532
+ flex-direction: column;
1533
+ }
1534
+
1535
+ #label {
1536
+ flex: 0 0 auto;
1537
+ padding: 8px;
1538
+
1539
+ background-color: #eee;
1540
+ border-bottom: 1px solid #8e8e8e;
1541
+ border-top: 1px solid white;
1542
+
1543
+ font-size: 15px;
1544
+ font-weight: bold;
1545
+ }
1546
+
1547
+ #label a {
1548
+ font-weight: normal;
1549
+ float: right;
1550
+ }
1551
+
1552
+ #contents {
1553
+ flex: 1 0 auto;
1554
+ align-self: stretch;
1555
+ font-size: 12px;
1556
+ overflow: auto;
1557
+ }
1558
+
1559
+ #info_text {
1560
+ padding: 8px;
1561
+ color: #666;
1562
+ font-style: italic;
1563
+ text-align: center;
1564
+ }
1565
+
1566
+ #table {
1567
+ display: none; /* Hide until memory dumps are set. */
1568
+ flex: 1 0 auto;
1569
+ align-self: stretch;
1570
+ font-size: 12px;
1571
+ }
1572
+ </style>
1573
+ <tr-ui-b-view-specific-brushing-state id="state" view-id="analysis.memory_dump_overview_pane">
1574
+ </tr-ui-b-view-specific-brushing-state>
1575
+ <div id="label">Overview <a href="https://chromium.googlesource.com/chromium/src/+/master/docs/memory-infra">Help</a></div>
1576
+ <div id="contents">
1577
+ <div id="info_text">No memory memory dumps selected</div>
1578
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1579
+ </div>
1580
+ </template>
1581
+ </dom-module><dom-module id="tr-ui-a-memory-dump-header-pane">
1582
+ <template>
1583
+ <style>
1584
+ :host {
1585
+ display: flex;
1586
+ flex-direction: row;
1587
+ align-items: center;
1588
+
1589
+ background-color: #d0d0d0;
1590
+ border-bottom: 1px solid #8e8e8e;
1591
+ border-top: 1px solid white;
1592
+ }
1593
+
1594
+ #label {
1595
+ flex: 1 1 auto;
1596
+ padding: 6px;
1597
+ font-size: 15px;
1598
+ }
1599
+
1600
+ #aggregation_mode_container {
1601
+ display: none;
1602
+ flex: 0 0 auto;
1603
+ padding: 5px;
1604
+ font-size: 15px;
1605
+ }
1606
+ </style>
1607
+
1608
+ <div id="label"></div>
1609
+ <div id="aggregation_mode_container">
1610
+ <span>Metric aggregation:</span>
1611
+
1612
+ </div>
1613
+ </template>
1614
+ </dom-module><dom-module id="tr-ui-a-stacked-pane-view">
1615
+ <template>
1616
+ <style>
1617
+ :host {
1618
+ display: flex;
1619
+ flex-direction: column;
1620
+ }
1621
+
1622
+ #pane_container > * {
1623
+ flex: 0 0 auto;
1624
+ }
1625
+ </style>
1626
+ <div id="pane_container">
1627
+ </div>
1628
+ </template>
1629
+ </dom-module><dom-module id="tr-ui-a-container-memory-dump-sub-view">
1630
+ <template>
1631
+ <style>
1632
+ tr-ui-b-table {
1633
+ font-size: 12px;
1634
+ }
1635
+ </style>
1636
+ <div id="content"></div>
1637
+ </template>
1638
+ </dom-module><dom-module id="tr-ui-a-counter-sample-sub-view">
1639
+ <template>
1640
+ <style>
1641
+ :host {
1642
+ display: flex;
1643
+ flex-direction: column;
1644
+ }
1645
+ tr-ui-b-table {
1646
+ font-size: 12px;
1647
+ }
1648
+ </style>
1649
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1650
+ </template>
1651
+ </dom-module><dom-module id="tr-ui-a-multi-event-summary-table">
1652
+ <template>
1653
+ <style>
1654
+ :host {
1655
+ display: flex;
1656
+ }
1657
+ #table {
1658
+ flex: 1 1 auto;
1659
+ align-self: stretch;
1660
+ font-size: 12px;
1661
+ }
1662
+ </style>
1663
+ <tr-ui-b-table id="table">
1664
+ </tr-ui-b-table>
1665
+
1666
+ </template>
1667
+ </dom-module><dom-module id="tr-ui-a-selection-summary-table">
1668
+ <template>
1669
+ <style>
1670
+ :host {
1671
+ display: flex;
1672
+ }
1673
+ #table {
1674
+ flex: 1 1 auto;
1675
+ align-self: stretch;
1676
+ font-size: 12px;
1677
+ }
1678
+ </style>
1679
+ <tr-ui-b-table id="table">
1680
+ </tr-ui-b-table>
1681
+
1682
+ </template>
1683
+ </dom-module><dom-module id="tr-ui-b-radio-picker">
1684
+ <template>
1685
+ <style>
1686
+ :host([vertical]) #container {
1687
+ flex-direction: column;
1688
+ }
1689
+ :host(:not[vertical]) #container {
1690
+ flex-direction: row;
1691
+ }
1692
+ #container {
1693
+ display: flex;
1694
+ }
1695
+ #container > div {
1696
+ padding-left: 1em;
1697
+ padding-bottom: 0.5em;
1698
+ }
1699
+ </style>
1700
+ <div id="container"></div>
1701
+ </template>
1702
+ </dom-module><dom-module id="tr-v-ui-breakdown-span">
1703
+ <template>
1704
+ <style>
1705
+ :host {
1706
+ display: flex;
1707
+ flex-direction: column;
1708
+ }
1709
+ #table_container {
1710
+ display: flex;
1711
+ flex: 0 0 auto;
1712
+ }
1713
+ #table {
1714
+ max-height: 150px;
1715
+ overflow-y: auto;
1716
+ }
1717
+ </style>
1718
+
1719
+ <div id="empty">(empty)</div>
1720
+ <div id="table_container">
1721
+ <div id="container"></div>
1722
+ <span>
1723
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1724
+ </span>
1725
+ </div>
1726
+ </template>
1727
+ </dom-module><dom-module id="tr-v-ui-collected-related-event-set-span">
1728
+ </dom-module><dom-module id="tr-v-ui-date-range-span">
1729
+ <template>
1730
+ <content></content>
1731
+ </template>
1732
+ </dom-module><dom-module id="tr-v-ui-generic-set-span">
1733
+ <template>
1734
+ <style>
1735
+ a {
1736
+ display: block;
1737
+ }
1738
+ </style>
1739
+
1740
+ <tr-ui-a-generic-object-view id="generic"></tr-ui-a-generic-object-view>
1741
+
1742
+ <div id="links"></div>
1743
+ </template>
1744
+ </dom-module><dom-module id="tr-v-ui-related-event-set-span">
1745
+ </dom-module><dom-module id="tr-v-ui-scalar-diagnostic-span">
1746
+ <template>
1747
+ <tr-v-ui-scalar-span id="scalar"></tr-v-ui-scalar-span>
1748
+ </template>
1749
+ </dom-module><dom-module id="tr-v-ui-unmergeable-diagnostic-set-span">
1750
+ </dom-module><dom-module id="tr-v-ui-diagnostic-map-table">
1751
+ <template>
1752
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1753
+ </template>
1754
+ </dom-module><dom-module id="tr-v-ui-scalar-map-table">
1755
+ <template>
1756
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1757
+ </template>
1758
+ </dom-module><dom-module id="tr-v-ui-histogram-span">
1759
+ <template>
1760
+ <style>
1761
+ #container {
1762
+ display: flex;
1763
+ flex-direction: row;
1764
+ justify-content: space-between;
1765
+ }
1766
+ #chart {
1767
+ flex-grow: 1;
1768
+ display: none;
1769
+ }
1770
+ #drag_handle, #diagnostics_tab_templates {
1771
+ display: none;
1772
+ }
1773
+ #chart svg {
1774
+ display: block;
1775
+ }
1776
+ #stats_container {
1777
+ overflow-y: auto;
1778
+ }
1779
+ </style>
1780
+
1781
+ <div id="container">
1782
+ <div id="chart"></div>
1783
+ <div id="stats_container">
1784
+ <tr-v-ui-scalar-map-table id="stats"></tr-v-ui-scalar-map-table>
1785
+ </div>
1786
+ </div>
1787
+ <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle>
1788
+
1789
+ <tr-ui-b-tab-view id="diagnostics"></tr-ui-b-tab-view>
1790
+
1791
+ <div id="diagnostics_tab_templates">
1792
+ <tr-v-ui-diagnostic-map-table id="metric_diagnostics"></tr-v-ui-diagnostic-map-table>
1793
+
1794
+ <tr-v-ui-diagnostic-map-table id="metadata_diagnostics"></tr-v-ui-diagnostic-map-table>
1795
+
1796
+ <div id="sample_diagnostics_container">
1797
+ <div id="merge_sample_diagnostics_container">
1798
+ <input checked id="merge_sample_diagnostics" on-change="updateDiagnostics_" type="checkbox">
1799
+ <label for="merge_sample_diagnostics">Merge Sample Diagnostics</label>
1800
+ </div>
1801
+ <tr-v-ui-diagnostic-map-table id="sample_diagnostics"></tr-v-ui-diagnostic-map-table>
1802
+ </div>
1803
+ </div>
1804
+ </template>
1805
+ </dom-module><dom-module id="tr-ui-a-multi-event-sub-view">
1806
+ <template>
1807
+ <style>
1808
+ :host {
1809
+ display: flex;
1810
+ overflow: auto;
1811
+ }
1812
+ #content {
1813
+ display: flex;
1814
+ flex-direction: column;
1815
+ flex: 0 1 auto;
1816
+ align-self: stretch;
1817
+ }
1818
+ #content > * {
1819
+ flex: 0 0 auto;
1820
+ align-self: stretch;
1821
+ }
1822
+ #histogramContainer {
1823
+ display: flex;
1824
+ }
1825
+
1826
+ tr-ui-a-multi-event-summary-table {
1827
+ border-bottom: 1px solid #aaa;
1828
+ }
1829
+
1830
+ tr-ui-a-selection-summary-table {
1831
+ margin-top: 1.25em;
1832
+ border-top: 1px solid #aaa;
1833
+ background-color: #eee;
1834
+ font-weight: bold;
1835
+ margin-bottom: 1.25em;
1836
+ border-bottom: 1px solid #aaa;
1837
+ }
1838
+ </style>
1839
+ <div id="content">
1840
+ <tr-ui-a-multi-event-summary-table id="eventSummaryTable">
1841
+ </tr-ui-a-multi-event-summary-table>
1842
+ <tr-ui-a-selection-summary-table id="selectionSummaryTable">
1843
+ </tr-ui-a-selection-summary-table>
1844
+ <tr-ui-b-radio-picker id="radioPicker">
1845
+ </tr-ui-b-radio-picker>
1846
+ <div id="histogramContainer">
1847
+ <tr-v-ui-histogram-span id="histogramSpan">
1848
+ </tr-v-ui-histogram-span>
1849
+ </div>
1850
+ </div>
1851
+ </template>
1852
+ </dom-module><dom-module id="tr-ui-a-related-events">
1853
+ <template>
1854
+ <style>
1855
+ :host {
1856
+ display: flex;
1857
+ flex-direction: column;
1858
+ }
1859
+ #table {
1860
+ flex: 1 1 auto;
1861
+ align-self: stretch;
1862
+ font-size: 12px;
1863
+ }
1864
+ </style>
1865
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1866
+ </template>
1867
+ </dom-module><dom-module id="tr-ui-a-multi-async-slice-sub-view">
1868
+ <template>
1869
+ <style>
1870
+ :host {
1871
+ display: flex;
1872
+ }
1873
+ #container {
1874
+ display: flex;
1875
+ flex: 1 1 auto;
1876
+ }
1877
+ #events {
1878
+ margin-left: 8px;
1879
+ flex: 0 1 200px;
1880
+ }
1881
+ </style>
1882
+ <div id="container">
1883
+ <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
1884
+ <div id="events">
1885
+ <tr-ui-a-related-events id="relatedEvents"></tr-ui-a-related-events>
1886
+ </div>
1887
+ </div>
1888
+ </template>
1889
+ </dom-module><dom-module id="tr-ui-a-multi-cpu-slice-sub-view">
1890
+ <template>
1891
+ <style>
1892
+ :host {
1893
+ display: flex;
1894
+ }
1895
+ #content {
1896
+ flex: 1 1 auto;
1897
+ }
1898
+ </style>
1899
+ <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
1900
+ </template>
1901
+ </dom-module><dom-module id="tr-ui-a-multi-flow-event-sub-view">
1902
+ <template>
1903
+ <style>
1904
+ :host {
1905
+ display: flex;
1906
+ }
1907
+ </style>
1908
+ <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
1909
+ </template>
1910
+ </dom-module><dom-module id="tr-ui-a-multi-instant-event-sub-view">
1911
+ <template>
1912
+ <style>
1913
+ :host {
1914
+ display: block;
1915
+ }
1916
+ </style>
1917
+ <div id="content"></div>
1918
+ </template>
1919
+ </dom-module><dom-module id="tr-ui-a-multi-object-sub-view">
1920
+ <template>
1921
+ <style>
1922
+ :host {
1923
+ display: flex;
1924
+ font-size: 12px;
1925
+ }
1926
+ </style>
1927
+ <tr-ui-b-table id="content"></tr-ui-b-table>
1928
+ </template>
1929
+ </dom-module><dom-module id="tr-ui-a-frame-power-usage-chart">
1930
+ <template>
1931
+ <div id="content"></div>
1932
+ </template>
1933
+ </dom-module><dom-module id="tr-ui-a-power-sample-summary-table">
1934
+ <template>
1935
+ <style>
1936
+ tr-ui-b-table {
1937
+ font-size: 12px;
1938
+ }
1939
+ </style>
1940
+ <tr-ui-b-table id="table"></tr-ui-b-table>
1941
+ </template>
1942
+ </dom-module><dom-module id="tr-ui-a-multi-power-sample-sub-view">
1943
+ <template>
1944
+ <style>
1945
+ :host {
1946
+ display: flex;
1947
+ flex-direction: row;
1948
+ }
1949
+ #tables {
1950
+ display: flex;
1951
+ flex-direction: column;
1952
+ width: 50%;
1953
+ }
1954
+ #chart {
1955
+ width: 50%;
1956
+ }
1957
+ </style>
1958
+ <div id="tables">
1959
+ <tr-ui-a-power-sample-summary-table id="summaryTable">
1960
+ </tr-ui-a-power-sample-summary-table>
1961
+ </div>
1962
+ <tr-ui-a-frame-power-usage-chart id="chart">
1963
+ </tr-ui-a-frame-power-usage-chart>
1964
+ </template>
1965
+ </dom-module><dom-module id="tr-ui-a-multi-sample-sub-view">
1966
+ <template>
1967
+ <style>
1968
+ :host { display: block; }
1969
+ #control {
1970
+ background-color: #e6e6e6;
1971
+ background-image: -webkit-gradient(linear, 0 0, 0 100%,
1972
+ from(#E5E5E5), to(#D1D1D1));
1973
+ flex: 0 0 auto;
1974
+ overflow-x: auto;
1975
+ }
1976
+ #control::-webkit-scrollbar { height: 0px; }
1977
+ #control {
1978
+ font-size: 12px;
1979
+ display: flex;
1980
+ flex-direction: row;
1981
+ align-items: stretch;
1982
+ margin: 1px;
1983
+ margin-right: 2px;
1984
+ }
1985
+ tr-ui-b-table {
1986
+ font-size: 12px;
1987
+ }
1988
+ </style>
1989
+ <div id="control">
1990
+ Sample View Option
1991
+ </div>
1992
+ <tr-ui-b-table id="table">
1993
+ </tr-ui-b-table>
1994
+ </template>
1995
+ </dom-module><dom-module id="tr-ui-a-multi-thread-slice-sub-view">
1996
+ <template>
1997
+ <style>
1998
+ :host {
1999
+ display: flex;
2000
+ }
2001
+ #content {
2002
+ display: flex;
2003
+ flex: 1 1 auto;
2004
+ min-width: 0;
2005
+ }
2006
+ #content > tr-ui-a-related-events {
2007
+ margin-left: 8px;
2008
+ flex: 0 1 200px;
2009
+ }
2010
+ </style>
2011
+ <div id="content"></div>
2012
+ </template>
2013
+ </dom-module><dom-module id="tr-ui-a-multi-thread-time-slice-sub-view">
2014
+ <template>
2015
+ <style>
2016
+ :host {
2017
+ display: flex;
2018
+ }
2019
+ #content {
2020
+ flex: 1 1 auto;
2021
+ min-width: 0;
2022
+ }
2023
+ </style>
2024
+ <tr-ui-a-multi-event-sub-view id="content"></tr-ui-a-multi-event-sub-view>
2025
+ </template>
2026
+ </dom-module><dom-module id="tr-ui-a-user-expectation-related-samples-table">
2027
+ <template>
2028
+ <style>
2029
+ #table {
2030
+ flex: 1 1 auto;
2031
+ align-self: stretch;
2032
+ font-size: 12px;
2033
+ }
2034
+ </style>
2035
+ <tr-ui-b-table id="table"></tr-ui-b-table>
2036
+ </template>
2037
+ </dom-module><dom-module id="tr-ui-a-multi-user-expectation-sub-view">
2038
+ <template>
2039
+ <style>
2040
+ :host {
2041
+ display: flex;
2042
+ flex: 1 1 auto;
2043
+ }
2044
+ #events {
2045
+ margin-left: 8px;
2046
+ flex: 0 1 200px;
2047
+ }
2048
+ </style>
2049
+ <tr-ui-a-multi-event-sub-view id="realView"></tr-ui-a-multi-event-sub-view>
2050
+ <div id="events">
2051
+ <tr-ui-a-user-expectation-related-samples-table id="relatedSamples"></tr-ui-a-user-expectation-related-samples-table>
2052
+ </div>
2053
+ </template>
2054
+ </dom-module><dom-module id="tr-ui-a-single-async-slice-sub-view">
2055
+ <template>
2056
+ <style>
2057
+ :host {
2058
+ display: flex;
2059
+ flex-direction: row;
2060
+ }
2061
+ #events {
2062
+ display:flex;
2063
+ flex-direction: column;
2064
+ }
2065
+ </style>
2066
+ <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
2067
+ <div id="events">
2068
+ <tr-ui-a-related-events id="relatedEvents"></tr-ui-a-related-events>
2069
+ </div>
2070
+ </template>
2071
+ </dom-module><dom-module id="tr-ui-a-single-cpu-slice-sub-view">
2072
+ <template>
2073
+ <style>
2074
+ table {
2075
+ border-collapse: collapse;
2076
+ border-width: 0;
2077
+ margin-bottom: 25px;
2078
+ width: 100%;
2079
+ }
2080
+
2081
+ table tr > td:first-child {
2082
+ padding-left: 2px;
2083
+ }
2084
+
2085
+ table tr > td {
2086
+ padding: 2px 4px 2px 4px;
2087
+ vertical-align: text-top;
2088
+ width: 150px;
2089
+ }
2090
+
2091
+ table td td {
2092
+ padding: 0 0 0 0;
2093
+ width: auto;
2094
+ }
2095
+ tr {
2096
+ vertical-align: top;
2097
+ }
2098
+
2099
+ tr:nth-child(2n+0) {
2100
+ background-color: #e2e2e2;
2101
+ }
2102
+ </style>
2103
+ <table>
2104
+ <tbody><tr>
2105
+ <td>Running process:</td><td id="process-name"></td>
2106
+ </tr>
2107
+ <tr>
2108
+ <td>Running thread:</td><td id="thread-name"></td>
2109
+ </tr>
2110
+ <tr>
2111
+ <td>Start:</td>
2112
+ <td>
2113
+ <tr-v-ui-scalar-span id="start">
2114
+ </tr-v-ui-scalar-span>
2115
+ </td>
2116
+ </tr>
2117
+ <tr>
2118
+ <td>Duration:</td>
2119
+ <td>
2120
+ <tr-v-ui-scalar-span id="duration">
2121
+ </tr-v-ui-scalar-span>
2122
+ </td>
2123
+ </tr>
2124
+ <tr>
2125
+ <td>Active slices:</td><td id="running-thread"></td>
2126
+ </tr>
2127
+ <tr>
2128
+ <td>Args:</td>
2129
+ <td>
2130
+ <tr-ui-a-generic-object-view id="args">
2131
+ </tr-ui-a-generic-object-view>
2132
+ </td>
2133
+ </tr>
2134
+ </tbody></table>
2135
+ </template>
2136
+ </dom-module><dom-module id="tr-ui-a-single-flow-event-sub-view">
2137
+ <template>
2138
+ <style>
2139
+ :host {
2140
+ display: block;
2141
+ }
2142
+ </style>
2143
+ <tr-ui-a-single-event-sub-view id="singleEventSubView">
2144
+ </tr-ui-a-single-event-sub-view>
2145
+ </template>
2146
+ </dom-module><dom-module id="tr-ui-a-single-frame-sub-view">
2147
+ <template>
2148
+ <style>
2149
+ :host {
2150
+ display: flex;
2151
+ flex-direction: column;
2152
+ }
2153
+ #asv {
2154
+ flex: 0 0 auto;
2155
+ align-self: stretch;
2156
+ }
2157
+ </style>
2158
+ <tr-ui-a-alert-sub-view id="asv">
2159
+ </tr-ui-a-alert-sub-view>
2160
+ </template>
2161
+ </dom-module><dom-module id="tr-ui-a-single-instant-event-sub-view">
2162
+ <template>
2163
+ <style>
2164
+ :host {
2165
+ display: block;
2166
+ }
2167
+ </style>
2168
+ <div id="content"></div>
2169
+ </template>
2170
+ </dom-module><dom-module id="tr-ui-a-single-object-instance-sub-view">
2171
+ <template>
2172
+ <style>
2173
+ :host {
2174
+ display: block;
2175
+ }
2176
+
2177
+ #snapshots > * {
2178
+ display: block;
2179
+ }
2180
+
2181
+ :host {
2182
+ overflow: auto;
2183
+ display: block;
2184
+ }
2185
+
2186
+ * {
2187
+ -webkit-user-select: text;
2188
+ }
2189
+
2190
+ .title {
2191
+ border-bottom: 1px solid rgb(128, 128, 128);
2192
+ font-size: 110%;
2193
+ font-weight: bold;
2194
+ }
2195
+
2196
+ td, th {
2197
+ font-family: monospace;
2198
+ vertical-align: top;
2199
+ }
2200
+ </style>
2201
+ <div id="content"></div>
2202
+ </template>
2203
+ </dom-module><dom-module id="tr-ui-a-single-object-snapshot-sub-view">
2204
+ <template>
2205
+ <style>
2206
+ #args {
2207
+ white-space: pre;
2208
+ }
2209
+
2210
+ :host {
2211
+ overflow: auto;
2212
+ display: flex;
2213
+ }
2214
+
2215
+ ::content * {
2216
+ -webkit-user-select: text;
2217
+ }
2218
+
2219
+ ::content .title {
2220
+ border-bottom: 1px solid rgb(128, 128, 128);
2221
+ font-size: 110%;
2222
+ font-weight: bold;
2223
+ }
2224
+
2225
+ ::content td, th {
2226
+ font-family: monospace;
2227
+ vertical-align: top;
2228
+ }
2229
+ </style>
2230
+ <slot></slot>
2231
+ </template>
2232
+ </dom-module><dom-module id="tr-ui-a-power-sample-table">
2233
+ <template>
2234
+ <style>
2235
+ :host {
2236
+ display: flex;
2237
+ font-size: 12px;
2238
+ }
2239
+ </style>
2240
+ <tr-ui-b-table id="table"></tr-ui-b-table>
2241
+ </template>
2242
+ </dom-module><dom-module id="tr-ui-a-single-power-sample-sub-view">
2243
+ <template>
2244
+ <style>
2245
+ :host { display: block; }
2246
+ </style>
2247
+ <tr-ui-a-power-sample-table id="samplesTable">
2248
+ </tr-ui-a-power-sample-table>
2249
+ </template>
2250
+ </dom-module><dom-module id="tr-ui-a-single-sample-sub-view">
2251
+ <template>
2252
+ <style>
2253
+ :host {
2254
+ display: flex;
2255
+ font-size: 12px;
2256
+ }
2257
+ </style>
2258
+ <tr-ui-b-table id="content"></tr-ui-b-table>
2259
+ </template>
2260
+ </dom-module><dom-module id="tr-ui-a-single-thread-slice-sub-view">
2261
+ <template>
2262
+ <style>
2263
+ :host {
2264
+ display: flex;
2265
+ flex-direction: row;
2266
+ }
2267
+ #events {
2268
+ display: flex;
2269
+ flex-direction: column;
2270
+ }
2271
+
2272
+ </style>
2273
+ <tr-ui-a-single-event-sub-view id="content"></tr-ui-a-single-event-sub-view>
2274
+ <div id="events">
2275
+ <tr-ui-a-related-events id="relatedEvents">
2276
+ </tr-ui-a-related-events>
2277
+ </div>
2278
+ </template>
2279
+ </dom-module><dom-module id="tr-ui-a-single-thread-time-slice-sub-view">
2280
+ <template>
2281
+ <style>
2282
+ table {
2283
+ border-collapse: collapse;
2284
+ border-width: 0;
2285
+ margin-bottom: 25px;
2286
+ width: 100%;
2287
+ }
2288
+
2289
+ table tr > td:first-child {
2290
+ padding-left: 2px;
2291
+ }
2292
+
2293
+ table tr > td {
2294
+ padding: 2px 4px 2px 4px;
2295
+ vertical-align: text-top;
2296
+ width: 150px;
2297
+ }
2298
+
2299
+ table td td {
2300
+ padding: 0 0 0 0;
2301
+ width: auto;
2302
+ }
2303
+ tr {
2304
+ vertical-align: top;
2305
+ }
2306
+
2307
+ tr:nth-child(2n+0) {
2308
+ background-color: #e2e2e2;
2309
+ }
2310
+ </style>
2311
+ <table>
2312
+ <tbody><tr>
2313
+ <td>Running process:</td><td id="process-name"></td>
2314
+ </tr>
2315
+ <tr>
2316
+ <td>Running thread:</td><td id="thread-name"></td>
2317
+ </tr>
2318
+ <tr>
2319
+ <td>State:</td>
2320
+ <td><b><span id="state"></span></b></td>
2321
+ </tr>
2322
+ <tr>
2323
+ <td>Start:</td>
2324
+ <td>
2325
+ <tr-v-ui-scalar-span id="start">
2326
+ </tr-v-ui-scalar-span>
2327
+ </td>
2328
+ </tr>
2329
+ <tr>
2330
+ <td>Duration:</td>
2331
+ <td>
2332
+ <tr-v-ui-scalar-span id="duration">
2333
+ </tr-v-ui-scalar-span>
2334
+ </td>
2335
+ </tr>
2336
+
2337
+ <tr>
2338
+ <td>On CPU:</td><td id="on-cpu"></td>
2339
+ </tr>
2340
+
2341
+ <tr>
2342
+ <td>Running instead:</td><td id="running-instead"></td>
2343
+ </tr>
2344
+
2345
+ <tr>
2346
+ <td>Args:</td><td id="args"></td>
2347
+ </tr>
2348
+ </tbody></table>
2349
+ </template>
2350
+ </dom-module><dom-module id="tr-ui-a-single-user-expectation-sub-view">
2351
+ <template>
2352
+ <style>
2353
+ :host {
2354
+ display: flex;
2355
+ flex-direction: row;
2356
+ }
2357
+ #events {
2358
+ display: flex;
2359
+ flex-direction: column;
2360
+ }
2361
+ </style>
2362
+ <tr-ui-a-single-event-sub-view id="realView"></tr-ui-a-single-event-sub-view>
2363
+ <div id="events">
2364
+ <tr-ui-a-user-expectation-related-samples-table id="relatedSamples"></tr-ui-a-user-expectation-related-samples-table>
2365
+ </div>
2366
+ </template>
2367
+ </dom-module><dom-module id="tr-ui-a-analysis-view">
2368
+ <template>
2369
+ <style>
2370
+ :host {
2371
+ background-color: white;
2372
+ display: flex;
2373
+ flex-direction: column;
2374
+ height: 275px;
2375
+ overflow: auto;
2376
+ }
2377
+
2378
+ :host(.tall-mode) {
2379
+ height: 525px;
2380
+ }
2381
+ </style>
2382
+ <slot></slot>
2383
+ </template>
2384
+ </dom-module><dom-module id="tr-ui-b-dropdown">
2385
+ <template>
2386
+ <style>
2387
+ button {
2388
+ @apply --dropdown-button;
2389
+ }
2390
+ button.open {
2391
+ @apply --dropdown-button-open;
2392
+ }
2393
+ dialog {
2394
+ position: absolute;
2395
+ margin: 0;
2396
+ padding: 1em;
2397
+ border: 1px solid darkgrey;
2398
+ @apply --dropdown-dialog;
2399
+ }
2400
+ </style>
2401
+
2402
+ <button id="button" on-tap="open">[[label]]</button>
2403
+
2404
+ <dialog id="dialog" on-cancel="close" on-tap="onDialogTap_">
2405
+ <slot></slot>
2406
+ </dialog>
2407
+ </template>
2408
+ </dom-module><dom-module id="tr-ui-b-info-bar-group">
2409
+ <template>
2410
+ <style>
2411
+ :host {
2412
+ flex: 0 0 auto;
2413
+ flex-direction: column;
2414
+ display: flex;
2415
+ }
2416
+ </style>
2417
+ <div id="messages"></div>
2418
+ </template>
2419
+ </dom-module><dom-module id="tr-ui-b-toolbar-button">
2420
+ <template>
2421
+ <style>
2422
+ :host {
2423
+ display: flex;
2424
+ background-color: #f8f8f8;
2425
+ border: 1px solid rgba(0, 0, 0, 0.5);
2426
+ color: rgba(0,0,0,0.8);
2427
+ justify-content: center;
2428
+ align-self: stretch;
2429
+ min-width: 23px;
2430
+ }
2431
+
2432
+ :host(:hover) {
2433
+ background-color: rgba(255, 255, 255, 1.0);
2434
+ border-color: rgba(0, 0, 0, 0.8);
2435
+ box-shadow: 0 0 .05em rgba(0, 0, 0, 0.4);
2436
+ color: rgba(0, 0, 0, 1);
2437
+ }
2438
+
2439
+ #aligner {
2440
+ display: flex;
2441
+ flex: 0 0 auto;
2442
+ align-self: center;
2443
+ }
2444
+ </style>
2445
+ <div id="aligner">
2446
+ <slot></slot>
2447
+ </div>
2448
+ </template>
2449
+ </dom-module><style>
2450
+ .drawing-container{display:inline;overflow:auto;overflow-x:hidden;position:relative}.drawing-container-canvas{display:block;pointer-events:none;position:absolute;top:0}
2451
+ </style><style>
2452
+ .letter-dot-track {
2453
+ height: 18px;
2454
+ }
2455
+ </style><style>
2456
+ .chart-track {
2457
+ height: 30px;
2458
+ position: relative;
2459
+ }
2460
+ </style><style>
2461
+ .cpu-usage-track {
2462
+ height: 90px;
2463
+ }
2464
+ </style><style>
2465
+ .power-series-track {
2466
+ height: 90px;
2467
+ }
2468
+ </style><style>
2469
+ .spacing-track{height:4px}
2470
+ </style><style>
2471
+ .rect-track{height:18px}
2472
+ </style><style>
2473
+ .thread-track{flex-direction:column;display:flex;position:relative}
2474
+ </style><style>
2475
+ .process-track-header{display:flex;flex:0 0 auto;background-image:-webkit-gradient(linear,0 0,100% 0,from(#E5E5E5),to(#D1D1D1));border-bottom:1px solid #8e8e8e;border-top:1px solid white;font-size:75%}.process-track-name{flex-grow:1}.process-track-name:before{content:'\25B8';padding:0 5px}.process-track-base.expanded .process-track-name:before{content:'\25BE'}.process-track-close{color:black;border:1px solid transparent;padding:0px 2px}.process-track-close:hover{border:1px solid grey}
2476
+ </style><style>
2477
+ .model-track {
2478
+ flex-grow: 1;
2479
+ }
2480
+ </style><style>
2481
+ .x-axis-track {
2482
+ height: 12px;
2483
+ }
2484
+
2485
+ .x-axis-track.tall-mode {
2486
+ height: 30px;
2487
+ }
2488
+ </style><dom-module id="tr-ui-timeline-track-view">
2489
+ <template>
2490
+ <style>
2491
+ :host {
2492
+ flex-direction: column;
2493
+ display: flex;
2494
+ position: relative;
2495
+ }
2496
+
2497
+ :host ::content * {
2498
+ -webkit-user-select: none;
2499
+ cursor: default;
2500
+ }
2501
+
2502
+ #drag_box {
2503
+ background-color: rgba(0, 0, 255, 0.25);
2504
+ border: 1px solid rgb(0, 0, 96);
2505
+ font-size: 75%;
2506
+ position: fixed;
2507
+ }
2508
+
2509
+ #hint_text {
2510
+ position: absolute;
2511
+ bottom: 6px;
2512
+ right: 6px;
2513
+ font-size: 8pt;
2514
+ }
2515
+ </style>
2516
+ <slot></slot>
2517
+
2518
+ <div id="drag_box"></div>
2519
+ <div id="hint_text"></div>
2520
+
2521
+ <tv-ui-b-hotkey-controller id="hotkey_controller">
2522
+ </tv-ui-b-hotkey-controller>
2523
+ </template>
2524
+ </dom-module><dom-module id="tr-ui-find-control">
2525
+ <template>
2526
+ <style>
2527
+ :host {
2528
+ -webkit-user-select: none;
2529
+ display: flex;
2530
+ position: relative;
2531
+ }
2532
+ input {
2533
+ -webkit-user-select: auto;
2534
+ background-color: #f8f8f8;
2535
+ border: 1px solid rgba(0, 0, 0, 0.5);
2536
+ box-sizing: border-box;
2537
+ margin: 0;
2538
+ padding: 0;
2539
+ width: 170px;
2540
+ }
2541
+ input:focus {
2542
+ background-color: white;
2543
+ }
2544
+ tr-ui-b-toolbar-button {
2545
+ border-left: none;
2546
+ margin: 0;
2547
+ }
2548
+ #hitCount {
2549
+ left: 0;
2550
+ opacity: 0.25;
2551
+ pointer-events: none;
2552
+ position: absolute;
2553
+ text-align: right;
2554
+ top: 2px;
2555
+ width: 167px;
2556
+ z-index: 1;
2557
+ }
2558
+ #spinner {
2559
+ visibility: hidden;
2560
+ width: 8px;
2561
+ height: 8px;
2562
+ left: 154px;
2563
+ pointer-events: none;
2564
+ position: absolute;
2565
+ top: 4px;
2566
+ z-index: 1;
2567
+
2568
+ border: 2px solid transparent;
2569
+ border-bottom: 2px solid rgba(0, 0, 0, 0.5);
2570
+ border-right: 2px solid rgba(0, 0, 0, 0.5);
2571
+ border-radius: 50%;
2572
+ }
2573
+ @keyframes spin { 100% { transform: rotate(360deg); } }
2574
+ </style>
2575
+
2576
+ <input id="filter" on-blur="filterBlur" on-focus="filterFocus" on-input="filterTextChanged" on-keydown="filterKeyDown" on-mouseup="filterMouseUp" type="text">
2577
+ <div id="spinner"></div>
2578
+ <tr-ui-b-toolbar-button on-click="findPrevious">
2579
+
2580
+ </tr-ui-b-toolbar-button>
2581
+ <tr-ui-b-toolbar-button on-click="findNext">
2582
+
2583
+ </tr-ui-b-toolbar-button>
2584
+ <div id="hitCount">0 of 0</div>
2585
+ </template>
2586
+ </dom-module><dom-module id="tr-ui-scripting-control">
2587
+ <template>
2588
+ <style>
2589
+ :host {
2590
+ flex: 1 1 auto;
2591
+ }
2592
+ .root {
2593
+ font-family: monospace;
2594
+ cursor: text;
2595
+
2596
+ padding: 2px;
2597
+ margin: 2px;
2598
+ border: 1px solid rgba(0, 0, 0, 0.5);
2599
+ background: white;
2600
+
2601
+ height: 100px;
2602
+ overflow-y: auto;
2603
+
2604
+ transition-property: opacity, height, padding, margin;
2605
+ transition-duration: .2s;
2606
+ transition-timing-function: ease-out;
2607
+ }
2608
+ .hidden {
2609
+ margin-top: 0px;
2610
+ margin-bottom: 0px;
2611
+ padding-top: 0px;
2612
+ padding-bottom: 0px;
2613
+ height: 0px;
2614
+ opacity: 0;
2615
+ }
2616
+ .focused {
2617
+ outline: auto 5px -webkit-focus-ring-color;
2618
+ }
2619
+ #history {
2620
+ -webkit-user-select: text;
2621
+ color: #777;
2622
+ }
2623
+ #promptContainer {
2624
+ display: flex;
2625
+ }
2626
+ #promptMark {
2627
+ width: 1em;
2628
+ color: #468;
2629
+ }
2630
+ #prompt {
2631
+ flex: 1;
2632
+ width: 100%;
2633
+ border: none !important;
2634
+ background-color: inherit !important;
2635
+ font: inherit !important;
2636
+ text-overflow: clip !important;
2637
+ text-decoration: none !important;
2638
+ }
2639
+ #prompt:focus {
2640
+ outline: none;
2641
+ }
2642
+ </style>
2643
+
2644
+ <div class="root hidden" id="root" on-focus="onConsoleFocus" tabindex="0">
2645
+ <div id="history"></div>
2646
+ <div id="promptContainer">
2647
+ <span id="promptMark">&gt;</span>
2648
+ <input id="prompt" on-blur="onConsoleBlur" on-keydown="promptKeyDown" on-keypress="promptKeyPress" type="text">
2649
+ </div>
2650
+ </div>
2651
+ </template>
2652
+ </dom-module><dom-module id="tr-ui-side-panel-container">
2653
+ <template>
2654
+ <style>
2655
+ :host {
2656
+ align-items: stretch;
2657
+ display: flex;
2658
+ background-color: white;
2659
+ }
2660
+
2661
+ :host([expanded]) > #side_panel_drag_handle,
2662
+ :host([expanded]) > active-panel-container {
2663
+ flex: 1 1 auto;
2664
+ border-left: 1px solid black;
2665
+ display: flex;
2666
+ }
2667
+
2668
+ :host(:not([expanded])) > #side_panel_drag_handle,
2669
+ :host(:not([expanded])) > active-panel-container {
2670
+ display: none;
2671
+ }
2672
+
2673
+ active-panel-container {
2674
+ display: flex;
2675
+ }
2676
+
2677
+ tab-strip {
2678
+ flex: 0 0 auto;
2679
+ flex-direction: column;
2680
+ -webkit-user-select: none;
2681
+ background-color: rgb(236, 236, 236);
2682
+ border-left: 1px solid black;
2683
+ cursor: default;
2684
+ display: flex;
2685
+ min-width: 18px; /* workaround for flexbox and writing-mode mixing bug */
2686
+ padding: 10px 0 10px 0;
2687
+ font-size: 12px;
2688
+ }
2689
+
2690
+ tab-strip > tab-strip-label {
2691
+ flex-shrink: 0;
2692
+ -webkit-writing-mode: vertical-rl;
2693
+ white-space: nowrap;
2694
+ display: inline;
2695
+ margin-right: 1px;
2696
+ min-height: 20px;
2697
+ padding: 15px 3px 15px 1px;
2698
+ }
2699
+
2700
+ tab-strip >
2701
+ tab-strip-label:not([enabled]) {
2702
+ color: rgb(128, 128, 128);
2703
+ }
2704
+
2705
+ tab-strip > tab-strip-label[selected] {
2706
+ background-color: white;
2707
+ border: 1px solid rgb(163, 163, 163);
2708
+ border-left: none;
2709
+ padding: 14px 2px 14px 1px;
2710
+ }
2711
+
2712
+ #active_panel_container {
2713
+ overflow: auto;
2714
+ }
2715
+ </style>
2716
+
2717
+ <tr-ui-b-drag-handle id="side_panel_drag_handle"></tr-ui-b-drag-handle>
2718
+ <active-panel-container id="active_panel_container">
2719
+ </active-panel-container>
2720
+ <tab-strip id="tab_strip"></tab-strip>
2721
+ </template>
2722
+ </dom-module><dom-module id="tr-ui-timeline-view-help-overlay">
2723
+ <template>
2724
+ <style>
2725
+ :host {
2726
+ flex: 1 1 auto;
2727
+ flex-direction: row;
2728
+ display: flex;
2729
+ width: 700px;
2730
+ }
2731
+ .column {
2732
+ width: 50%;
2733
+ }
2734
+ h2 {
2735
+ font-size: 1.2em;
2736
+ margin: 0;
2737
+ margin-top: 5px;
2738
+ text-align: center;
2739
+ }
2740
+ h3 {
2741
+ margin: 0;
2742
+ margin-left: 126px;
2743
+ margin-top: 10px;
2744
+ }
2745
+ .pair {
2746
+ flex: 1 1 auto;
2747
+ flex-direction: row;
2748
+ display: flex;
2749
+ }
2750
+ .command {
2751
+ font-family: monospace;
2752
+ margin-right: 5px;
2753
+ text-align: right;
2754
+ width: 150px;
2755
+ }
2756
+ .action {
2757
+ font-size: 0.9em;
2758
+ text-align: left;
2759
+ width: 200px;
2760
+ }
2761
+ tr-ui-b-mouse-mode-icon {
2762
+ border: 1px solid #888;
2763
+ border-radius: 3px;
2764
+ box-shadow: inset 0 0 2px rgba(0,0,0,0.3);
2765
+ display: inline-block;
2766
+ margin-right: 1px;
2767
+ position: relative;
2768
+ top: 4px;
2769
+ }
2770
+ .mouse-mode-icon.pan-mode {
2771
+ background-position: -1px -11px;
2772
+ }
2773
+ .mouse-mode-icon.select-mode {
2774
+ background-position: -1px -41px;
2775
+ }
2776
+ .mouse-mode-icon.zoom-mode {
2777
+ background-position: -1px -71px;
2778
+ }
2779
+ .mouse-mode-icon.timing-mode {
2780
+ background-position: -1px -101px;
2781
+ }
2782
+ </style>
2783
+ <div class="column left">
2784
+ <h2>Navigation</h2>
2785
+ <div class="pair">
2786
+ <div class="command">w/s</div>
2787
+ <div class="action">Zoom in/out (+shift: faster)</div>
2788
+ </div>
2789
+
2790
+ <div class="pair">
2791
+ <div class="command">a/d</div>
2792
+ <div class="action">Pan left/right (+shift: faster)</div>
2793
+ </div>
2794
+
2795
+ <div class="pair">
2796
+ <div class="command">→/shift-TAB</div>
2797
+ <div class="action">Select previous event</div>
2798
+ </div>
2799
+
2800
+ <div class="pair">
2801
+ <div class="command">←/TAB</div>
2802
+ <div class="action">Select next event</div>
2803
+ </div>
2804
+
2805
+ <h2>Mouse Controls</h2>
2806
+ <div class="pair">
2807
+ <div class="command">click</div>
2808
+ <div class="action">Select event</div>
2809
+ </div>
2810
+ <div class="pair">
2811
+ <div class="command">alt-mousewheel</div>
2812
+ <div class="action">Zoom in/out</div>
2813
+ </div>
2814
+
2815
+ <h3>
2816
+ <tr-ui-b-mouse-mode-icon mode-name="SELECTION"></tr-ui-b-mouse-mode-icon>
2817
+ Select mode
2818
+ </h3>
2819
+ <div class="pair">
2820
+ <div class="command">drag</div>
2821
+ <div class="action">Box select</div>
2822
+ </div>
2823
+
2824
+ <div class="pair">
2825
+ <div class="command"><span class="mod"></span>-click/drag</div>
2826
+ <div class="action">Add events to the current selection</div>
2827
+ </div>
2828
+
2829
+ <div class="pair">
2830
+ <div class="command">double click</div>
2831
+ <div class="action">Select all events with same title</div>
2832
+ </div>
2833
+
2834
+ <h3>
2835
+ <tr-ui-b-mouse-mode-icon mode-name="PANSCAN"></tr-ui-b-mouse-mode-icon>
2836
+ Pan mode
2837
+ </h3>
2838
+ <div class="pair">
2839
+ <div class="command">drag</div>
2840
+ <div class="action">Pan the view</div>
2841
+ </div>
2842
+
2843
+ <h3>
2844
+ <tr-ui-b-mouse-mode-icon mode-name="ZOOM"></tr-ui-b-mouse-mode-icon>
2845
+ Zoom mode
2846
+ </h3>
2847
+ <div class="pair">
2848
+ <div class="command">drag</div>
2849
+ <div class="action">Zoom in/out by dragging up/down</div>
2850
+ </div>
2851
+
2852
+ <h3>
2853
+ <tr-ui-b-mouse-mode-icon mode-name="TIMING"></tr-ui-b-mouse-mode-icon>
2854
+ Timing mode
2855
+ </h3>
2856
+ <div class="pair">
2857
+ <div class="command">drag</div>
2858
+ <div class="action">Create or move markers</div>
2859
+ </div>
2860
+
2861
+ <div class="pair">
2862
+ <div class="command">double click</div>
2863
+ <div class="action">Set marker range to slice</div>
2864
+ </div>
2865
+ </div>
2866
+
2867
+ <div class="column right">
2868
+ <h2>General</h2>
2869
+ <div class="pair">
2870
+ <div class="command">1-4</div>
2871
+ <div class="action">Switch mouse mode</div>
2872
+ </div>
2873
+
2874
+ <div class="pair">
2875
+ <div class="command">shift</div>
2876
+ <div class="action">Hold for temporary select</div>
2877
+ </div>
2878
+
2879
+ <div class="pair">
2880
+ <div class="command">space</div>
2881
+ <div class="action">Hold for temporary pan</div>
2882
+ </div>
2883
+
2884
+ <div class="pair">
2885
+ <div class="command">/</div>
2886
+ <div class="action">Search</div>
2887
+ </div>
2888
+
2889
+ <div class="pair">
2890
+ <div class="command">enter</div>
2891
+ <div class="action">Step through search results</div>
2892
+ </div>
2893
+
2894
+ <div class="pair">
2895
+ <div class="command">f</div>
2896
+ <div class="action">Zoom into selection</div>
2897
+ </div>
2898
+
2899
+ <div class="pair">
2900
+ <div class="command">z/0</div>
2901
+ <div class="action">Reset zoom and pan</div>
2902
+ </div>
2903
+
2904
+ <div class="pair">
2905
+ <div class="command">g/G</div>
2906
+ <div class="action">Toggle 60hz grid</div>
2907
+ </div>
2908
+
2909
+ <div class="pair">
2910
+ <div class="command">v</div>
2911
+ <div class="action">Highlight VSync</div>
2912
+ </div>
2913
+
2914
+ <div class="pair">
2915
+ <div class="command">h</div>
2916
+ <div class="action">Toggle low/high details</div>
2917
+ </div>
2918
+
2919
+ <div class="pair">
2920
+ <div class="command">m</div>
2921
+ <div class="action">Mark current selection</div>
2922
+ </div>
2923
+
2924
+ <div class="pair">
2925
+ <div class="command">p</div>
2926
+ <div class="action">Select power samples over current selection interval</div>
2927
+ </div>
2928
+
2929
+ <div class="pair">
2930
+ <div class="command">`</div>
2931
+ <div class="action">Show or hide the scripting console</div>
2932
+ </div>
2933
+
2934
+ <div class="pair">
2935
+ <div class="command">?</div>
2936
+ <div class="action">Show help</div>
2937
+ </div>
2938
+ </div>
2939
+ </template>
2940
+ </dom-module><dom-module id="tr-ui-timeline-view-metadata-overlay">
2941
+ <template>
2942
+ <style>
2943
+ :host {
2944
+ width: 700px;
2945
+
2946
+ overflow: auto;
2947
+ }
2948
+ </style>
2949
+ <tr-ui-b-table id="table"></tr-ui-b-table>
2950
+ </template>
2951
+ </dom-module><dom-module id="tr-ui-timeline-view">
2952
+ <template>
2953
+ <style>
2954
+ :host {
2955
+ flex-direction: column;
2956
+ cursor: default;
2957
+ display: flex;
2958
+ font-family: sans-serif;
2959
+ padding: 0;
2960
+ }
2961
+
2962
+ #control {
2963
+ background-color: #e6e6e6;
2964
+ background-image: -webkit-gradient(linear, 0 0, 0 100%,
2965
+ from(#E5E5E5), to(#D1D1D1));
2966
+ flex: 0 0 auto;
2967
+ overflow-x: auto;
2968
+ }
2969
+
2970
+ #control::-webkit-scrollbar { height: 0px; }
2971
+
2972
+ #control > #bar {
2973
+ font-size: 12px;
2974
+ display: flex;
2975
+ flex-direction: row;
2976
+ margin: 1px;
2977
+ }
2978
+
2979
+ #control > #bar > #title {
2980
+ display: flex;
2981
+ align-items: center;
2982
+ padding-left: 8px;
2983
+ padding-right: 8px;
2984
+ flex: 1 1 auto;
2985
+ overflow: hidden;
2986
+ white-space: nowrap;
2987
+ }
2988
+
2989
+ #control > #bar > #left_controls,
2990
+ #control > #bar > #right_controls {
2991
+ display: flex;
2992
+ flex-direction: row;
2993
+ align-items: stretch;
2994
+ flex-shrink: 0;
2995
+ }
2996
+
2997
+ #control > #bar > #left_controls > * { margin-right: 2px; }
2998
+ #control > #bar > #right_controls > * { margin-left: 2px; }
2999
+ #control > #collapsing_controls { display: flex; }
3000
+
3001
+ middle-container {
3002
+ flex: 1 1 auto;
3003
+ flex-direction: row;
3004
+ border-bottom: 1px solid #8e8e8e;
3005
+ display: flex;
3006
+ min-height: 0;
3007
+ }
3008
+
3009
+ middle-container ::content track-view-container {
3010
+ flex: 1 1 auto;
3011
+ display: flex;
3012
+ min-height: 0;
3013
+ min-width: 0;
3014
+ overflow-x: hidden;
3015
+ }
3016
+
3017
+ middle-container ::content track-view-container > * { flex: 1 1 auto; }
3018
+ middle-container > x-timeline-view-side-panel-container { flex: 0 0 auto; }
3019
+ tr-ui-b-drag-handle { flex: 0 0 auto; }
3020
+ tr-ui-a-analysis-view { flex: 0 0 auto; }
3021
+
3022
+ tr-ui-b-dropdown {
3023
+ --dropdown-button: {
3024
+ -webkit-appearance: none;
3025
+ align-items: normal;
3026
+ background-color: rgb(248, 248, 248);
3027
+ border: 1px solid rgba(0, 0, 0, 0.5);
3028
+ box-sizing: content-box;
3029
+ color: rgba(0, 0, 0, 0.8);
3030
+ font-family: sans-serif;
3031
+ font-size: 12px;
3032
+ padding: 2px 5px;
3033
+ }
3034
+ }
3035
+ </style>
3036
+
3037
+ <tv-ui-b-hotkey-controller id="hkc"></tv-ui-b-hotkey-controller>
3038
+ <div id="control">
3039
+ <div id="bar">
3040
+ <div id="left_controls"></div>
3041
+ <div id="title">
3042
+ ^_^
3043
+ <div style="padding-left: 3em">
3044
+ Try the new <a href="https://ui.perfetto.dev">Perfetto UI</a>!
3045
+ <a href="https://chromium.googlesource.com/catapult/+/refs/heads/main/tracing/docs/perfetto.md">Learn more</a>
3046
+ </div>
3047
+ </div>
3048
+ <div id="right_controls">
3049
+ <tr-ui-b-dropdown id="flow_event_filter_dropdown" label="Flow events"></tr-ui-b-dropdown>
3050
+ <tr-ui-b-dropdown id="process_filter_dropdown" label="Processes"></tr-ui-b-dropdown>
3051
+ <tr-ui-b-toolbar-button id="view_metadata_button">
3052
+ M
3053
+ </tr-ui-b-toolbar-button>
3054
+ <tr-ui-b-dropdown id="view_options_dropdown" label="View Options"></tr-ui-b-dropdown>
3055
+ <tr-ui-find-control id="view_find_control"></tr-ui-find-control>
3056
+ <tr-ui-b-toolbar-button id="view_console_button">
3057
+ »
3058
+ </tr-ui-b-toolbar-button>
3059
+ <tr-ui-b-toolbar-button id="view_help_button">
3060
+ ?
3061
+ </tr-ui-b-toolbar-button>
3062
+ </div>
3063
+ </div>
3064
+ <div id="collapsing_controls"></div>
3065
+ <tr-ui-b-info-bar-group id="import-warnings">
3066
+ </tr-ui-b-info-bar-group>
3067
+ </div>
3068
+ <middle-container>
3069
+ <slot></slot>
3070
+
3071
+ <tr-ui-side-panel-container id="side_panel_container">
3072
+ </tr-ui-side-panel-container>
3073
+ </middle-container>
3074
+ <tr-ui-b-drag-handle id="drag_handle"></tr-ui-b-drag-handle>
3075
+ <tr-ui-a-analysis-view id="analysis"></tr-ui-a-analysis-view>
3076
+
3077
+ <tr-v-ui-preferred-display-unit id="display_unit">
3078
+ </tr-v-ui-preferred-display-unit>
3079
+ </template>
3080
+ </dom-module><dom-module id="tr-ui-b-grouping-table">
3081
+ <template>
3082
+ <style>
3083
+ :host {
3084
+ display: flex;
3085
+ }
3086
+ #table {
3087
+ flex: 1 1 auto;
3088
+ font-size: 12px;
3089
+ }
3090
+ </style>
3091
+ <tr-ui-b-table id="table"></tr-ui-b-table>
3092
+ </template>
3093
+ </dom-module><dom-module id="tr-ui-b-grouping-table-groupby-picker">
3094
+ <template>
3095
+ <style>
3096
+ #container {
3097
+ display: flex;
3098
+ }
3099
+ #container *:not(:first-child) {
3100
+ padding-left: 3px;
3101
+ border-left: 1px solid black;
3102
+ margin-left: 3px;
3103
+ }
3104
+ </style>
3105
+
3106
+ <div id="container"></div>
3107
+ </template>
3108
+ </dom-module><dom-module id="tr-ui-b-grouping-table-groupby-picker-group">
3109
+ <template>
3110
+ <style>
3111
+ :host {
3112
+ white-space: nowrap;
3113
+ }
3114
+ #left, #right {
3115
+ user-select: none;
3116
+ cursor: pointer;
3117
+ }
3118
+ </style>
3119
+
3120
+ <span id="left" on-click="moveLeft_">◀</span>
3121
+ <input id="enabled" on-change="onEnableChanged_" type="checkbox">
3122
+ <label for="enabled" id="label"></label>
3123
+ <span id="right" on-click="moveRight_">▶</span>
3124
+ </template>
3125
+ </dom-module><dom-module id="tr-ui-sp-file-size-stats-side-panel">
3126
+ <template>
3127
+ <style>
3128
+ :host {
3129
+ display: flex;
3130
+ flex-direction: column;
3131
+ }
3132
+ toolbar {
3133
+ align-items: center;
3134
+ background-color: rgb(236, 236, 236);
3135
+ border-bottom: 1px solid #8e8e8e;
3136
+ display: flex;
3137
+ flex-direction: row;
3138
+ flex-direction: row;
3139
+ flex: 0 0 auto;
3140
+ font-size: 12px;
3141
+ padding: 0 10px 0 10px;
3142
+ }
3143
+ table-container {
3144
+ display: flex;
3145
+ min-height: 0px;
3146
+ overflow-y: auto;
3147
+ }
3148
+ </style>
3149
+
3150
+ <toolbar>
3151
+ <span><b>Group by:</b></span>
3152
+ <tr-ui-b-grouping-table-groupby-picker id="picker">
3153
+ </tr-ui-b-grouping-table-groupby-picker>
3154
+ </toolbar>
3155
+ <table-container>
3156
+ <tr-ui-b-grouping-table id="table"></tr-ui-b-grouping-table>
3157
+ </table-container>
3158
+ </template>
3159
+ </dom-module><dom-module id="tr-v-ui-histogram-set-controls-export">
3160
+ <template>
3161
+ <style>
3162
+ :host {
3163
+ display: grid;
3164
+ grid-gap: 1em;
3165
+ grid-template-rows: auto auto;
3166
+ grid-template-columns: auto auto;
3167
+ }
3168
+ button {
3169
+ -webkit-appearance: none;
3170
+ border: 0;
3171
+ font-size: initial;
3172
+ padding: 5px;
3173
+ }
3174
+ </style>
3175
+
3176
+ <button on-tap="exportRawCsv_">raw CSV</button>
3177
+ <button on-tap="exportRawJson_">raw JSON</button>
3178
+ <button on-tap="exportMergedCsv_">merged CSV</button>
3179
+ <button on-tap="exportMergedJson_">merged JSON</button>
3180
+ </template>
3181
+ </dom-module><dom-module id="tr-v-ui-histogram-set-controls">
3182
+ <template>
3183
+ <style>
3184
+ :host {
3185
+ display: block;
3186
+ }
3187
+
3188
+ #help, #feedback {
3189
+ display: none;
3190
+ margin-left: 20px;
3191
+ }
3192
+
3193
+ #search_container {
3194
+ display: inline-flex;
3195
+ margin-right: 20px;
3196
+ padding-bottom: 1px;
3197
+ border-bottom: 1px solid darkgrey;
3198
+ }
3199
+
3200
+ #search {
3201
+ border: 0;
3202
+ max-width: 20em;
3203
+ outline: none;
3204
+ }
3205
+
3206
+ #clear_search {
3207
+ visibility: hidden;
3208
+ height: 1em;
3209
+ stroke: black;
3210
+ stroke-width: 16;
3211
+ }
3212
+
3213
+ #controls {
3214
+ white-space: nowrap;
3215
+ }
3216
+
3217
+ #show_overview, #hide_overview {
3218
+ height: 1em;
3219
+ margin-right: 20px;
3220
+ }
3221
+
3222
+ #show_overview {
3223
+ stroke: blue;
3224
+ stroke-width: 16;
3225
+ }
3226
+
3227
+ #show_overview:hover {
3228
+ background: blue;
3229
+ stroke: white;
3230
+ }
3231
+
3232
+ #hide_overview {
3233
+ display: none;
3234
+ stroke-width: 18;
3235
+ stroke: black;
3236
+ }
3237
+
3238
+ #hide_overview:hover {
3239
+ background: black;
3240
+ stroke: white;
3241
+ }
3242
+
3243
+ #reference_display_label {
3244
+ display: none;
3245
+ margin-right: 20px;
3246
+ }
3247
+
3248
+ #alpha, #alpha_slider_container {
3249
+ display: none;
3250
+ }
3251
+
3252
+ #alpha {
3253
+ margin-right: 20px;
3254
+ }
3255
+
3256
+ #alpha_slider_container {
3257
+ background: white;
3258
+ border: 1px solid black;
3259
+ flex-direction: column;
3260
+ padding: 0.5em;
3261
+ position: absolute;
3262
+ z-index: 10; /* scalar-span uses z-index :-( */
3263
+ }
3264
+
3265
+ #alpha_slider {
3266
+ -webkit-appearance: slider-vertical;
3267
+ align-self: center;
3268
+ height: 200px;
3269
+ width: 30px;
3270
+ }
3271
+
3272
+ #statistic {
3273
+ display: none;
3274
+ margin-right: 20px;
3275
+ }
3276
+
3277
+ #export {
3278
+ margin-right: 20px;
3279
+ }
3280
+ </style>
3281
+
3282
+ <div id="controls">
3283
+ <span id="search_container">
3284
+ <input id="search" placeholder="Find Histogram name" value="{{searchQuery::keyup}}">
3285
+ <svg id="clear_search" on-tap="clearSearch_" viewbox="0 0 128 128">
3286
+ <g>
3287
+ <title>Clear search</title>
3288
+ <line x1="28" x2="100" y1="28" y2="100"></line>
3289
+ <line x1="28" x2="100" y1="100" y2="28"></line>
3290
+ </g>
3291
+ </svg>
3292
+ </span>
3293
+
3294
+ <svg id="show_overview" on-tap="toggleOverviewLineCharts_" viewbox="0 0 128 128">
3295
+ <g>
3296
+ <title>Show overview charts</title>
3297
+ <line x1="19" x2="49" y1="109" y2="49"></line>
3298
+ <line x1="49" x2="79" y1="49" y2="79"></line>
3299
+ <line x1="79" x2="109" y1="79" y2="19"></line>
3300
+ </g>
3301
+ </svg>
3302
+ <svg id="hide_overview" on-tap="toggleOverviewLineCharts_" viewbox="0 0 128 128">
3303
+ <g>
3304
+ <title>Hide overview charts</title>
3305
+ <line x1="28" x2="100" y1="28" y2="100"></line>
3306
+ <line x1="28" x2="100" y1="100" y2="28"></line>
3307
+ </g>
3308
+ </svg>
3309
+
3310
+ <select id="reference_display_label" value="{{referenceDisplayLabel::change}}">
3311
+ <option value="">Select a reference column</option>
3312
+ </select>
3313
+
3314
+ <button id="alpha" on-tap="openAlphaSlider_">α=[[alphaString]]</button>
3315
+ <div id="alpha_slider_container">
3316
+ <input id="alpha_slider" max="18" min="0" on-blur="closeAlphaSlider_" on-input="updateAlpha_" type="range" value="{{alphaIndex::change}}">
3317
+ </div>
3318
+
3319
+ <select id="statistic" value="{{displayStatisticName::change}}">
3320
+ </select>
3321
+
3322
+ <tr-ui-b-dropdown label="Export">
3323
+ <tr-v-ui-histogram-set-controls-export>
3324
+ </tr-v-ui-histogram-set-controls-export>
3325
+ </tr-ui-b-dropdown>
3326
+
3327
+ <input checked="{{showAll::change}}" id="show_all" title="When unchecked, less important histograms are hidden." type="checkbox">
3328
+ <label for="show_all" title="When unchecked, less important histograms are hidden.">Show all</label>
3329
+
3330
+ <a id="help">Help</a>
3331
+ <a id="feedback">Feedback</a>
3332
+ </div>
3333
+
3334
+ <tr-ui-b-grouping-table-groupby-picker id="picker">
3335
+ </tr-ui-b-grouping-table-groupby-picker>
3336
+ </template>
3337
+ </dom-module><dom-module id="tr-v-ui-histogram-set-table-cell">
3338
+ <template>
3339
+ <style>
3340
+ #histogram_container {
3341
+ display: flex;
3342
+ flex-direction: row;
3343
+ }
3344
+
3345
+ #missing, #empty, #unmergeable, #scalar {
3346
+ flex-grow: 1;
3347
+ }
3348
+
3349
+ #open_histogram, #close_histogram, #open_histogram svg, #close_histogram svg {
3350
+ height: 1em;
3351
+ }
3352
+
3353
+ #open_histogram svg {
3354
+ margin-left: 4px;
3355
+ stroke-width: 0;
3356
+ stroke: blue;
3357
+ fill: blue;
3358
+ }
3359
+ :host(:hover) #open_histogram svg {
3360
+ background: blue;
3361
+ stroke: white;
3362
+ fill: white;
3363
+ }
3364
+
3365
+ #scalar {
3366
+ flex-grow: 1;
3367
+ white-space: nowrap;
3368
+ }
3369
+
3370
+ #histogram {
3371
+ flex-grow: 1;
3372
+ }
3373
+
3374
+ #close_histogram svg line {
3375
+ stroke-width: 18;
3376
+ stroke: black;
3377
+ }
3378
+ #close_histogram:hover svg {
3379
+ background: black;
3380
+ }
3381
+ #close_histogram:hover svg line {
3382
+ stroke: white;
3383
+ }
3384
+
3385
+ #overview_container {
3386
+ display: none;
3387
+ }
3388
+ </style>
3389
+
3390
+ <div id="histogram_container">
3391
+ <span id="missing">(missing)</span>
3392
+ <span id="empty">(empty)</span>
3393
+ <span id="unmergeable">(unmergeable)</span>
3394
+
3395
+ <tr-v-ui-scalar-span id="scalar" on-click="openHistogram_"></tr-v-ui-scalar-span>
3396
+
3397
+ <span id="open_histogram" on-click="openHistogram_">
3398
+ <svg viewbox="0 0 128 128">
3399
+ <rect height="16" width="32" x="16" y="24"></rect>
3400
+ <rect height="16" width="96" x="16" y="56"></rect>
3401
+ <rect height="16" width="64" x="16" y="88"></rect>
3402
+ </svg>
3403
+ </span>
3404
+
3405
+ <span id="histogram"></span>
3406
+
3407
+ <span id="close_histogram" on-click="closeHistogram_">
3408
+ <svg viewbox="0 0 128 128">
3409
+ <line x1="28" x2="100" y1="28" y2="100"></line>
3410
+ <line x1="28" x2="100" y1="100" y2="28"></line>
3411
+ </svg>
3412
+ </span>
3413
+ </div>
3414
+
3415
+ <div id="overview_container">
3416
+ </div>
3417
+ </template>
3418
+ </dom-module><dom-module id="tr-v-ui-histogram-set-table-name-cell">
3419
+ <template>
3420
+ <style>
3421
+ #name_container {
3422
+ display: flex;
3423
+ }
3424
+
3425
+ #name {
3426
+ overflow: hidden;
3427
+ white-space: nowrap;
3428
+ text-overflow: ellipsis;
3429
+ }
3430
+
3431
+ #show_overview, #hide_overview, #show_overview svg, #hide_overview svg {
3432
+ height: 1em;
3433
+ margin-left: 5px;
3434
+ }
3435
+
3436
+ #show_overview svg {
3437
+ stroke: blue;
3438
+ stroke-width: 16;
3439
+ }
3440
+
3441
+ #show_overview:hover svg {
3442
+ background: blue;
3443
+ stroke: white;
3444
+ }
3445
+
3446
+ #hide_overview {
3447
+ display: none;
3448
+ }
3449
+
3450
+ #hide_overview svg {
3451
+ stroke-width: 18;
3452
+ stroke: black;
3453
+ }
3454
+
3455
+ #hide_overview:hover svg {
3456
+ background: black;
3457
+ stroke: white;
3458
+ }
3459
+
3460
+ #open_histograms, #close_histograms, #open_histograms svg, #close_histograms svg {
3461
+ height: 1em;
3462
+ }
3463
+
3464
+ #close_histograms {
3465
+ display: none;
3466
+ }
3467
+
3468
+ #open_histograms svg {
3469
+ margin-left: 4px;
3470
+ stroke-width: 0;
3471
+ stroke: blue;
3472
+ fill: blue;
3473
+ }
3474
+ #open_histograms:hover svg {
3475
+ background: blue;
3476
+ stroke: white;
3477
+ fill: white;
3478
+ }
3479
+
3480
+ #close_histograms line {
3481
+ stroke-width: 18;
3482
+ stroke: black;
3483
+ }
3484
+ #close_histograms:hover {
3485
+ background: black;
3486
+ }
3487
+ #close_histograms:hover line {
3488
+ stroke: white;
3489
+ }
3490
+
3491
+ #overview_container {
3492
+ display: none;
3493
+ }
3494
+ </style>
3495
+
3496
+ <div id="name_container">
3497
+ <span id="name"></span>
3498
+
3499
+ <span id="show_overview" on-click="showOverview_">
3500
+ <svg viewbox="0 0 128 128">
3501
+ <line x1="19" x2="49" y1="109" y2="49"></line>
3502
+ <line x1="49" x2="79" y1="49" y2="79"></line>
3503
+ <line x1="79" x2="109" y1="79" y2="19"></line>
3504
+ </svg>
3505
+ </span>
3506
+
3507
+ <span id="hide_overview" on-click="hideOverview_">
3508
+ <svg viewbox="0 0 128 128">
3509
+ <line x1="28" x2="100" y1="28" y2="100"></line>
3510
+ <line x1="28" x2="100" y1="100" y2="28"></line>
3511
+ </svg>
3512
+ </span>
3513
+
3514
+ <span id="open_histograms" on-click="openHistograms_">
3515
+ <svg viewbox="0 0 128 128">
3516
+ <rect height="16" width="32" x="16" y="24"></rect>
3517
+ <rect height="16" width="96" x="16" y="56"></rect>
3518
+ <rect height="16" width="64" x="16" y="88"></rect>
3519
+ </svg>
3520
+ </span>
3521
+
3522
+ <span id="close_histograms" on-click="closeHistograms_">
3523
+ <svg viewbox="0 0 128 128">
3524
+ <line x1="28" x2="100" y1="28" y2="100"></line>
3525
+ <line x1="28" x2="100" y1="100" y2="28"></line>
3526
+ </svg>
3527
+ </span>
3528
+ </div>
3529
+
3530
+ <div id="overview_container">
3531
+ </div>
3532
+ </template>
3533
+ </dom-module><dom-module id="tr-v-ui-histogram-set-table">
3534
+ <template>
3535
+ <style>
3536
+ :host {
3537
+ min-height: 0px;
3538
+ overflow: auto;
3539
+ }
3540
+ #table {
3541
+ margin-top: 5px;
3542
+ }
3543
+ </style>
3544
+
3545
+ <tr-ui-b-table id="table">
3546
+ </tr-ui-b-table></template>
3547
+ </dom-module><dom-module id="tr-v-ui-histogram-set-view">
3548
+ <template>
3549
+ <style>
3550
+ :host {
3551
+ font-family: sans-serif;
3552
+ }
3553
+
3554
+ #zero {
3555
+ color: red;
3556
+ /* histogram-set-table is used by both metrics-side-panel and results.html.
3557
+ * This font-size rule has no effect in results.html, but improves
3558
+ * legibility in the metrics-side-panel, which sets font-size in order to
3559
+ * make this table denser.
3560
+ */
3561
+ font-size: initial;
3562
+ }
3563
+
3564
+ #container {
3565
+ display: none;
3566
+ }
3567
+
3568
+ </style>
3569
+
3570
+ <div id="zero">zero Histograms</div>
3571
+
3572
+ <div id="container">
3573
+ <tr-v-ui-histogram-set-controls id="controls">
3574
+ </tr-v-ui-histogram-set-controls>
3575
+
3576
+ <tr-v-ui-histogram-set-table id="table"></tr-v-ui-histogram-set-table>
3577
+ </div>
3578
+ </template>
3579
+ </dom-module><dom-module id="tr-ui-sp-metrics-side-panel">
3580
+ <template>
3581
+ <style>
3582
+ :host {
3583
+ display: flex;
3584
+ flex-direction: column;
3585
+ }
3586
+ div#error {
3587
+ color: red;
3588
+ }
3589
+ #results {
3590
+ font-size: 12px;
3591
+ }
3592
+ </style>
3593
+
3594
+ <top-left-controls id="top_left_controls"></top-left-controls>
3595
+
3596
+ <tr-v-ui-histogram-set-view id="results"></tr-v-ui-histogram-set-view>
3597
+
3598
+ <div id="error"></div>
3599
+ </template>
3600
+ </dom-module><dom-module id="tr-ui-e-s-alerts-side-panel">
3601
+ <template>
3602
+ <style>
3603
+ :host {
3604
+ display: block;
3605
+ width: 250px;
3606
+ }
3607
+ #content {
3608
+ flex-direction: column;
3609
+ display: flex;
3610
+ }
3611
+ tr-ui-b-table {
3612
+ font-size: 12px;
3613
+ }
3614
+ </style>
3615
+
3616
+ <div id="content">
3617
+ <toolbar id="toolbar"></toolbar>
3618
+ <result-area id="result_area"></result-area>
3619
+ </div>
3620
+ </template>
3621
+ </dom-module><div class="no-webcomponents-container hidden">
3622
+ <div class="contents">
3623
+ <div class="title">The trace viewer is currently unavailable.</div>
3624
+ <p>
3625
+ For more details, see
3626
+ <a href="https://github.com/tensorflow/tensorboard/issues/3209" rel="noopener" target="_blank">this issue</a>.
3627
+ </p>
3628
+ <br>
3629
+ <br>
3630
+ <p>
3631
+ If you are running a Chromium-based browser, one workaround is to download
3632
+ your data as JSON and load it in your browser's viewer at
3633
+ "about://tracing". This run's data can be found here:
3634
+ </p>
3635
+ </div>
3636
+ </div><style>
3637
+ /* Tooltip text */
3638
+ .tooltip .tooltiptext {
3639
+ visibility: hidden;
3640
+ background-color: white;
3641
+ color: black;
3642
+ font-weight: normal;
3643
+ text-align: center;
3644
+ padding: 5px;
3645
+ text-align: left;
3646
+
3647
+ /* Position the tooltip text */
3648
+ position: absolute;
3649
+ z-index: 1000;
3650
+ top: 56px;
3651
+
3652
+ /* Fade in tooltip */
3653
+ opacity: 0;
3654
+ transition: opacity 0.3s;
3655
+ }
3656
+
3657
+ /* Show the tooltip text when you mouse over the tooltip container */
3658
+ .tooltip:hover .tooltiptext {
3659
+ visibility: visible;
3660
+ opacity: 0.9;
3661
+ }
3662
+
3663
+ tr-ui-timeline-view {
3664
+ position: absolute;
3665
+ width: 100%;
3666
+ height: 100%;
3667
+ }
3668
+ /* The "throbber": a spinning loading indicator */
3669
+ #throbber-initial,
3670
+ #throbber {
3671
+ /* Position: top right of the page, non-blocking to the trace events exploration */
3672
+ position: fixed;
3673
+ top: 10%;
3674
+ right: 3%;
3675
+ border: 14px solid #424242;
3676
+ border-radius: 50%;
3677
+ border-top: 14px solid #e6e6e6; /* control bar background color */
3678
+ width: 40px;
3679
+ height: 40px;
3680
+ -webkit-animation: spin 1s linear infinite; /* Safari */
3681
+ animation: spin 1s linear infinite;
3682
+ z-index: 10;
3683
+ /* Hide the throbber when it's inactive */
3684
+ opacity: 0;
3685
+ }
3686
+
3687
+ @keyframes spin {
3688
+ 0% { transform: rotate(0deg); }
3689
+ 100% { transform: rotate(360deg); }
3690
+ }
3691
+ #throbber-initial.active,
3692
+ #throbber.active {
3693
+ opacity: 0.8;
3694
+ /* Wait a short time before showing the throbber (no delay for hiding). */
3695
+ transition-delay: 0.3s;
3696
+ }
3697
+
3698
+ #throbber-initial {
3699
+ /* Put intial loading throbber on page center for better visibility */
3700
+ top: 20%;
3701
+ left: 50%;
3702
+ margin-left: -128px;
3703
+ width: 64px;
3704
+ height: 64px;
3705
+ border: 14px solid #fafafa;
3706
+ border-radius: 50%;
3707
+ border-top: 14px solid #e6e6e6; /* control bar background color */
3708
+ }
3709
+ #wait-msg {
3710
+ display: none;
3711
+ justify-content: center;
3712
+ align-items: center;
3713
+ min-height: 100vh;
3714
+ font-size: 20px;
3715
+ z-index: 11;
3716
+ }
3717
+
3718
+ .x-axis-track {
3719
+ height: 24px;
3720
+ }
3721
+ #control.tr-ui-timeline-view {
3722
+ align-content: center;
3723
+ align-items: center;
3724
+ min-height: 30px;
3725
+ background-image: unset;
3726
+ background-color: white;
3727
+ border-bottom: 1px solid #dadce0;
3728
+ border-top: 1px solid #dadce0;
3729
+ }
3730
+ #bar.tr-ui-timeline-view {
3731
+ align-items: center;
3732
+ }
3733
+ #view_console_button.right-controls-button,
3734
+ #backend_toggle_button,
3735
+ #button.right-controls-button,
3736
+ #expand_all_button,
3737
+ #collapse_all_button{
3738
+ height: 36px;
3739
+ background-color: #f8f8f8;
3740
+ border: #f8f8f8 solid 0.5px;
3741
+ margin-left: 2px;
3742
+ align-items: center;
3743
+ padding-left: 5px;
3744
+ padding-right: 5px;
3745
+ }
3746
+ #backend_toggle_button {
3747
+ color: #3f51b5;
3748
+ font-weight: bold;
3749
+ }
3750
+ #view_console_button.right-controls-button:hover,
3751
+ #button.right-controls-button:hover {
3752
+ background-color: white;
3753
+ border: #dadce0 solid 0.5px;
3754
+ }
3755
+ #expand_collapse_all_text_bar {
3756
+ height: 36px;
3757
+ margin-left: 2px;
3758
+ align-items: center;
3759
+ text-align: center;
3760
+ padding-left: 25px;
3761
+ padding-right: 5px;
3762
+ padding-top: 2px;
3763
+ display: flex;
3764
+ justify-content: center;
3765
+ font-size: 14px;
3766
+ }
3767
+ #dialog.right-controls-dialog {
3768
+ padding:0px;
3769
+ min-width:150px;
3770
+ border:none;
3771
+ border-radius:5px;
3772
+ }
3773
+ #view_find_control {
3774
+ height: fit-content;
3775
+ padding: 2px;
3776
+ }
3777
+ input.tr-ui-find-control {
3778
+ width:250px;
3779
+ min-height:36px;
3780
+ border:none;
3781
+ margin-left:12px;
3782
+ padding-right:64px;
3783
+ padding-left:5px;
3784
+ cursor: text;
3785
+ }
3786
+ input.tr-ui-find-control:hover {
3787
+ background-color: white;
3788
+ border: #dadce0 solid 0.5px;
3789
+ cursor: text;
3790
+ }
3791
+
3792
+ tr-ui-b-toolbar-button.tr-ui-find-control {
3793
+ border:none;
3794
+ height: 36px;
3795
+ width: 36px;
3796
+ margin-left: 2px;
3797
+ }
3798
+
3799
+ #spinner.tr-ui-find-control {
3800
+ height: 12px;
3801
+ width: 12px;
3802
+ top: 12px;
3803
+ }
3804
+
3805
+ #hitCount.tr-ui-find-control {
3806
+ width: 245px; /* Make search hit number always visible */
3807
+ min-height: 36px;
3808
+ display: flex;
3809
+ align-items: center;
3810
+ justify-content: flex-end;
3811
+ }
3812
+
3813
+ tr-ui-b-heading {
3814
+ background-color: transparent;
3815
+ cursor: e-resize;
3816
+ }
3817
+
3818
+ tr-ui-b-heading,
3819
+ .process-track-header {
3820
+ border: none;
3821
+ display: flex;
3822
+ align-items: center;
3823
+ }
3824
+
3825
+ .process-track-header {
3826
+ height: 36px;
3827
+ font-size: 14px;
3828
+ background-image: unset;
3829
+ background-color: rgb(243, 245, 247);
3830
+ }
3831
+ .dragging {
3832
+ opacity : 0.5;
3833
+ border : 2px solid red;
3834
+ }
3835
+ .process-track-header:hover{
3836
+ cursor: pointer;
3837
+ }
3838
+ /* Move the triangle button from process-track-name to process-track-header to enable track name selection */
3839
+ .process-track-base.expanded .process-track-header:before {
3840
+ content: '\25BE'; /* Down triangle */
3841
+ cursor: pointer;
3842
+ }
3843
+ .process-track-header:before {
3844
+ content: '\25B8'; /* Right triangle */
3845
+ padding: 0 5px;
3846
+ cursor: pointer;
3847
+ }
3848
+ .process-track-base.expanded .process-track-header {
3849
+ background-image: unset;
3850
+ background-color: #cbd6e3;
3851
+ }
3852
+
3853
+ .process-track-drag-handle {
3854
+ position: absolute;
3855
+ left: 18px;
3856
+ user-select: text;
3857
+ flex-grow: unset;
3858
+ cursor: grab;
3859
+ }
3860
+ .process-track-drag-handle:hover {
3861
+ outline: none;
3862
+ border: none;
3863
+ }
3864
+ .process-track-name {
3865
+ position: absolute;
3866
+ left: 36px;
3867
+ user-select: text;
3868
+ flex-grow: unset;
3869
+ padding-right: 36px;
3870
+ cursor: text;
3871
+ }
3872
+ .process-track-name:before {
3873
+ display: none;
3874
+ }
3875
+ .process-track-base.expanded .process-track-name:before {
3876
+ display: none;
3877
+ }
3878
+ #arrow.tr-ui-b-heading {
3879
+ cursor: pointer;
3880
+ }
3881
+ .process-track-close {
3882
+ color: #424242;
3883
+ cursor: pointer;
3884
+ border: none;
3885
+ position: absolute;
3886
+ right: 5px;
3887
+ }
3888
+ .process-track-close:hover {
3889
+ outline: none;
3890
+ border: none;
3891
+ }
3892
+ #codesearchLink {
3893
+ display: none;
3894
+ }
3895
+ #process_filter_dropdown,
3896
+ #flow_event_filter_dropdown {
3897
+ display: none;
3898
+ }
3899
+ canvas.drawing-container-canvas {
3900
+ border-left: 2px dotted #08a;
3901
+ }
3902
+
3903
+ tr-ui-a-stack-frame {
3904
+ display: flex;
3905
+ flex-flow: column;
3906
+ align-items: start;
3907
+ }
3908
+
3909
+ .collapsible {
3910
+ color: black;
3911
+ cursor: pointer;
3912
+ padding: 5px;
3913
+ border: none;
3914
+ border-radius: 5px;
3915
+ text-align: left;
3916
+ outline: none;
3917
+ font-size: 12px;
3918
+ }
3919
+
3920
+ .collapsible:hover {
3921
+ background-color: #555;
3922
+ color: white;
3923
+ }
3924
+
3925
+ .collapsible-content {
3926
+ display: none;
3927
+ overflow: hidden;
3928
+ }
3929
+ </style><tf-trace-viewer></tf-trace-viewer><script src="trace_viewer_index.js"></script></body></html>