Changelog

CHANGELOG.md

@@ -8,7 +8,10 @@
 * Fixed the bug where popup wouldn't be showing the correct settings
 * Fixed the bug where site settings would default to 'disabled', even if Extension default setting was not disabled.
 * Added ability to export and import settings from file (ft. developer mode editor)
-
+* [dev goodies] Added debug overlay for aard
+* Fixed an issue where aspect ratio wouldn't get calculated correctly on youtube videos with native aspect ratios other than 16:9
+* Fixed an issue that would crash the extension if video element didn't have a player element associated with it
+* Fixed an issue where extension sometimes wouldn't work if video element was grafted/re-parented to a different element
 
 ### v6.2.4
 * [#264](https://github.com/tamius-han/ultrawidify/issues/264) — fixed issue with white screen that affected some youtube users. Special thanks to [SnowyOwlNugget](https://github.com/SnowyOwlNugget">SnowyOwlNugget), who instead of whining provided the necessary information.

src/csui/src/PlayerUIWindow.vue

@@ -385,7 +385,7 @@ export default {
 
       padding: 2rem;
       font-size: 1.5rem;
-      height: 4rem;
+      height: 6rem;
 
       border-bottom: 1px solid rgba(128, 128, 128, 0.5);
       border-top: 1px solid rgba(128, 128, 128, 0.5);

src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -264,6 +264,15 @@
               </div>
             </div>
           </div>
+
+          <div v-if="settings.active.ui.devMode" class="settings-segment">
+            <p>
+              <b>Debug options</b>
+            </p>
+            <div>
+              <button @click="eventBus.sendToTunnel('aard-enable-debug', true)">Show debug overlay</button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -101,7 +101,7 @@
     <div v-if="enableSettingsEditor && settings.active.ui.devMode" class="h-full grow">
       <h2>Settings editor</h2>
       <div class="flex flex-row w-full">
-        <div class="flex flex-row">
+        <div class="flex flex-row items-center">
           <div>Enable save button:</div>
           <input v-model="allowSettingsEditing" type="checkbox">
         </div>

src/csui/src/PlayerUiPanels/ChangelogPanel.vue

@@ -11,16 +11,11 @@
           <li>Fixed the bug where current extension settings wouldn't be displayed correctly in the popup</li>
           <li>Fixed the issue where extension options using the "Extension default" mode would always be disabled</li>
           <li>Added the ability to import and export settings (ft. developer mode editor)</li>
+          <li>Added some toys not intended for general audience (Aard now has debug tools).</li>
+          <li>Fixed an issue where aspect ratio wouldn't get calculated correctly on youtube videos with native aspect ratios other than 16:9</li>
+          <li>Fixed an issue that would crash the extension if video element didn't have a player element associated with it</li>
+          <li>Fixed an issue where extension sometimes wouldn't work if video element was grafted/re-parented to a different element</li>
         </ul>
-
-        <p>
-          Planned future updates <i>before</i> Tam vanishes due to convention season obligations:
-        </p>
-        <ul>
-          <li>Re-implement manual zoom</li>
-          <li>It appears that ExtConfPatch for version 6.0.0 keeps getting re-applied due to a bug, but my RAID ran out for this release.</li>
-        </ul>
-
       </div>
       <div class="min-w-[400px] max-w-[520px] grow-1 shrink-1">
         <h2>Thank you monies</h2>

src/ext/lib/aard/Aard.ts

@@ -7,6 +7,7 @@ import Settings from '../Settings';
 import { SiteSettings } from '../settings/SiteSettings';
 import VideoData from '../video-data/VideoData';
 import { AardDebugUi } from './AardDebugUi';
+import { AardTimer } from './AardTimers';
 import { Corner } from './enums/corner.enum';
 import { VideoPlaybackState } from './enums/video-playback-state.enum';
 import { FallbackCanvas } from './gl/FallbackCanvas';
@@ -233,6 +234,15 @@ export class Aard {
         console.log('received extension environment:', newEnvironment, 'player env:', this.videoData?.player?.environment);
         this.startCheck();
       }
+    },
+    'aard-enable-debug': {
+      function: (enabled: boolean) => {
+        if (enabled) {
+          this.showDebugCanvas();
+        } else {
+          this.hideDebugCanvas();
+        }
+      }
     }
     //   'get-aard-timing': {
     //     function: () => this.handlePerformanceDataRequest()
@@ -251,12 +261,14 @@ export class Aard {
   private fallbackReason: any;
   private canvasStore: AardCanvasStore;
   private testResults: AardTestResults;
+  private verticalTestResults: AardTestResults;
   private canvasSamples: AardDetectionSample;
 
 
   private forceFullRecheck: boolean = true;
 
   private debugConfig: any = {};
+  private timer: AardTimer;
   //#endregion
 
   //#region getters
@@ -292,6 +304,8 @@ export class Aard {
     // we can tick manually, for debugging
     this.logger.log('info', 'init', `[ArDetector::ctor] creating new ArDetector. arid: ${this.arid}`);
 
+    this.timer = new AardTimer()
+
     this.init();
   }
 
@@ -317,11 +331,11 @@ export class Aard {
     };
 
 
-    try {
+    // try {
-      this.showDebugCanvas();
+    //   this.showDebugCanvas();
-    } catch (e) {
+    // } catch (e) {
-      console.error('FALIED TO CREATE DEBUGG CANVAS', e);
+    //   console.error('FALIED TO CREATE DEBUGG CANVAS', e);
-    }
+    // }
 
     this.startCheck();
   }
@@ -367,7 +381,6 @@ export class Aard {
    * @param canvasId
    */
   private showDebugCanvas() {
-    console.log('SHOWING DEBUG CANVAS!')
     if (!this.canvasStore.debug) {
       this.canvasStore.debug = new GlDebugCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'uw-debug-gl'});
     }
@@ -381,6 +394,13 @@ export class Aard {
       this.canvasStore.debug.drawVideoFrame(this.canvasStore.main.canvas);
     }
   }
