Merge pull request #355 from Eniola3321/Browser

feat:  Browser Compatibility

Author: Mystery-CLI

frontend/compat.js

@@ -11,6 +11,8 @@
   var ua = navigator.userAgent;
 
   var browser = (function () {
+    var isBrave = !!(navigator.brave && typeof navigator.brave.isBrave === 'function');
+    if (isBrave)              return { name: 'Brave',   version: (ua.match(/Chrome\/([\d.]+)/) || [])[1] };
     if (/Edg\//.test(ua))     return { name: 'Edge',    version: (ua.match(/Edg\/([\d.]+)/)    || [])[1] };
     if (/OPR\//.test(ua))     return { name: 'Opera',   version: (ua.match(/OPR\/([\d.]+)/)    || [])[1] };
     if (/Chrome\//.test(ua))  return { name: 'Chrome',  version: (ua.match(/Chrome\/([\d.]+)/) || [])[1] };
@@ -21,12 +23,14 @@
   })();
 
   // Minimum supported versions
-  var MIN_VERSIONS = { Chrome: 90, Firefox: 88, Safari: 14, Edge: 90, Opera: 76 };
+  var MIN_VERSIONS = { Chrome: 90, Firefox: 88, Safari: 14, Edge: 90, Opera: 76, Brave: 90 };
 
   var majorVersion = parseInt((browser.version || '0').split('.')[0], 10);
   var isSupported   = browser.name !== 'IE' &&
                       (!(browser.name in MIN_VERSIONS) || majorVersion >= MIN_VERSIONS[browser.name]);
   var isIE          = browser.name === 'IE';
+  var isSafari      = browser.name === 'Safari';
+  var isMobileSafari = /iPhone|iPad|iPod/.test(ua);
 
   // ---------------------------------------------------------------------------
   // Feature detection
@@ -50,6 +54,9 @@
     clipboard:        !!(navigator.clipboard && navigator.clipboard.writeText),
     notifications:    typeof Notification !== 'undefined',
     serviceWorker:    'serviceWorker' in navigator,
+    abortController:  typeof AbortController !== 'undefined',
+    promiseAllSettled:typeof Promise.allSettled !== 'undefined',
+    stringReplaceAll: typeof String.prototype.replaceAll !== 'undefined',
   };
 
   // ---------------------------------------------------------------------------
@@ -120,6 +127,40 @@
     window.cancelAnimationFrame = clearTimeout;
   }
 
+  // Promise.allSettled
+  if (!features.promiseAllSettled) {
+    Promise.allSettled = function (promises) {
+      return Promise.all(promises.map(function (p) {
+        return Promise.resolve(p).then(
+          function (val) { return { status: 'fulfilled', value: val }; },
+          function (err) { return { status: 'rejected', reason: err }; }
+        );
+      }));
+    };
+  }
+
+  // AbortController (basic polyfill)
+  if (!features.abortController) {
+    function AbortSignal() { this.aborted = false; this.onabort = null; }
+    function AbortController() { this.signal = new AbortSignal(); }
+    AbortController.prototype.abort = function () {
+      this.signal.aborted = true;
+      if (typeof this.signal.onabort === 'function') this.signal.onabort();
+    };
+    window.AbortController = AbortController;
+    window.AbortSignal = AbortSignal;
+  }
+
+  // String.prototype.replaceAll
+  if (!features.stringReplaceAll) {
+    String.prototype.replaceAll = function (search, replacement) {
+      if (search instanceof RegExp && !search.global) {
+        throw new TypeError('replaceAll must be called with a global RegExp');
+      }
+      return this.split(search).join(replacement);
+    };
+  }
+
   // ---------------------------------------------------------------------------
   // CSS fallbacks for browsers without custom properties
   // ---------------------------------------------------------------------------
@@ -190,14 +231,43 @@
     );
   }
 
+  if (!features.localStorage) {
+    showWarning(
+      'LocalStorage is disabled or not supported. This might be due to Private Browsing mode. ' +
+      'Settings and session data will not be saved.',
+      'compat-storage-warning'
+    );
+  }
+
   // ---------------------------------------------------------------------------
   // Browser-specific fixes
   // ---------------------------------------------------------------------------
 
+  // Safari: 100vh height fix for mobile
+  if (isMobileSafari) {
+    var setVH = function () {
+      var vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty('--vh', vh + 'px');
+    };
+    window.addEventListener('resize', setVH);
+    setVH();
+  }
+
+  // Chrome / Edge / Brave: custom scrollbar styling if supported
+  var isChromium = /Chrome/.test(browser.name) || /Edge/.test(browser.name) || /Brave/.test(browser.name);
+  if (isChromium) {
+    var scrollStyle = document.createElement('style');
+    scrollStyle.textContent = [
+      '::-webkit-scrollbar{width:8px;height:8px}',
+      '::-webkit-scrollbar-track{background:#1a1a2e}',
+      '::-webkit-scrollbar-thumb{background:#4b4b7c;border-radius:4px}',
+      '::-webkit-scrollbar-thumb:hover{background:#6366f1}',
+    ].join('');
+    document.head.appendChild(scrollStyle);
+  }
+
   // Safari: passive touch-event listeners to avoid scroll-blocking warnings
   // and fix 300ms tap delay on older iOS Safari (< 13).
