Fix rendering patterns in Firefox

src/helpers/fixFirefoxSvg.ts

@@ -0,0 +1,16 @@
+/*
+ * https://github.com/morethanwords/tweb
+ * Copyright (C) 2019-2021 Eduard Kuzmenko
+ * https://github.com/morethanwords/tweb/blob/master/LICENSE
+ */
+
+export default function fixFirefoxSvg(text: string) {
+  const svgIndex = text.indexOf('<svg');
+  if(svgIndex !== 0) {
+    text = text.slice(svgIndex);
+  }
+
+  const [_, __, width, height] = text.match(/viewBox="(.+?)"/)[1].split(' ');
+  text = text.replace(/>/, ` width="${width}" height="${height}">`).replace(/[^\x00-\x7F]/g, '');
+  return text;
+}

src/lib/appManagers/appImManager.ts

@@ -37,7 +37,7 @@ import appDraftsManager from './appDraftsManager';
 import serverTimeManager from '../mtproto/serverTimeManager';
 import stateStorage from '../stateStorage';
 import appDownloadManager from './appDownloadManager';
-import { AppStateManager, STATE_INIT } from './appStateManager';
+import appStateManager, { AppStateManager, STATE_INIT } from './appStateManager';
 import { MOUNT_CLASS_TO } from '../../config/debug';
 import appNavigationController from '../../components/appNavigationController';
 import appNotificationsManager from './appNotificationsManager';
@@ -90,6 +90,8 @@ import type GroupCallInstance from '../calls/groupCallInstance';
 import type CallInstance from '../calls/callInstance';
 import numberThousandSplitter from '../../helpers/number/numberThousandSplitter';
 import ChatBackgroundPatternRenderer from '../../components/chat/patternRenderer';
+import { IS_FIREFOX } from '../../environment/userAgent';
+import compareVersion from '../../helpers/compareVersion';
 
 //console.log('appImManager included33!');
 
@@ -158,7 +160,7 @@ export class AppImManager {
     this.backgroundPromises = {};
     STATE_INIT.settings.themes.forEach(theme => {
       if(theme.background.slug) {
-        const url = /* window.location.origin + window.location.pathname +  */'assets/img/' + theme.background.slug + '.svg';
+        const url = 'assets/img/' + theme.background.slug + '.svg' + (IS_FIREFOX ? '?1' : '');
         this.backgroundPromises[theme.background.slug] = Promise.resolve(url);
       }
     });
@@ -221,9 +223,15 @@ export class AppImManager {
       animationIntersector.checkAnimations(false);
     });
 
-    // setTimeout(() => {
+    if(IS_FIREFOX && appStateManager.oldVersion && compareVersion(appStateManager.oldVersion, '1.4.3') === -1) {
+      this.deleteFilesIterative((response) => {
+        return response.headers.get('Content-Type') === 'image/svg+xml';
+      }).then(() => {
         this.applyCurrentTheme();
-    // }, 0);
+      });
+    } else {
+      this.applyCurrentTheme();
+    }
 
     // * fix simultaneous opened both sidebars, can happen when floating sidebar is opened with left sidebar
     mediaSizes.addEventListener('changeScreen', (from, to) => {
@@ -629,6 +637,34 @@ export class AppImManager {
     this.attachKeydownListener();
   }
 
+  private deleteFilesIterative(callback: (response: Response) => boolean) {
+    return appDownloadManager.cacheStorage.timeoutOperation((cache) => {
+      const perf = performance.now();
+      return cache.keys().then((requests) => {
+        const promises = requests.map((request) => {
+          return cache.match(request).then((response) => {
+            return callback(response);
+          });
+        });
+
+        return Promise.all(promises).then((values) => {
+          values.map((isBad, idx) => {
+            if(!isBad) {
+              return;
+            }
+
+            const request = requests[idx];
+            return cache.delete(request);
+          });
+
+          return Promise.all(values.filter(Boolean));
+        });
+      }).then(() => {
+        this.log('deleted files', performance.now() - perf);
+      });
+    });
+  }
+
   private toggleChatGradientAnimation(activatingChat: Chat) {
     this.chats.forEach(chat => {
       if(chat.gradientRenderer) {
@@ -1110,7 +1146,7 @@ export class AppImManager {
     next();
   };
 
-  public setCurrentBackground(broadcastEvent = false) {
+  public setCurrentBackground(broadcastEvent = false): ReturnType<AppImManager['setBackground']> {
     const theme = rootScope.getTheme();
 
     if(theme.background.slug) {
@@ -1123,7 +1159,7 @@ export class AppImManager {
           return this.setBackground(url, broadcastEvent);
         }, () => { // * if NO_ENTRY_FOUND
           theme.background = copy(defaultTheme.background); // * reset background
-          return this.setBackground('', true);
+          return this.setCurrentBackground(true);
         });
       // }
     }

src/lib/appManagers/appStateManager.ts

@@ -295,6 +295,7 @@ export class AppStateManager extends EventListenerBase<{
   public storage = stateStorage;
 
   public newVersion: string;
+  public oldVersion: string;
 
   constructor() {
     super();
@@ -580,6 +581,7 @@ export class AppStateManager extends EventListenerBase<{
           
           if(compareVersion(state.version, STATE_VERSION) !== 0) {
             this.newVersion = STATE_VERSION;
+            this.oldVersion = state.version;
           }
 
           this.pushToState('version', STATE_VERSION);

src/lib/mtproto/apiFileManager.ts

@@ -30,6 +30,8 @@ import noop from "../../helpers/noop";
 import readBlobAsArrayBuffer from "../../helpers/blob/readBlobAsArrayBuffer";
 import bytesToHex from "../../helpers/bytes/bytesToHex";
 import findAndSplice from "../../helpers/array/findAndSplice";
+import { IS_FIREFOX } from "../../environment/userAgent";
+import fixFirefoxSvg from "../../helpers/fixFirefoxSvg";
 
 type Delayed = {
   offset: number, 
@@ -278,7 +280,17 @@ export class ApiFileManager {
   private uncompressTGV = (bytes: Uint8Array, fileName: string) => {
     //this.log('uncompressTGS', bytes, bytes.slice().buffer);
     // slice нужен потому что в uint8array - 5053 length, в arraybuffer - 5084
-    return cryptoWorker.invokeCrypto('gzipUncompress', bytes.slice().buffer, false) as Promise<Uint8Array>;
+    const buffer = bytes.slice().buffer;
+    if(IS_FIREFOX) {
+      return cryptoWorker.invokeCrypto('gzipUncompress', buffer, true).then((text) => {
+        return fixFirefoxSvg(text as string);
+      }).then((text) => {
+        const textEncoder = new TextEncoder();
+        return textEncoder.encode(text);
+      });
+    }
+
+    return cryptoWorker.invokeCrypto('gzipUncompress', buffer, false) as Promise<Uint8Array>;
   };
 
   private convertWebp = (bytes: Uint8Array, fileName: string) => {