+
+  private hideDebugCanvas() {
+    if (this.debugConfig.debugUi) {
+      this.debugConfig?.debugUi.destroyContainer();
+      this.debugConfig.debugUi = undefined;
+    }
+  }
   //#endregion
 
   /**
@@ -388,7 +408,9 @@ export class Aard {
    */
   startCheck() {
     if (!this.videoData.player) {
-      console.warn('Player not detected!')
+      console.warn('Player not detected!');
+      console.log('--- video data: ---\n', this.videoData);
+      return;
     }
     if (this.siteSettings.data.enableAard[this.videoData.player.environment] === ExtensionMode.Enabled) {
       this.start();
@@ -409,6 +431,7 @@ export class Aard {
 
     // do full reset of test samples
     this.testResults = initAardTestResults(this.settings.active.arDetect);
+    this.verticalTestResults = initAardTestResults(this.settings.active.arDetect);
 
     if (this.animationFrame) {
       window.cancelAnimationFrame(this.animationFrame);
@@ -422,8 +445,15 @@ export class Aard {
    * Runs autodetection ONCE.
    * If autodetection loop is running, this will also stop autodetection loop.
    */
-  step() {
+  step(options?: {noCache?: boolean}) {
     this.stop();
+
+    if (options?.noCache) {
+      this.testResults = initAardTestResults(this.settings.active.arDetect);
+      this.verticalTestResults = initAardTestResults(this.settings.active.arDetect);
+    }
+
+
     this.main();
   }
 
@@ -485,7 +515,10 @@ export class Aard {
    */
   private async main() {
     try {
+      this.timer.next();
+
       let imageData: Uint8Array;
+      this.timer.current.start = performance.now();
 
       // We abuse a do-while loop to eat our cake (get early returns)
       // and have it, too (if we return early, we still execute code
@@ -495,6 +528,7 @@ export class Aard {
           resolve => {
             try {
               this.canvasStore.main.drawVideoFrame(this.video);
+              this.timer.current.draw = performance.now() - this.timer.current.start;
               resolve(this.canvasStore.main.getImageData());
             } catch (e) {
               if (e.name === 'SecurityError') {
@@ -524,6 +558,7 @@ export class Aard {
             }
           }
         );
+        this.timer.current.getImage = performance.now() - this.timer.current.start;
 
         // STEP 1:
         // Test if corners are black. If they're not, we can immediately quit the loop.
@@ -532,6 +567,8 @@ export class Aard {
           this.settings.active.arDetect.canvasDimensions.sampleCanvas.width,
           this.settings.active.arDetect.canvasDimensions.sampleCanvas.height
         );
+        this.timer.current.fastBlackLevel = performance.now() - this.timer.current.start;
+
         if (this.testResults.notLetterbox) {
           // TODO: reset aspect ratio to "AR not applied"
           this.testResults.lastStage = 1;
@@ -577,6 +614,7 @@ export class Aard {
             );
           }
         }
+        this.timer.current.guardLine = performance.now() - this.timer.current.start;  // guardLine is for both guardLine and imageLine checks
 
         // Both need to be checked
         if (! (this.testResults.imageLine.invalidated || this.testResults.guardLine.invalidated)) {
@@ -611,6 +649,7 @@ export class Aard {
         if (this.testResults.notLetterbox) {
           // console.log('————not letterbox')
           console.warn('DETECTED NOT LETTERBOX! (resetting)')
+          this.timer.arChanged();
           this.updateAspectRatio(this.defaultAr);
           break;
         }
@@ -621,6 +660,7 @@ export class Aard {
           // console.warn('check finished:', JSON.parse(JSON.stringify(this.testResults)), JSON.parse(JSON.stringify(this.canvasSamples)), '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n');
 
           console.warn('ASPECT RATIO UNCERTAIN, GUARD LINE INVALIDATED (resetting)')
+          this.timer.arChanged();
           this.updateAspectRatio(this.defaultAr);
 
           break;
@@ -639,6 +679,7 @@ export class Aard {
         // except aspectRatioUpdated doesn't get set reliably, so we just call update every time, and update
         // if detected aspect ratio is different from the current aspect ratio
         // if (this.testResults.aspectRatioUpdated) {
+        //   this.timer.arChanged();
           this.updateAspectRatio();
         // }
 
@@ -647,6 +688,7 @@ export class Aard {
 
       if (this.canvasStore.debug) {
         // this.canvasStore.debug.drawBuffer(imageData);
+        this.timer.getAverage();
         this.debugConfig?.debugUi?.updateTestResults(this.testResults);
       }
     } catch (e) {
@@ -655,7 +697,6 @@ export class Aard {
     }
   }
 
-
   private getVideoPlaybackState(): VideoPlaybackState {
     try {
       if (this.video.ended) {
@@ -1251,12 +1292,14 @@ export class Aard {
     // bit more nicely visible (instead of hidden among spagheti)
     this.edgeScan(imageData, width, height);
     this.validateEdgeScan(imageData, width, height);
+    this.timer.current.edgeScan = performance.now() - this.timer.current.start;
 
     // TODO: _if gradient detection is enabled, then:
     this.sampleForGradient(imageData, width, height);
+    this.timer.current.gradient = performance.now() - this.timer.current.start;
 
     this.processScanResults(imageData, width, height);
-
+    this.timer.current.scanResults = performance.now() - this.timer.current.start;
   }
 
   /**
@@ -1420,6 +1463,9 @@ export class Aard {
     const slopeTestSample = this.settings.active.arDetect.edgeDetection.slopeTestWidth * 4;
 
     while (i < this.canvasSamples.top.length) {
+      // if (this.canvasSamples.top[i] < 0) {
+      //   continue;
+      // }
       // calculate row offset:
       row = (this.canvasSamples.top[i + 1] - 1) * width * 4;
       xs = row + this.canvasSamples.top[i] - slopeTestSample;
@@ -1445,6 +1491,10 @@ export class Aard {
     i = 0;
     let i1 = 0;
     while (i < this.canvasSamples.bottom.length) {
+      // if (this.canvasSamples.bottom[i] < 0) {
+      //   continue;
+      // }
+
       // calculate row offset:
       i1 = i + 1;
       row = (this.canvasSamples.bottom[i1] + 1) * width * 4;
@@ -1491,6 +1541,10 @@ export class Aard {
 
     upperEdgeCheck:
     for (let i = 1; i < this.canvasSamples.top.length; i += 2) {
+      if (this.canvasSamples.top[i] < 0) {
+        continue;
+      }
+
       pixelOffset = this.canvasSamples.top[i] * realWidth + this.canvasSamples.top[i - 1] * 4;
 
       lastSubpixel = imageData[pixelOffset] > imageData[pixelOffset + 1] ? imageData[pixelOffset] : imageData[pixelOffset + 1];
@@ -1533,6 +1587,9 @@ export class Aard {
 
     lowerEdgeCheck:
     for (let i = 1; i < this.canvasSamples.bottom.length; i += 2) {
+      if (this.canvasSamples.bottom[i] < 0) {
+        continue;
+      }
       pixelOffset = (height - this.canvasSamples.bottom[i]) * realWidth + this.canvasSamples.bottom[i - 1] * 4;
 
       lastSubpixel = imageData[pixelOffset] > imageData[pixelOffset + 1] ? imageData[pixelOffset] : imageData[pixelOffset + 1];
@@ -1571,7 +1628,6 @@ export class Aard {
       if (lastSubpixel - firstSubpixel > this.settings.active.arDetect.edgeDetection.gradientTestMinDelta) {
         this.canvasSamples.bottom[i] = -1;
       }
-
     }
   }
 
@@ -1928,11 +1984,22 @@ export class Aard {
       return;
     }
     if (maxOffset > 2) {
-      this.testResults.imageLine.top = this.testResults.aspectRatioCheck.topCandidate === Infinity ? -1 : this.testResults.aspectRatioCheck.topCandidate;
+      if (this.testResults.aspectRatioCheck.topCandidate === Infinity) {
-      this.testResults.imageLine.bottom = this.testResults.aspectRatioCheck.bottomCandidate === Infinity ? -1 : this.testResults.aspectRatioCheck.bottomCandidate;
+        this.testResults.imageLine.top = -1;
+        this.testResults.guardLine.top = -1;
+      } else {
+        this.testResults.imageLine.top = this.testResults.aspectRatioCheck.topCandidate = this.testResults.aspectRatioCheck.topCandidate;
         this.testResults.guardLine.top = Math.max(this.testResults.imageLine.top - 2, 0);
+      }
+
+      if (this.testResults.aspectRatioCheck.bottomCandidate === Infinity) {
+        this.testResults.imageLine.bottom = -1;
+        this.testResults.guardLine.bottom = -1;
+      } else {
+        this.testResults.imageLine.bottom = this.testResults.aspectRatioCheck.bottomCandidate;
         this.testResults.guardLine.bottom = Math.min(this.testResults.imageLine.bottom + 2, this.canvasStore.main.height - 1);
       }
+    }
 
     this.testResults.aspectRatioUncertain = false;
 
@@ -1969,7 +2036,7 @@ export class Aard {
     const fileAr = this.video.videoWidth / this.video.videoHeight;
     const canvasAr = this.canvasStore.main.width / this.canvasStore.main.height;
 
-    const compensatedWidth = fileAr === canvasAr ? this.canvasStore.main.width : this.canvasStore.main.width * fileAr;
+    const compensatedWidth = fileAr === canvasAr ? this.canvasStore.main.width : this.video.videoWidth * this.canvasStore.main.height / (this.video.videoHeight);
 
     // console.log(`
     //   ———— ASPECT RATIO CALCULATION: —————

src/ext/lib/aard/AardDebugUi.ts

@@ -1,5 +1,4 @@
-import { Aard } from './../../../../dist-chrome/ext/lib/aard/Aard';
+import { AardPerformanceData } from './AardTimers';
-
 
 export class AardDebugUi {
 
@@ -24,8 +23,46 @@ export class AardDebugUi {
     div.id = 'uw-aard-debug-ui-container';
     div.innerHTML = `
      <div style="
-        position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; pointer-events: none; z-index: 9999; display: flex; flex-direction: row; font-size: 16px; font-family: 'Overpass Mono', monospace;
+        position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; display: flex; flex-direction: column; pointer-events: none; z-index: 9999; font-size: 16px; font-family: 'Overpass Mono', monospace;
       ">
+        <div style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; backdrop-filter: blur(0.5rem) brightness(0.5);">
+          <div style="padding: 1rem; color: #fff"><h1>Aard debug overlay</h1></div>
+
+          <style>
+            #uw-aard-debug_performance-container #uw-aard-debug_performance-popup {
+              display: none;
+            }
+            #uw-aard-debug_performance-container:hover #uw-aard-debug_performance-popup {
+              display: block;
+              position: fixed;
+              left: 0;
+              top: 3rem;
+              width: 100vw;
+
+              color: #aaa;
+              background-color: #000;
+              border: 2px solid #fa6;
+              padding: 16px;
+              padding-right: 32px;
+              box-sizing: border-box;
+
+              backdrop-filter: blur(1rem) brightness(0.5);
+
+              pointer-events: none;
+              font-size: 12px;
+            }
+          </style>
+
+          <div id="uw-aard-debug_performance-container" style="flex-grow: 1; position: relative; pointer-events: auto;">
+            <div id="uw-aard-debug_performance-mini" style="width: 100%; color: #aaa; display: flex; flex-direction: column; font-size: 12px;"></div>
+            <div id="uw-aard-debug_performance-popup" style="position: fixed; top: 3rem; z-index: 3000;">
+            </div>
+          </div>
+          <div style="pointer-events: all">
+            <button id="uw-aard-debug-ui_close-overlay">Close overlay</button>
+          </div>
+        </div>
+        <div style="display: flex; flex-direction: row; width: 100%">
           <div style="">
             <div id="uw-aard-debug_aard-sample-canvas" style="min-width: 640px"></div>
             <div style="background: black; color: #fff"; font-size: 24px;">AARD IN</div>
@@ -60,7 +97,8 @@ export class AardDebugUi {
               <button id="uw-aard-debug-ui_enable-stop-on-change"  style="">Pause video on aspect ratio change</button>
               <button id="uw-aard-debug-ui_disable-stop-on-change" style="display: none">Stop pausing video on aspect ratio change</button>
               <button id="uw-aard-debug-ui_resume-video"           >Resume video</button>
-            <button id="uw-aard-debug-ui_enable-step"            >Run aspect ratio detection</button>
+              <button id="uw-aard-debug-ui_enable-step"            >Run ARD once</button>
+              <button id="uw-aard-debug-ui_enable-step-nocache"    >Run ARD (bypass cache)</button>
             </div>
           </div>
 
@@ -79,15 +117,18 @@ export class AardDebugUi {
 
           </div>
         </div>
+      </div>
     `;
 
     document.body.appendChild(div);
     this.uiAnchorElement = div;
 
     document.getElementById('uw-aard-debug-ui_enable-stop-on-change').onclick = () => this.changePauseOnCheck(true);
-    document.getElementById('uw-aard-debug-ui_disable-stop-on-change').onclick = () => this.changePauseOnCheck(true);
+    document.getElementById('uw-aard-debug-ui_disable-stop-on-change').onclick = () => this.changePauseOnCheck(false);
     document.getElementById('uw-aard-debug-ui_resume-video').onclick = () => this.resumeVideo();
     document.getElementById('uw-aard-debug-ui_enable-step').onclick = () => this.aard.step();
+    document.getElementById('uw-aard-debug-ui_enable-step-nocache').onclick = () => this.aard.step({noCache: true});
+    document.getElementById('uw-aard-debug-ui_close-overlay').onclick = () => (this.aard as any).hideDebugCanvas();
   }
 
   changePauseOnCheck(pauseOnChange: boolean) {
@@ -113,7 +154,181 @@ export class AardDebugUi {
     this.aard.start();
   }
 
+  private updatePerformanceResults() {
+    const previewDiv = document.getElementById('uw-aard-debug_performance-mini');
+    const popupDiv = document.getElementById('uw-aard-debug_performance-popup');
+
+    const previewContent = `
+      <div style="display: flex; flex-direction: row">
+        <div style="width: 120px">Current:</div>
+        <div style="flex-grow: 1;">${this.generateMiniGraphBar(this.aard.timer.current)}</div>
+      </div>
+      <div style="display: flex; flex-direction: row">
+        <div style="width: 120px">Average:</div>
+        <div style="flex-grow: 1">${this.generateMiniGraphBar(this.aard.timer.average)}</div>
+      </div>
+      <div style="display: flex; flex-direction: row">
+        <div style="width: 120px">Last chg.:</div><div style="flex-grow: 1">${this.generateMiniGraphBar(this.aard.timer.lastChange)}</div>
+      </div>
+    `;
+
+    const popupContent = `
+      <h2 style="color: #fa6; margin-bottom: 1rem">Detailed performance analysis:</h2>
+      <div style="width: 100%; display: flex; flex-direction: column">
+        <div style="margin-bottom: 1rem;">
+          <span style="color: #fff">Raw times (cumulative; -1 = test was skipped):</span><br/>
+          draw        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.draw.toFixed(2)}ms</span>
+          get data    <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.getImage.toFixed(2)}ms</span>
+          black lv.   <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.fastBlackLevel.toFixed(2)}ms</span>
+          guard/image <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.guardLine.toFixed(3)}ms</span>
+          edge        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.edgeScan.toFixed(2)}ms</span>
+          gradient    <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.gradient.toFixed(3)}ms</span>
+          post        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.current.scanResults.toFixed(2)}ms</span>
+        </div>
+        <div style="color: #fff">Stage times (not cumulative):</div>
+        <div style="display: flex; flex-direction: row; width: 100%; height: 150px">
+          <div style="width: 160px; text-align: right; padding-right: 4px;">Current:</div>
+          <div style="flex-grow: 1;">${this.generateMiniGraphBar(this.aard.timer.current, true)}</div>
+        </div>
+
+        <div style="margin-bottom: 1rem;">
+          <span style="color: #fff">Raw times (cumulative; -1 = test was skipped):</span><br/>
+          draw        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.draw.toFixed(2)}ms</span>
+          get data    <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.getImage.toFixed(2)}ms</span>
+          black lv.   <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.fastBlackLevel.toFixed(2)}ms</span>
+          guard/image <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.guardLine.toFixed(3)}ms</span>
+          edge        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.edgeScan.toFixed(2)}ms</span>
+          gradient    <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.gradient.toFixed(3)}ms</span>
+          post        <span style="color: #fa6; margin-right: 0.5rem;">${this.aard.timer.average.scanResults.toFixed(2)}ms</span>
+        </div>
+        <div style="color: #fff">Stage times (not cumulative):</div>
+        <div style="display: flex; flex-direction: row; width: 100%; height: 150px">
+          <div style="width: 160px; text-align: right; padding-right: 4px;">Average:</div>
+          <div style="flex-grow: 1;">${this.generateMiniGraphBar(this.aard.timer.average, true)}</div>
+        </div>
+
+        <div style="display: flex; flex-direction: row; width: 100%; height: 150px">
+          <div style="width: 160px; text-align: right; padding-right: 4px;">Last change:</div>
+          <div style="flex-grow: 1;">${this.generateMiniGraphBar(this.aard.timer.lastChange, true)}</div>
+        </div>
+      </div>
+    `
+
+    previewDiv.innerHTML = previewContent;
+    popupDiv.innerHTML = popupContent;
+  }
+
+  private getBarLabel(width: number, leftOffset: number, topOffset: number, label: string, detailed: boolean, extraStyles?: string) {
+    if (!detailed) {
+      return '';
+    }
+
+    let offsets: string;
+    let text: string = '';
+
+    if (leftOffset + width < 80) {
+      // at the end of the bar
+      offsets = `left: ${leftOffset + width}%;`;
+    } else {
+      if (width < 15 && leftOffset < 100) {
+        // before the bar
+        offsets = `right: ${100 - leftOffset}%;`;
+        text = 'color: #fff;';
+      } else {
+        // inside the bar, aligned to right
+        offsets = `right: ${Math.max(100 - (leftOffset + width), 0)}%;`
+      }
+    }
+
+    return `
+      <div style="
+        position: absolute;
+        ${offsets} top: ${topOffset}px;
+        padding-left: 0.5rem; padding-right: 0.5rem;đ
+        ${text}
+        text-shadow: 0 0 2px #000, 0 0 2px #000; 0 0 2px #000; 0 0 2px #000;
+        ${extraStyles}
+      ">
+        ${label}
+      </div>
+    `;
+  }
+
+  private generateMiniGraphBar(perf: AardPerformanceData, detailed: boolean = false) {
+    if (!perf) {
+      return `
+        n/a
+      `;
+    }
+
+    let total = 0;
+
+    const draw = Math.max(perf.draw, 0);
+    total += draw;
+
+    const getImageStart = draw;
+    const getImage = Math.max(perf.getImage - total, 0);
+    total += getImage;
+
+    const fastBlackLevelStart = getImageStart + getImage;
+    const fastBlackLevel = Math.max(perf.fastBlackLevel - total, 0);
+    total += fastBlackLevel;
+
+    const guardLineStart = fastBlackLevelStart + fastBlackLevel;
+    const guardLine = Math.max(perf.guardLine - total, 0);
+    total += guardLine;
+
+    const edgeScanStart = guardLineStart + guardLine;
+    const edgeScan = Math.max(perf.edgeScan - total, 0);
+    total += edgeScan;
+
+    const gradientStart = edgeScanStart + edgeScan;
+    const gradient = Math.max(perf.gradient - total, 0);
+    total += gradient;
+
+    const scanResultsStart = gradientStart + gradient;
+    const scanResults = Math.max(perf.scanResults - total, 0);
+    total += scanResults;
+
+    return `
+      <div style="width: 100%; position: relative; text-align: right;">
+        ${detailed ? '' : `${total.toFixed()} ms`}
+        <div style="position: absolute; top: 0; left: 0; width: ${total}%; background: #fff; height: 2px;"></div>
+        ${detailed ? `<div style="position: absolute; top: 0; left: ${total}%; height: 100px; width: 1px; border-left: 1px dotted rgba(255,255,255,0.5)"></div> ` : ''}
+
+        <div style="position: absolute; top: ${detailed ? '2px'  : '2px'}; left: 0; min-width: 1px; width: ${draw}%; background: #007; height: 12px;"></div>
+        ${this.getBarLabel(draw, 0, 2, `draw: ${draw.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '14px' : '2px'}; left: ${getImageStart}%; min-width: 1px; width: ${getImage}%; background: #00a; height: 12px;"></div>
+        ${this.getBarLabel(getImage, getImageStart, 14, `get data: ${getImage.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '26px' : '2px'}; left: ${fastBlackLevelStart}%; min-width: 1px; width: ${fastBlackLevel}%; background: #03a; height: 12px;"></div>
+        ${this.getBarLabel(fastBlackLevel, fastBlackLevelStart, 26, `black level: ${fastBlackLevel.toFixed(2)} ms`, detailed)};
+
+        <div style="position: absolute; top: ${detailed ? '38px' : '2px'}; left: ${guardLineStart}%; min-width: 1px; width: ${guardLine}%; background: #0f3; height: 12px;"></div>
+        ${this.getBarLabel(guardLine, guardLineStart, 38, `guard/image line: ${guardLine.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '50px' : '2px'}; left: ${edgeScanStart}%; min-width: 1px; width: ${edgeScan}%; background: #f51; height: 12px;"></div>
+        ${this.getBarLabel(edgeScan, edgeScanStart, 50, `edge scan (/w validation): ${edgeScan.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '62px' : '2px'}; left: ${gradientStart}%; min-width: 1px; width: ${gradient}%; background: #fa6; height: 12px;"></div>
+        ${this.getBarLabel(gradient, gradientStart, 62, `gradient: ${gradient.toFixed(2)} ms`, detailed)}
+
+        <div style="position: absolute; top: ${detailed ? '74px' : '2px'}; left: ${scanResultsStart}%; min-width: 1px; width: ${scanResults}%; background: #80f; height: 12px;"></div>
+        ${this.getBarLabel(scanResults, scanResultsStart, 74, `scan results processing: ${scanResults.toFixed(2)} ms`, detailed)}
+
+        ${this.getBarLabel(0, scanResults + scanResultsStart, 88, `total: ${total.toFixed(2)} ms`, detailed, 'color: #fff;')}
+
+        <!-- 60/30 fps markers -->
+        <div style="position: absolute; top: ${detailed ? '-12px' : '0'}; left: 16.666%; width: 1px; border-left: 1px dashed #4f9; height: ${detailed ? '112px' : '12px'}; padding-left: 2px; background-color: rgba(0,0,0,0.5); z-index: ${detailed ? '5' : '2'}000;">60fps</div>
+        <div style="position: absolute; top: ${detailed ? '-12px' : '0'}; left: 33.333%; width: 1px; border-left: 1px dashed #ff0; height: ${detailed ? '112px' : '12px'}; padding-left: 2px; background-color: #000; z-index: ${detailed ? '5' : '2'}000;">30fps</div>
+      </div>
+    `;
+  }
+
   updateTestResults(testResults) {
+    this.updatePerformanceResults();
+
     if (testResults.aspectRatioUpdated && this.pauseOnArCheck) {
       (this.aard as any).video.pause();
       this.aard.stop();

src/ext/lib/aard/AardTimers.ts

@@ -0,0 +1,110 @@
+export interface AardPerformanceData {
+  start: number;
+  draw: number;
+  getImage: number;
+
+  fastBlackLevel: number;
+  guardLine: number; // actually times both guard line and image line checks
+  edgeScan: number; // includes validation step
+  gradient: number;
+  scanResults: number;
+}
+
+
+export class AardTimer {
+  private currentIndex: number = -1;
+
+  private aardPerformanceDataBuffer: AardPerformanceData[];
+
+  current: AardPerformanceData;
+  previous: AardPerformanceData;
+  average: AardPerformanceData;
+  lastChange: AardPerformanceData;
+
+
+  constructor() {
+    this.aardPerformanceDataBuffer = new Array<AardPerformanceData>(16).fill(this.getEmptyMeasurement());
+    this.current = this.aardPerformanceDataBuffer[0];
+    this.previous = undefined;
+    this.lastChange = this.getEmptyMeasurement();
+    this.average = this.getEmptyMeasurement();
+  }
+
+  private getEmptyMeasurement(): AardPerformanceData {
+    return {
+      start: -1,
+      draw: -1,
+      getImage: -1,
+      fastBlackLevel: -1,
+      guardLine: -1,
+      edgeScan: -1,
+      gradient: -1,
+      scanResults: -1
+    }
+  };
+
+  private clearMeasurement(index: number) {
+    this.aardPerformanceDataBuffer[index].draw = -1;
+    this.aardPerformanceDataBuffer[index].getImage = -1;
+    this.aardPerformanceDataBuffer[index].fastBlackLevel = -1;
+    this.aardPerformanceDataBuffer[index].guardLine = -1;
+    this.aardPerformanceDataBuffer[index].edgeScan = -1;
+    this.aardPerformanceDataBuffer[index].gradient = -1;
+    this.aardPerformanceDataBuffer[index].scanResults = -1;
+  }
+
+  next() {
+    // go to next buffer position;
+    this.currentIndex = (this.currentIndex + 1) % this.aardPerformanceDataBuffer.length;
+    this.previous = this.current;
+    this.clearMeasurement(this.currentIndex);
+
+    // TODO: reset values
+    this.current = this.aardPerformanceDataBuffer[this.currentIndex];
+  }
+
+  arChanged() { // copy numbers over
+    this.lastChange.draw = this.current.draw;
+    this.lastChange.getImage = this.current.getImage;
+    this.lastChange.fastBlackLevel = this.current.fastBlackLevel;
+    this.lastChange.guardLine = this.current.guardLine;
+    this.lastChange.edgeScan = this.current.edgeScan;
+    this.lastChange.gradient = this.current.gradient;
+    this.lastChange.scanResults = this.current.scanResults;
+  }
+
+  getAverage() {
+    for (let i = 0; i < this.aardPerformanceDataBuffer.length; i++) {
+      const sample = this.aardPerformanceDataBuffer[i];
+      if (sample.draw !== -1) {
+        this.average.draw += sample.draw;
+      }
+      if (sample.getImage !== -1) {
+        this.average.getImage += sample.getImage;
+      }
+      if (sample.fastBlackLevel !== -1) {
+        this.average.fastBlackLevel += sample.fastBlackLevel;
+      }
+      if (sample.guardLine !== -1) {
+        this.average.guardLine += sample.guardLine;
+      }
+      if (sample.edgeScan !== -1) {
+        this.average.edgeScan += sample.edgeScan;
+      }
+      if (sample.gradient !== -1) {
+        this.average.gradient += sample.gradient;
+      }
+      if (sample.scanResults !== -1) {
+        this.average.scanResults += sample.scanResults;
+      }
+    }
+
+    this.average.draw /= this.aardPerformanceDataBuffer.length;
+    this.average.getImage /= this.aardPerformanceDataBuffer.length;
+    this.average.fastBlackLevel /= this.aardPerformanceDataBuffer.length;
+    this.average.guardLine /= this.aardPerformanceDataBuffer.length;
+    this.average.edgeScan /= this.aardPerformanceDataBuffer.length;
+    this.average.gradient /= this.aardPerformanceDataBuffer.length;
+    this.average.scanResults /= this.aardPerformanceDataBuffer.length;
+  }
+}