ANGLE popup

src/ext/lib/angle-detect/detect-angle-backend.ts

@@ -85,7 +85,7 @@ function detectBackend(str) {
  * Known limitations: D11on12 cannot be detected.
  * @returns
  */
-function detectANGLEBackend(): AngleVersion {
+export function detectANGLEBackend(): AngleVersion {
   const canvas = document.createElement("canvas");
   const gl = canvas.getContext("webgl2") ||
     canvas.getContext("webgl") ||
@@ -112,7 +112,8 @@ function detectANGLEBackend(): AngleVersion {
   (gl as any).compileShader(shader);
 
   if (!(gl as any).getShaderParameter(shader, (gl as any).COMPILE_STATUS)) {
-    return console.error("invalid shader", (gl as any).getShaderInfoLog(shader));
+    console.error("invalid shader", (gl as any).getShaderInfoLog(shader));
+    return AngleVersion.NotAvailable;
   }
 
   const source = ext.getTranslatedShaderSource(shader);

src/popup/App.vue

@@ -20,6 +20,16 @@
         Build channel: {{BrowserDetect.processEnvChannel}}
       </div>
     </div>
+    <!-- ANGLE warning for chrome/edge -->
+    <div v-if="warnings.angleBackend" class="flex flex-column">
+      <div class="warning-lite">
+        <b style="padding-left: 0.5rem">Hardware acceleration in <template v-if="BrowserDetect.edge">Edge</template><template v-else>Chrome</template> is broken</b><br/>
+      <small> This causes videos to be stretched incorrectly.
+        This is a bug with <template v-if="BrowserDetect.edge">Edge</template><template v-else>Chrome</template>, not with this addon.</small><br/>
+        To fix the problem, visit <code style="background-color: rgba(255,128,64, 0.2)"><template v-if="BrowserDetect.edge">edge</template><template v-else>chrome</template>://flags#use-angle</code> and choose <b>D3D9</b> or <b>OpenGL</b> from available options.
+      </div>
+    </div>
+
     <div
       v-if="narrowPopup"
       class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
@@ -212,9 +222,13 @@ import ExtensionMode from '../common/enums/ExtensionMode.enum';
 import Logger from '../ext/lib/Logger';
 import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
 import { browser } from 'webextension-polyfill-ts';
+import { detectANGLEBackend, AngleVersion } from '../ext/lib/angle-detect/detect-angle-backend';
 
 export default {
   data () {
+    const angleBackend = detectANGLEBackend();
+    const gibAngleWarning = BrowserDetect.anyChromium && angleBackend !== AngleVersion.OpenGL && angleBackend !== AngleVersion.D3D9;
+
     return {
       selectedTab: 'video',
       selectedFrame: '__all',
@@ -238,6 +252,9 @@ export default {
       BrowserDetect: BrowserDetect,
       narrowPopup: null,
       sideMenuVisible: null,
+      warnings: {
+        angleBackend: gibAngleWarning
+      }
     }
   },
   async created() {