-  var isSafari = browser.name === 'Safari';
-  var isMobileSafari = /iPhone|iPad|iPod/.test(ua);
   if (isSafari || isMobileSafari) {
     // Ensure touch-action is set so iOS Safari doesn't delay click events
     var safariStyle = document.createElement('style');
@@ -275,9 +345,14 @@
     fixes: {
       safariTouchAction:    isSafari || isMobileSafari,
       iosTouchMove:         isMobileSafari,
+      safariVHFix:          isMobileSafari,
+      chromiumScrollbars:   isChromium,
       firefoxFocusVisible:  firefoxMajor < 85,
       safariSmoothScroll:   safariMajor < 15,
       dialogPolyfill:       typeof HTMLDialogElement === 'undefined',
+      abortController:      !features.abortController,
+      promiseAllSettled:    !features.promiseAllSettled,
+      stringReplaceAll:     !features.stringReplaceAll,
     },
   };
 

frontend/tests/compat.test.js

@@ -22,6 +22,10 @@ describe('Browser detection', () => {
 
   afterEach(() => {
     Object.defineProperty(navigator, 'userAgent', { value: originalUA, configurable: true });
+    // Reset navigator.brave
+    if (navigator.brave) {
+      delete navigator.brave;
+    }
   });
 
   test('detects Chrome', () => {
@@ -34,6 +38,20 @@ describe('Browser detection', () => {
     expect(parseInt(window.StellarCompat.browser.version)).toBeGreaterThanOrEqual(90);
   });
 
+  test('detects Brave', () => {
+    Object.defineProperty(navigator, 'userAgent', {
+      value: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36',
+      configurable: true,
+    });
+    // Stub navigator.brave
+    Object.defineProperty(navigator, 'brave', {
+      value: { isBrave: () => Promise.resolve(true) },
+      configurable: true,
+    });
+    loadCompat();
+    expect(window.StellarCompat.browser.name).toBe('Brave');
+  });
+
   test('detects Firefox', () => {
     Object.defineProperty(navigator, 'userAgent', {
       value: 'Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/109.0',
@@ -113,6 +131,22 @@ describe('Polyfills', () => {
     loadCompat();
     expect(typeof window.requestAnimationFrame).toBe('function');
   });
+
+  test('Promise.allSettled is defined after load', () => {
+    loadCompat();
+    expect(typeof Promise.allSettled).toBe('function');
+  });
+
+  test('AbortController is defined after load', () => {
+    loadCompat();
+    expect(typeof window.AbortController).toBe('function');
+    expect(typeof window.AbortSignal).toBe('function');
+  });
+
+  test('String.prototype.replaceAll is defined after load', () => {
+    loadCompat();
+    expect(typeof String.prototype.replaceAll).toBe('function');
+  });
 });
 
 describe('Browser-specific fixes', () => {
@@ -136,6 +170,16 @@ describe('Browser-specific fixes', () => {
     expect(typeof window.StellarCompat.fixes.safariSmoothScroll).toBe('boolean');
   });
 
+  test('fixes.safariVHFix is a boolean', () => {
+    loadCompat();
+    expect(typeof window.StellarCompat.fixes.safariVHFix).toBe('boolean');
+  });
+
+  test('fixes.chromiumScrollbars is a boolean', () => {
+    loadCompat();
+    expect(typeof window.StellarCompat.fixes.chromiumScrollbars).toBe('boolean');
+  });
+
   test('fixes.dialogPolyfill is a boolean', () => {
     loadCompat();
     expect(typeof window.StellarCompat.fixes.dialogPolyfill).toBe('boolean');
@@ -215,4 +259,26 @@ describe('Compatibility warnings', () => {
     btn.click();
     expect(document.getElementById('compat-ie-warning')).toBeNull();
   });
+
+  test('shows warning when localStorage is disabled', () => {
+    // Mock localStorage to fail completely
+    const originalLS = window.localStorage;
+    Object.defineProperty(window, 'localStorage', {
+      value: {
+        setItem: () => { throw new Error('SecurityError'); },
+        removeItem: () => {},
+        getItem: () => null
+      },
+      configurable: true
+    });
+    
+    loadCompat();
+    expect(document.getElementById('compat-storage-warning')).not.toBeNull();
+    
+    // Restore
+    Object.defineProperty(window, 'localStorage', {
+      value: originalLS,
+      configurable: true
+    });
+  });
 });