@itwin/frontend-devtools 4.0.0-dev.48 → 4.0.0-dev.50

package/lib/esm/widgets/FpsTracker.js

@@ -1,53 +1,53 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Widgets
- */
-import { PerformanceMetrics } from "@itwin/core-frontend";
-import { createCheckBox } from "../ui/CheckBox";
-/** Displays average frames-per-second.
- * NOTE: Enabling fps tracking causes a new frame to render on every tick of the render loop, which may negatively impact battery life.
- * @beta
- */
-export class FpsTracker {
-    constructor(parent, viewport) {
-        this._vp = viewport;
-        this._label = createCheckBox({
-            parent,
-            name: "Track FPS",
-            id: "fpsTracker_toggle",
-            handler: (cb) => this.toggle(cb.checked),
-        }).label;
-    }
-    dispose() {
-        this.toggle(false);
-    }
-    clearInterval() {
-        if (undefined !== this._curIntervalId) {
-            clearInterval(this._curIntervalId);
-            this._curIntervalId = undefined;
-        }
-    }
-    toggle(enabled) {
-        this._vp.continuousRendering = enabled;
-        if (enabled) {
-            this._metrics = new PerformanceMetrics(false, true);
-            this._curIntervalId = setInterval(() => this.updateFPS(), 500);
-            this._label.innerText = "Tracking FPS...";
-        }
-        else {
-            this._metrics = undefined;
-            this.clearInterval();
-            this._label.innerText = "Track FPS";
-        }
-        this._vp.target.performanceMetrics = this._metrics;
-    }
-    updateFPS() {
-        const metrics = this._metrics;
-        const fps = (metrics.spfTimes.length / metrics.spfSum).toFixed(2);
-        this._label.innerText = `FPS: ${fps}`;
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widgets
+ */
+import { PerformanceMetrics } from "@itwin/core-frontend";
+import { createCheckBox } from "../ui/CheckBox";
+/** Displays average frames-per-second.
+ * NOTE: Enabling fps tracking causes a new frame to render on every tick of the render loop, which may negatively impact battery life.
+ * @beta
+ */
+export class FpsTracker {
+    constructor(parent, viewport) {
+        this._vp = viewport;
+        this._label = createCheckBox({
+            parent,
+            name: "Track FPS",
+            id: "fpsTracker_toggle",
+            handler: (cb) => this.toggle(cb.checked),
+        }).label;
+    }
+    dispose() {
+        this.toggle(false);
+    }
+    clearInterval() {
+        if (undefined !== this._curIntervalId) {
+            clearInterval(this._curIntervalId);
+            this._curIntervalId = undefined;
+        }
+    }
+    toggle(enabled) {
+        this._vp.continuousRendering = enabled;
+        if (enabled) {
+            this._metrics = new PerformanceMetrics(false, true);
+            this._curIntervalId = setInterval(() => this.updateFPS(), 500);
+            this._label.innerText = "Tracking FPS...";
+        }
+        else {
+            this._metrics = undefined;
+            this.clearInterval();
+            this._label.innerText = "Track FPS";
+        }
+        this._vp.target.performanceMetrics = this._metrics;
+    }
+    updateFPS() {
+        const metrics = this._metrics;
+        const fps = (metrics.spfTimes.length / metrics.spfSum).toFixed(2);
+        this._label.innerText = `FPS: ${fps}`;
+    }
+}
 //# sourceMappingURL=FpsTracker.js.map

package/lib/esm/widgets/FpsTracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FpsTracker.js","sourceRoot":"","sources":["../../../src/widgets/FpsTracker.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F;;GAEG;AAEH,OAAO,EAAE,kBAAkB,EAAoB,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;GAGG;AACH,MAAM,OAAO,UAAU;IAMrB,YAAmB,MAAmB,EAAE,QAAkB;QACxD,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC;YAC3B,MAAM;YACN,IAAI,EAAE,WAAW;YACjB,EAAE,EAAE,mBAAmB;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC;SACzC,CAAC,CAAC,KAAK,CAAC;IACX,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC;IAEO,aAAa;QACnB,IAAI,SAAS,KAAK,IAAI,CAAC,cAAc,EAAE;YACrC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACnC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACjC;IACH,CAAC;IAEO,MAAM,CAAC,OAAgB;QAC7B,IAAI,CAAC,GAAG,CAAC,mBAAmB,GAAG,OAAO,CAAC;QACvC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,QAAQ,GAAG,IAAI,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACpD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,iBAAiB,CAAC;SAC3C;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,WAAW,CAAC;SACrC;QAEA,IAAI,CAAC,GAAG,CAAC,MAAiB,CAAC,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC;IACjE,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,QAAS,CAAC;QAC/B,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,EAAE,CAAC;IACxC,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\n/** @packageDocumentation\n * @module Widgets\n */\n\nimport { PerformanceMetrics, Target, Viewport } from \"@itwin/core-frontend\";\nimport { createCheckBox } from \"../ui/CheckBox\";\n\n/** Displays average frames-per-second.\n * NOTE: Enabling fps tracking causes a new frame to render on every tick of the render loop, which may negatively impact battery life.\n * @beta\n */\nexport class FpsTracker {\n  private readonly _label: HTMLLabelElement;\n  private _metrics?: PerformanceMetrics;\n  private _curIntervalId?: NodeJS.Timer;\n  private readonly _vp: Viewport;\n\n  public constructor(parent: HTMLElement, viewport: Viewport) {\n    this._vp = viewport;\n    this._label = createCheckBox({\n      parent,\n      name: \"Track FPS\",\n      id: \"fpsTracker_toggle\",\n      handler: (cb) => this.toggle(cb.checked),\n    }).label;\n  }\n\n  public dispose(): void {\n    this.toggle(false);\n  }\n\n  private clearInterval(): void {\n    if (undefined !== this._curIntervalId) {\n      clearInterval(this._curIntervalId);\n      this._curIntervalId = undefined;\n    }\n  }\n\n  private toggle(enabled: boolean): void {\n    this._vp.continuousRendering = enabled;\n    if (enabled) {\n      this._metrics = new PerformanceMetrics(false, true);\n      this._curIntervalId = setInterval(() => this.updateFPS(), 500);\n      this._label.innerText = \"Tracking FPS...\";\n    } else {\n      this._metrics = undefined;\n      this.clearInterval();\n      this._label.innerText = \"Track FPS\";\n    }\n\n    (this._vp.target as Target).performanceMetrics = this._metrics;\n  }\n\n  private updateFPS(): void {\n    const metrics = this._metrics!;\n    const fps = (metrics.spfTimes.length / metrics.spfSum).toFixed(2);\n    this._label.innerText = `FPS: ${fps}`;\n  }\n}\n"]}
+{"version":3,"file":"FpsTracker.js","sourceRoot":"","sources":["../../../src/widgets/FpsTracker.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAE/F;;GAEG;AAEH,OAAO,EAAE,kBAAkB,EAAoB,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAEhD;;;GAGG;AACH,MAAM,OAAO,UAAU;IAMrB,YAAmB,MAAmB,EAAE,QAAkB;QACxD,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,cAAc,CAAC;YAC3B,MAAM;YACN,IAAI,EAAE,WAAW;YACjB,EAAE,EAAE,mBAAmB;YACvB,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC;SACzC,CAAC,CAAC,KAAK,CAAC;IACX,CAAC;IAEM,OAAO;QACZ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC;IAEO,aAAa;QACnB,IAAI,SAAS,KAAK,IAAI,CAAC,cAAc,EAAE;YACrC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACnC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACjC;IACH,CAAC;IAEO,MAAM,CAAC,OAAgB;QAC7B,IAAI,CAAC,GAAG,CAAC,mBAAmB,GAAG,OAAO,CAAC;QACvC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,QAAQ,GAAG,IAAI,kBAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YACpD,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,GAAG,CAAC,CAAC;YAC/D,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,iBAAiB,CAAC;SAC3C;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,WAAW,CAAC;SACrC;QAEA,IAAI,CAAC,GAAG,CAAC,MAAiB,CAAC,kBAAkB,GAAG,IAAI,CAAC,QAAQ,CAAC;IACjE,CAAC;IAEO,SAAS;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,QAAS,CAAC;QAC/B,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,EAAE,CAAC;IACxC,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n\r\n/** @packageDocumentation\r\n * @module Widgets\r\n */\r\n\r\nimport { PerformanceMetrics, Target, Viewport } from \"@itwin/core-frontend\";\r\nimport { createCheckBox } from \"../ui/CheckBox\";\r\n\r\n/** Displays average frames-per-second.\r\n * NOTE: Enabling fps tracking causes a new frame to render on every tick of the render loop, which may negatively impact battery life.\r\n * @beta\r\n */\r\nexport class FpsTracker {\r\n  private readonly _label: HTMLLabelElement;\r\n  private _metrics?: PerformanceMetrics;\r\n  private _curIntervalId?: NodeJS.Timer;\r\n  private readonly _vp: Viewport;\r\n\r\n  public constructor(parent: HTMLElement, viewport: Viewport) {\r\n    this._vp = viewport;\r\n    this._label = createCheckBox({\r\n      parent,\r\n      name: \"Track FPS\",\r\n      id: \"fpsTracker_toggle\",\r\n      handler: (cb) => this.toggle(cb.checked),\r\n    }).label;\r\n  }\r\n\r\n  public dispose(): void {\r\n    this.toggle(false);\r\n  }\r\n\r\n  private clearInterval(): void {\r\n    if (undefined !== this._curIntervalId) {\r\n      clearInterval(this._curIntervalId);\r\n      this._curIntervalId = undefined;\r\n    }\r\n  }\r\n\r\n  private toggle(enabled: boolean): void {\r\n    this._vp.continuousRendering = enabled;\r\n    if (enabled) {\r\n      this._metrics = new PerformanceMetrics(false, true);\r\n      this._curIntervalId = setInterval(() => this.updateFPS(), 500);\r\n      this._label.innerText = \"Tracking FPS...\";\r\n    } else {\r\n      this._metrics = undefined;\r\n      this.clearInterval();\r\n      this._label.innerText = \"Track FPS\";\r\n    }\r\n\r\n    (this._vp.target as Target).performanceMetrics = this._metrics;\r\n  }\r\n\r\n  private updateFPS(): void {\r\n    const metrics = this._metrics!;\r\n    const fps = (metrics.spfTimes.length / metrics.spfSum).toFixed(2);\r\n    this._label.innerText = `FPS: ${fps}`;\r\n  }\r\n}\r\n"]}

package/lib/esm/widgets/GpuProfiler.d.ts

@@ -1,17 +1,17 @@
-/** @alpha */
-export declare class GpuProfiler {
-    private readonly _div;
-    private readonly _resultsDiv;
-    private readonly _results;
-    private readonly _debugControl;
-    private readonly _recordButton;
-    private _recordedResults;
-    private _isRecording;
-    constructor(parent: HTMLElement);
-    dispose(): void;
-    private toggleProfileCheckBox;
-    private _clickRecord;
-    private stopRecording;
-    private _resultsCallback;
-}
+/** @alpha */
+export declare class GpuProfiler {
+    private readonly _div;
+    private readonly _resultsDiv;
+    private readonly _results;
+    private readonly _debugControl;
+    private readonly _recordButton;
+    private _recordedResults;
+    private _isRecording;
+    constructor(parent: HTMLElement);
+    dispose(): void;
+    private toggleProfileCheckBox;
+    private _clickRecord;
+    private stopRecording;
+    private _resultsCallback;
+}
 //# sourceMappingURL=GpuProfiler.d.ts.map

package/lib/esm/widgets/GpuProfiler.js

@@ -1,189 +1,189 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Widgets
- */
-import { saveAs } from "file-saver";
-import { IModelApp } from "@itwin/core-frontend";
-import { createCheckBox } from "../ui/CheckBox";
-const dummyArgs = { 0: 0 }; // Reuse instead of allocating for each entry
-/**
- * @param name Label for the trace event
- * @param start Timestamp in microseconds of when trace event started
- * @param duration Duration in microseconds of trace event
- */
-function createTraceEvent(name, start, duration) {
-    return {
-        pid: 1,
-        ts: start,
-        dur: duration,
-        ph: "X",
-        name,
-        args: dummyArgs,
-    };
-}
-function createTraceFromTimerResults(timerResults) {
-    const traceEvents = [];
-    const addChildren = (startTime, children) => {
-        for (const child of children) {
-            if (child.nanoseconds < 100)
-                continue;
-            const microseconds = child.nanoseconds / 1E3;
-            traceEvents.push(createTraceEvent(child.label, startTime, microseconds));
-            if (child.children)
-                addChildren(startTime, child.children);
-            startTime += microseconds;
-        }
-    };
-    let frameStartTime = 0;
-    let frameNumber = 0;
-    for (const tr of timerResults) {
-        const microseconds = tr.nanoseconds / 1E3;
-        traceEvents.push(createTraceEvent(`Frame ${frameNumber}`, frameStartTime, microseconds));
-        if (tr.children)
-            addChildren(frameStartTime, tr.children);
-        frameStartTime += microseconds;
-        ++frameNumber;
-    }
-    return { traceEvents };
-}
-/** @alpha */
-export class GpuProfiler {
-    constructor(parent) {
-        this._clickRecord = () => {
-            if (!this._isRecording) {
-                this._isRecording = true;
-                this._recordButton.innerText = "Stop Recording";
-                return;
-            }
-            this.stopRecording();
-        };
-        this._resultsCallback = (result) => {
-            if (this._isRecording)
-                this._recordedResults.push(result);
-            const fragment = document.createDocumentFragment();
-            const numSavedFrames = 120;
-            let lastValue;
-            const changedResults = new Array(this._results.length); // default values false
-            const printDepth = (depth, currentRes) => {
-                const index = this._results.findIndex((res) => res.label === currentRes.label);
-                if (index < 0) { // Add brand new entry
-                    const data = {
-                        label: currentRes.label,
-                        paddingLeft: `${depth}em`,
-                        sum: currentRes.nanoseconds,
-                        values: [currentRes.nanoseconds],
-                    };
-                    if (lastValue === undefined) {
-                        this._results.unshift(data);
-                        changedResults.unshift(true);
-                    }
-                    else if (currentRes.label === "Read Pixels") {
-                        this._results.push(data); // Read Pixels should go at the end of the list
-                        changedResults.push(true);
-                    }
-                    else {
-                        const prevIndex = this._results.findIndex((res) => res.label === lastValue);
-                        this._results.splice(prevIndex + 1, 0, data);
-                        changedResults.splice(prevIndex + 1, 0, true);
-                    }
-                }
-                else { // Edit old entry
-                    let oldVal = 0.0;
-                    const savedResults = this._results[index];
-                    if (savedResults.values.length >= numSavedFrames) { // keep up to numSavedFrames values to average between
-                        oldVal = savedResults.values.shift();
-                    }
-                    const newVal = currentRes.nanoseconds < 100 ? 0.0 : currentRes.nanoseconds; // high-pass filter, empty queries have some noise
-                    savedResults.sum += newVal - oldVal;
-                    savedResults.values.push(newVal);
-                    changedResults[index] = true;
-                }
-                lastValue = currentRes.label;
-                if (!currentRes.children)
-                    return;
-                for (const childRes of currentRes.children)
-                    printDepth(depth + 1, childRes);
-            };
-            printDepth(0, result);
-            this._results.forEach((value, index) => {
-                if (!changedResults[index]) { // if no data received on this item, add a value of 0.0 to the avg.
-                    const oldVal = value.values.length >= numSavedFrames ? value.values.shift() : 0.0;
-                    value.sum -= oldVal;
-                    value.values.push(0.0);
-                }
-                const div = document.createElement("div");
-                div.style.display = "flex";
-                div.style.width = "75%";
-                const textLabel = document.createElement("text");
-                textLabel.innerText = `${value.label}`;
-                textLabel.style.paddingLeft = value.paddingLeft;
-                div.appendChild(textLabel);
-                const divLine = document.createElement("div");
-                divLine.style.flexGrow = "1";
-                divLine.style.borderBottom = "dotted 1px";
-                div.appendChild(divLine);
-                const textValue = document.createElement("text");
-                textValue.innerText = `${(value.sum / value.values.length / 1.E6).toFixed(3)} ms\n`;
-                div.appendChild(textValue);
-                fragment.appendChild(div);
-            });
-            this._resultsDiv.innerHTML = "";
-            this._resultsDiv.appendChild(fragment);
-        };
-        this._debugControl = IModelApp.renderSystem.debugControl;
-        const checkBox = createCheckBox({
-            parent,
-            name: "Profile GPU",
-            id: "gpu-profiler-toggle",
-            handler: (cb) => this.toggleProfileCheckBox(cb.checked),
-        });
-        if (!this._debugControl.isGLTimerSupported) {
-            checkBox.checkbox.disabled = true;
-            checkBox.div.title = "EXT_disjoint_timer_query is not available in this browser";
-        }
-        this._div = document.createElement("div");
-        this._div.style.display = "none";
-        this._recordButton = document.createElement("button");
-        this._recordButton.style.textAlign = "center";
-        this._isRecording = false;
-        this._recordButton.innerText = "Record Profile";
-        this._recordButton.title = "Record a profile to open with chrome://tracing";
-        this._recordedResults = [];
-        this._recordButton.addEventListener("click", this._clickRecord);
-        this._div.appendChild(this._recordButton);
-        this._results = [];
-        this._resultsDiv = document.createElement("div");
-        this._resultsDiv.style.textAlign = "left";
-        this._div.appendChild(this._resultsDiv);
-        parent.appendChild(this._div);
-    }
-    dispose() {
-        this._debugControl.resultsCallback = undefined;
-    }
-    toggleProfileCheckBox(isEnabled) {
-        if (isEnabled) {
-            this._debugControl.resultsCallback = this._resultsCallback;
-            this._resultsDiv.innerHTML = "";
-            this._div.style.display = "block";
-        }
-        else {
-            this._debugControl.resultsCallback = undefined;
-            this._div.style.display = "none";
-            this.stopRecording();
-        }
-    }
-    stopRecording() {
-        this._isRecording = false;
-        this._recordButton.innerText = "Record Profile";
-        if (this._recordedResults.length !== 0) {
-            const chromeTrace = createTraceFromTimerResults(this._recordedResults);
-            const blob = new Blob([JSON.stringify(chromeTrace)], { type: "application/json;charset=utf-8" });
-            saveAs(blob, "gpu-profile.json");
-            this._recordedResults = [];
-        }
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widgets
+ */
+import { saveAs } from "file-saver";
+import { IModelApp } from "@itwin/core-frontend";
+import { createCheckBox } from "../ui/CheckBox";
+const dummyArgs = { 0: 0 }; // Reuse instead of allocating for each entry
+/**
+ * @param name Label for the trace event
+ * @param start Timestamp in microseconds of when trace event started
+ * @param duration Duration in microseconds of trace event
+ */
+function createTraceEvent(name, start, duration) {
+    return {
+        pid: 1,
+        ts: start,
+        dur: duration,
+        ph: "X",
+        name,
+        args: dummyArgs,
+    };
+}
+function createTraceFromTimerResults(timerResults) {
+    const traceEvents = [];
+    const addChildren = (startTime, children) => {
+        for (const child of children) {
+            if (child.nanoseconds < 100)
+                continue;
+            const microseconds = child.nanoseconds / 1E3;
+            traceEvents.push(createTraceEvent(child.label, startTime, microseconds));
+            if (child.children)
+                addChildren(startTime, child.children);
+            startTime += microseconds;
+        }
+    };
+    let frameStartTime = 0;
+    let frameNumber = 0;
+    for (const tr of timerResults) {
+        const microseconds = tr.nanoseconds / 1E3;
+        traceEvents.push(createTraceEvent(`Frame ${frameNumber}`, frameStartTime, microseconds));
+        if (tr.children)
+            addChildren(frameStartTime, tr.children);
+        frameStartTime += microseconds;
+        ++frameNumber;
+    }
+    return { traceEvents };
+}
+/** @alpha */
+export class GpuProfiler {
+    constructor(parent) {
+        this._clickRecord = () => {
+            if (!this._isRecording) {
+                this._isRecording = true;
+                this._recordButton.innerText = "Stop Recording";
+                return;
+            }
+            this.stopRecording();
+        };
+        this._resultsCallback = (result) => {
+            if (this._isRecording)
+                this._recordedResults.push(result);
+            const fragment = document.createDocumentFragment();
+            const numSavedFrames = 120;
+            let lastValue;
+            const changedResults = new Array(this._results.length); // default values false
+            const printDepth = (depth, currentRes) => {
+                const index = this._results.findIndex((res) => res.label === currentRes.label);
+                if (index < 0) { // Add brand new entry
+                    const data = {
+                        label: currentRes.label,
+                        paddingLeft: `${depth}em`,
+                        sum: currentRes.nanoseconds,
+                        values: [currentRes.nanoseconds],
+                    };
+                    if (lastValue === undefined) {
+                        this._results.unshift(data);
+                        changedResults.unshift(true);
+                    }
+                    else if (currentRes.label === "Read Pixels") {
+                        this._results.push(data); // Read Pixels should go at the end of the list
+                        changedResults.push(true);
+                    }
+                    else {
+                        const prevIndex = this._results.findIndex((res) => res.label === lastValue);
+                        this._results.splice(prevIndex + 1, 0, data);
+                        changedResults.splice(prevIndex + 1, 0, true);
+                    }
+                }
+                else { // Edit old entry
+                    let oldVal = 0.0;
+                    const savedResults = this._results[index];
+                    if (savedResults.values.length >= numSavedFrames) { // keep up to numSavedFrames values to average between
+                        oldVal = savedResults.values.shift();
+                    }
+                    const newVal = currentRes.nanoseconds < 100 ? 0.0 : currentRes.nanoseconds; // high-pass filter, empty queries have some noise
+                    savedResults.sum += newVal - oldVal;
+                    savedResults.values.push(newVal);
+                    changedResults[index] = true;
+                }
+                lastValue = currentRes.label;
+                if (!currentRes.children)
+                    return;
+                for (const childRes of currentRes.children)
+                    printDepth(depth + 1, childRes);
+            };
+            printDepth(0, result);
+            this._results.forEach((value, index) => {
+                if (!changedResults[index]) { // if no data received on this item, add a value of 0.0 to the avg.
+                    const oldVal = value.values.length >= numSavedFrames ? value.values.shift() : 0.0;
+                    value.sum -= oldVal;
+                    value.values.push(0.0);
+                }
+                const div = document.createElement("div");
+                div.style.display = "flex";
+                div.style.width = "75%";
+                const textLabel = document.createElement("text");
+                textLabel.innerText = `${value.label}`;
+                textLabel.style.paddingLeft = value.paddingLeft;
+                div.appendChild(textLabel);
+                const divLine = document.createElement("div");
+                divLine.style.flexGrow = "1";
+                divLine.style.borderBottom = "dotted 1px";
+                div.appendChild(divLine);
+                const textValue = document.createElement("text");
+                textValue.innerText = `${(value.sum / value.values.length / 1.E6).toFixed(3)} ms\n`;
+                div.appendChild(textValue);
+                fragment.appendChild(div);
+            });
+            this._resultsDiv.innerHTML = "";
+            this._resultsDiv.appendChild(fragment);
+        };
+        this._debugControl = IModelApp.renderSystem.debugControl;
+        const checkBox = createCheckBox({
+            parent,
+            name: "Profile GPU",
+            id: "gpu-profiler-toggle",
+            handler: (cb) => this.toggleProfileCheckBox(cb.checked),
+        });
+        if (!this._debugControl.isGLTimerSupported) {
+            checkBox.checkbox.disabled = true;
+            checkBox.div.title = "EXT_disjoint_timer_query is not available in this browser";
+        }
+        this._div = document.createElement("div");
+        this._div.style.display = "none";
+        this._recordButton = document.createElement("button");
+        this._recordButton.style.textAlign = "center";
+        this._isRecording = false;
+        this._recordButton.innerText = "Record Profile";
+        this._recordButton.title = "Record a profile to open with chrome://tracing";
+        this._recordedResults = [];
+        this._recordButton.addEventListener("click", this._clickRecord);
+        this._div.appendChild(this._recordButton);
+        this._results = [];
+        this._resultsDiv = document.createElement("div");
+        this._resultsDiv.style.textAlign = "left";
+        this._div.appendChild(this._resultsDiv);
+        parent.appendChild(this._div);
+    }
+    dispose() {
+        this._debugControl.resultsCallback = undefined;
+    }
+    toggleProfileCheckBox(isEnabled) {
+        if (isEnabled) {
+            this._debugControl.resultsCallback = this._resultsCallback;
+            this._resultsDiv.innerHTML = "";
+            this._div.style.display = "block";
+        }
+        else {
+            this._debugControl.resultsCallback = undefined;
+            this._div.style.display = "none";
+            this.stopRecording();
+        }
+    }
+    stopRecording() {
+        this._isRecording = false;
+        this._recordButton.innerText = "Record Profile";
+        if (this._recordedResults.length !== 0) {
+            const chromeTrace = createTraceFromTimerResults(this._recordedResults);
+            const blob = new Blob([JSON.stringify(chromeTrace)], { type: "application/json;charset=utf-8" });
+            saveAs(blob, "gpu-profile.json");
+            this._recordedResults = [];
+        }
+    }
+}
 //# sourceMappingURL=GpuProfiler.js.map

package/lib/esm/widgets/GpuProfiler.js.map

@@ -1 +1 @@
-{"version":3,"file":"GpuProfiler.js","sourceRoot":"","sources":["../../../src/widgets/GpuProfiler.ts"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\n/** @packageDocumentation\n * @module Widgets\n */\n\nimport { saveAs } from \"file-saver\";\nimport { GLTimerResult, IModelApp, RenderSystemDebugControl } from \"@itwin/core-frontend\";\nimport { createCheckBox } from \"../ui/CheckBox\";\n\n/** Trace Event Format, viewable with chrome://tracing\n * https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit\n */\ninterface ChromeTrace {\n  traceEvents: ChromeTraceEvent[];\n}\n\ninterface ChromeTraceEvent {\n  /** Required by chrome://tracing  */\n  pid: 1;\n  /** Timestamp in microseconds */\n  ts: number;\n  /** Duration in microseconds */\n  dur: number;\n  /** Denotes \"complete\" event */\n  ph: \"X\";\n  /** Label for chrome://tracing view */\n  name: string;\n  /** dummy value, args must be defined for entries to be clickable in chrome://tracing */\n  args: ChromeTraceEventArgs;\n}\n\ninterface ChromeTraceEventArgs { 0: 0 }\nconst dummyArgs: ChromeTraceEventArgs = { 0: 0 }; // Reuse instead of allocating for each entry\n\n/**\n * @param name Label for the trace event\n * @param start Timestamp in microseconds of when trace event started\n * @param duration Duration in microseconds of trace event\n */\nfunction createTraceEvent(name: string, start: number, duration: number): ChromeTraceEvent {\n  return {\n    pid: 1,\n    ts: start,\n    dur: duration,\n    ph: \"X\",\n    name,\n    args: dummyArgs,\n  };\n}\n\nfunction createTraceFromTimerResults(timerResults: GLTimerResult[]): ChromeTrace {\n  const traceEvents: ChromeTraceEvent[] = [];\n\n  const addChildren = (startTime: number, children: GLTimerResult[]) => {\n    for (const child of children) {\n      if (child.nanoseconds < 100)\n        continue;\n      const microseconds = child.nanoseconds / 1E3;\n      traceEvents.push(createTraceEvent(child.label, startTime, microseconds));\n      if (child.children)\n        addChildren(startTime, child.children);\n      startTime += microseconds;\n    }\n  };\n\n  let frameStartTime = 0;\n  let frameNumber = 0;\n  for (const tr of timerResults) {\n    const microseconds = tr.nanoseconds / 1E3;\n    traceEvents.push(createTraceEvent(`Frame ${frameNumber}`, frameStartTime, microseconds));\n    if (tr.children)\n      addChildren(frameStartTime, tr.children);\n    frameStartTime += microseconds;\n    ++frameNumber;\n  }\n\n  return { traceEvents };\n}\n\n/** @internal */\ninterface GpuProfilerResults {\n  label: string;\n  sum: number;\n  paddingLeft: string;\n  values: number[];\n}\n\n/** @alpha */\nexport class GpuProfiler {\n  private readonly _div: HTMLDivElement;\n  private readonly _resultsDiv: HTMLDivElement;\n  private readonly _results: GpuProfilerResults[];\n  private readonly _debugControl: RenderSystemDebugControl;\n\n  private readonly _recordButton!: HTMLButtonElement;\n  private _recordedResults: GLTimerResult[];\n  private _isRecording: boolean;\n\n  public constructor(parent: HTMLElement) {\n    this._debugControl = IModelApp.renderSystem.debugControl!;\n\n    const checkBox = createCheckBox({\n      parent,\n      name: \"Profile GPU\",\n      id: \"gpu-profiler-toggle\",\n      handler: (cb) => this.toggleProfileCheckBox(cb.checked),\n    });\n\n    if (!this._debugControl.isGLTimerSupported) {\n      checkBox.checkbox.disabled = true;\n      checkBox.div.title = \"EXT_disjoint_timer_query is not available in this browser\";\n    }\n\n    this._div = document.createElement(\"div\");\n    this._div.style.display = \"none\";\n\n    this._recordButton = document.createElement(\"button\");\n    this._recordButton.style.textAlign = \"center\";\n    this._isRecording = false;\n    this._recordButton.innerText = \"Record Profile\";\n    this._recordButton.title = \"Record a profile to open with chrome://tracing\";\n    this._recordedResults = [];\n    this._recordButton.addEventListener(\"click\", this._clickRecord);\n    this._div.appendChild(this._recordButton);\n\n    this._results = [];\n    this._resultsDiv = document.createElement(\"div\");\n    this._resultsDiv.style.textAlign = \"left\";\n    this._div.appendChild(this._resultsDiv);\n\n    parent.appendChild(this._div);\n  }\n\n  public dispose(): void {\n    this._debugControl.resultsCallback = undefined;\n  }\n\n  private toggleProfileCheckBox(isEnabled: boolean): void {\n    if (isEnabled) {\n      this._debugControl.resultsCallback = this._resultsCallback;\n      this._resultsDiv.innerHTML = \"\";\n      this._div.style.display = \"block\";\n    } else {\n      this._debugControl.resultsCallback = undefined;\n      this._div.style.display = \"none\";\n      this.stopRecording();\n    }\n  }\n\n  private _clickRecord = () => {\n    if (!this._isRecording) {\n      this._isRecording = true;\n      this._recordButton.innerText = \"Stop Recording\";\n      return;\n    }\n\n    this.stopRecording();\n  };\n\n  private stopRecording() {\n    this._isRecording = false;\n    this._recordButton.innerText = \"Record Profile\";\n\n    if (this._recordedResults.length !== 0) {\n      const chromeTrace = createTraceFromTimerResults(this._recordedResults);\n      const blob = new Blob([JSON.stringify(chromeTrace)], { type: \"application/json;charset=utf-8\" });\n      saveAs(blob, \"gpu-profile.json\");\n      this._recordedResults = [];\n    }\n  }\n\n  private _resultsCallback = (result: GLTimerResult): void => {\n    if (this._isRecording)\n      this._recordedResults.push(result);\n\n    const fragment = document.createDocumentFragment();\n    const numSavedFrames = 120;\n    let lastValue: string;\n    const changedResults = new Array<boolean>(this._results.length); // default values false\n    const printDepth = (depth: number, currentRes: GLTimerResult) => {\n      const index = this._results.findIndex((res) => res.label === currentRes.label);\n      if (index < 0) { // Add brand new entry\n        const data: GpuProfilerResults = {\n          label: currentRes.label,\n          paddingLeft: `${depth}em`,\n          sum: currentRes.nanoseconds,\n          values: [currentRes.nanoseconds],\n        };\n        if (lastValue === undefined) {\n          this._results.unshift(data);\n          changedResults.unshift(true);\n        } else if (currentRes.label === \"Read Pixels\") {\n          this._results.push(data); // Read Pixels should go at the end of the list\n          changedResults.push(true);\n        } else {\n          const prevIndex = this._results.findIndex((res) => res.label === lastValue);\n          this._results.splice(prevIndex + 1, 0, data);\n          changedResults.splice(prevIndex + 1, 0, true);\n        }\n      } else { // Edit old entry\n        let oldVal = 0.0;\n        const savedResults = this._results[index];\n        if (savedResults.values.length >= numSavedFrames) { // keep up to numSavedFrames values to average between\n          oldVal = savedResults.values.shift()!;\n        }\n        const newVal = currentRes.nanoseconds < 100 ? 0.0 : currentRes.nanoseconds; // high-pass filter, empty queries have some noise\n        savedResults.sum += newVal - oldVal;\n        savedResults.values.push(newVal);\n        changedResults[index] = true;\n      }\n      lastValue = currentRes.label;\n\n      if (!currentRes.children)\n        return;\n\n      for (const childRes of currentRes.children)\n        printDepth(depth + 1, childRes);\n    };\n    printDepth(0, result);\n\n    this._results.forEach((value, index) => {\n      if (!changedResults[index]) { // if no data received on this item, add a value of 0.0 to the avg.\n        const oldVal = value.values.length >= numSavedFrames ? value.values.shift()! : 0.0;\n        value.sum -= oldVal;\n        value.values.push(0.0);\n      }\n      const div = document.createElement(\"div\");\n      div.style.display = \"flex\";\n      div.style.width = \"75%\";\n      const textLabel = document.createElement(\"text\");\n      textLabel.innerText = `${value.label}`;\n      textLabel.style.paddingLeft = value.paddingLeft;\n      div.appendChild(textLabel);\n      const divLine = document.createElement(\"div\");\n      divLine.style.flexGrow = \"1\";\n      divLine.style.borderBottom = \"dotted 1px\";\n      div.appendChild(divLine);\n      const textValue = document.createElement(\"text\");\n      textValue.innerText = `${(value.sum / value.values.length / 1.E6).toFixed(3)} ms\\n`;\n      div.appendChild(textValue);\n      fragment.appendChild(div);\n    });\n\n    this._resultsDiv.innerHTML = \"\";\n    this._resultsDiv.appendChild(fragment);\n  };\n}\n"]}
+{"version":3,"file":"GpuProfiler.js","sourceRoot":"","sources":["../../../src/widgets/GpuProfiler.ts"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n\r\n/** @packageDocumentation\r\n * @module Widgets\r\n */\r\n\r\nimport { saveAs } from \"file-saver\";\r\nimport { GLTimerResult, IModelApp, RenderSystemDebugControl } from \"@itwin/core-frontend\";\r\nimport { createCheckBox } from \"../ui/CheckBox\";\r\n\r\n/** Trace Event Format, viewable with chrome://tracing\r\n * https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit\r\n */\r\ninterface ChromeTrace {\r\n  traceEvents: ChromeTraceEvent[];\r\n}\r\n\r\ninterface ChromeTraceEvent {\r\n  /** Required by chrome://tracing  */\r\n  pid: 1;\r\n  /** Timestamp in microseconds */\r\n  ts: number;\r\n  /** Duration in microseconds */\r\n  dur: number;\r\n  /** Denotes \"complete\" event */\r\n  ph: \"X\";\r\n  /** Label for chrome://tracing view */\r\n  name: string;\r\n  /** dummy value, args must be defined for entries to be clickable in chrome://tracing */\r\n  args: ChromeTraceEventArgs;\r\n}\r\n\r\ninterface ChromeTraceEventArgs { 0: 0 }\r\nconst dummyArgs: ChromeTraceEventArgs = { 0: 0 }; // Reuse instead of allocating for each entry\r\n\r\n/**\r\n * @param name Label for the trace event\r\n * @param start Timestamp in microseconds of when trace event started\r\n * @param duration Duration in microseconds of trace event\r\n */\r\nfunction createTraceEvent(name: string, start: number, duration: number): ChromeTraceEvent {\r\n  return {\r\n    pid: 1,\r\n    ts: start,\r\n    dur: duration,\r\n    ph: \"X\",\r\n    name,\r\n    args: dummyArgs,\r\n  };\r\n}\r\n\r\nfunction createTraceFromTimerResults(timerResults: GLTimerResult[]): ChromeTrace {\r\n  const traceEvents: ChromeTraceEvent[] = [];\r\n\r\n  const addChildren = (startTime: number, children: GLTimerResult[]) => {\r\n    for (const child of children) {\r\n      if (child.nanoseconds < 100)\r\n        continue;\r\n      const microseconds = child.nanoseconds / 1E3;\r\n      traceEvents.push(createTraceEvent(child.label, startTime, microseconds));\r\n      if (child.children)\r\n        addChildren(startTime, child.children);\r\n      startTime += microseconds;\r\n    }\r\n  };\r\n\r\n  let frameStartTime = 0;\r\n  let frameNumber = 0;\r\n  for (const tr of timerResults) {\r\n    const microseconds = tr.nanoseconds / 1E3;\r\n    traceEvents.push(createTraceEvent(`Frame ${frameNumber}`, frameStartTime, microseconds));\r\n    if (tr.children)\r\n      addChildren(frameStartTime, tr.children);\r\n    frameStartTime += microseconds;\r\n    ++frameNumber;\r\n  }\r\n\r\n  return { traceEvents };\r\n}\r\n\r\n/** @internal */\r\ninterface GpuProfilerResults {\r\n  label: string;\r\n  sum: number;\r\n  paddingLeft: string;\r\n  values: number[];\r\n}\r\n\r\n/** @alpha */\r\nexport class GpuProfiler {\r\n  private readonly _div: HTMLDivElement;\r\n  private readonly _resultsDiv: HTMLDivElement;\r\n  private readonly _results: GpuProfilerResults[];\r\n  private readonly _debugControl: RenderSystemDebugControl;\r\n\r\n  private readonly _recordButton!: HTMLButtonElement;\r\n  private _recordedResults: GLTimerResult[];\r\n  private _isRecording: boolean;\r\n\r\n  public constructor(parent: HTMLElement) {\r\n    this._debugControl = IModelApp.renderSystem.debugControl!;\r\n\r\n    const checkBox = createCheckBox({\r\n      parent,\r\n      name: \"Profile GPU\",\r\n      id: \"gpu-profiler-toggle\",\r\n      handler: (cb) => this.toggleProfileCheckBox(cb.checked),\r\n    });\r\n\r\n    if (!this._debugControl.isGLTimerSupported) {\r\n      checkBox.checkbox.disabled = true;\r\n      checkBox.div.title = \"EXT_disjoint_timer_query is not available in this browser\";\r\n    }\r\n\r\n    this._div = document.createElement(\"div\");\r\n    this._div.style.display = \"none\";\r\n\r\n    this._recordButton = document.createElement(\"button\");\r\n    this._recordButton.style.textAlign = \"center\";\r\n    this._isRecording = false;\r\n    this._recordButton.innerText = \"Record Profile\";\r\n    this._recordButton.title = \"Record a profile to open with chrome://tracing\";\r\n    this._recordedResults = [];\r\n    this._recordButton.addEventListener(\"click\", this._clickRecord);\r\n    this._div.appendChild(this._recordButton);\r\n\r\n    this._results = [];\r\n    this._resultsDiv = document.createElement(\"div\");\r\n    this._resultsDiv.style.textAlign = \"left\";\r\n    this._div.appendChild(this._resultsDiv);\r\n\r\n    parent.appendChild(this._div);\r\n  }\r\n\r\n  public dispose(): void {\r\n    this._debugControl.resultsCallback = undefined;\r\n  }\r\n\r\n  private toggleProfileCheckBox(isEnabled: boolean): void {\r\n    if (isEnabled) {\r\n      this._debugControl.resultsCallback = this._resultsCallback;\r\n      this._resultsDiv.innerHTML = \"\";\r\n      this._div.style.display = \"block\";\r\n    } else {\r\n      this._debugControl.resultsCallback = undefined;\r\n      this._div.style.display = \"none\";\r\n      this.stopRecording();\r\n    }\r\n  }\r\n\r\n  private _clickRecord = () => {\r\n    if (!this._isRecording) {\r\n      this._isRecording = true;\r\n      this._recordButton.innerText = \"Stop Recording\";\r\n      return;\r\n    }\r\n\r\n    this.stopRecording();\r\n  };\r\n\r\n  private stopRecording() {\r\n    this._isRecording = false;\r\n    this._recordButton.innerText = \"Record Profile\";\r\n\r\n    if (this._recordedResults.length !== 0) {\r\n      const chromeTrace = createTraceFromTimerResults(this._recordedResults);\r\n      const blob = new Blob([JSON.stringify(chromeTrace)], { type: \"application/json;charset=utf-8\" });\r\n      saveAs(blob, \"gpu-profile.json\");\r\n      this._recordedResults = [];\r\n    }\r\n  }\r\n\r\n  private _resultsCallback = (result: GLTimerResult): void => {\r\n    if (this._isRecording)\r\n      this._recordedResults.push(result);\r\n\r\n    const fragment = document.createDocumentFragment();\r\n    const numSavedFrames = 120;\r\n    let lastValue: string;\r\n    const changedResults = new Array<boolean>(this._results.length); // default values false\r\n    const printDepth = (depth: number, currentRes: GLTimerResult) => {\r\n      const index = this._results.findIndex((res) => res.label === currentRes.label);\r\n      if (index < 0) { // Add brand new entry\r\n        const data: GpuProfilerResults = {\r\n          label: currentRes.label,\r\n          paddingLeft: `${depth}em`,\r\n          sum: currentRes.nanoseconds,\r\n          values: [currentRes.nanoseconds],\r\n        };\r\n        if (lastValue === undefined) {\r\n          this._results.unshift(data);\r\n          changedResults.unshift(true);\r\n        } else if (currentRes.label === \"Read Pixels\") {\r\n          this._results.push(data); // Read Pixels should go at the end of the list\r\n          changedResults.push(true);\r\n        } else {\r\n          const prevIndex = this._results.findIndex((res) => res.label === lastValue);\r\n          this._results.splice(prevIndex + 1, 0, data);\r\n          changedResults.splice(prevIndex + 1, 0, true);\r\n        }\r\n      } else { // Edit old entry\r\n        let oldVal = 0.0;\r\n        const savedResults = this._results[index];\r\n        if (savedResults.values.length >= numSavedFrames) { // keep up to numSavedFrames values to average between\r\n          oldVal = savedResults.values.shift()!;\r\n        }\r\n        const newVal = currentRes.nanoseconds < 100 ? 0.0 : currentRes.nanoseconds; // high-pass filter, empty queries have some noise\r\n        savedResults.sum += newVal - oldVal;\r\n        savedResults.values.push(newVal);\r\n        changedResults[index] = true;\r\n      }\r\n      lastValue = currentRes.label;\r\n\r\n      if (!currentRes.children)\r\n        return;\r\n\r\n      for (const childRes of currentRes.children)\r\n        printDepth(depth + 1, childRes);\r\n    };\r\n    printDepth(0, result);\r\n\r\n    this._results.forEach((value, index) => {\r\n      if (!changedResults[index]) { // if no data received on this item, add a value of 0.0 to the avg.\r\n        const oldVal = value.values.length >= numSavedFrames ? value.values.shift()! : 0.0;\r\n        value.sum -= oldVal;\r\n        value.values.push(0.0);\r\n      }\r\n      const div = document.createElement(\"div\");\r\n      div.style.display = \"flex\";\r\n      div.style.width = \"75%\";\r\n      const textLabel = document.createElement(\"text\");\r\n      textLabel.innerText = `${value.label}`;\r\n      textLabel.style.paddingLeft = value.paddingLeft;\r\n      div.appendChild(textLabel);\r\n      const divLine = document.createElement(\"div\");\r\n      divLine.style.flexGrow = \"1\";\r\n      divLine.style.borderBottom = \"dotted 1px\";\r\n      div.appendChild(divLine);\r\n      const textValue = document.createElement(\"text\");\r\n      textValue.innerText = `${(value.sum / value.values.length / 1.E6).toFixed(3)} ms\\n`;\r\n      div.appendChild(textValue);\r\n      fragment.appendChild(div);\r\n    });\r\n\r\n    this._resultsDiv.innerHTML = \"\";\r\n    this._resultsDiv.appendChild(fragment);\r\n  };\r\n}\r\n"]}