Fix #7: wouldn't work in Waterfox Classic 2019.10*

* Included Promise and Shadow DOM polyfills would prevent the content script from working.

See #7

.babelrc.js

@@ -8,6 +8,10 @@ module.exports = {
         debug: modeDevelopment,
         useBuiltIns: 'usage',
         corejs: 3,
+        exclude: [
+          'es.promise',
+          'es.promise.finally',
+        ],
       },
     ],
   ],

.browserslistrc

@@ -1,2 +1,3 @@
 # Chrome v49 is the last version supported on Windows XP and Mac OS X Snow Leopard
 Chrome > 48
+Firefox > 55

package.json

@@ -38,8 +38,8 @@
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/plugin-proposal-private-methods": "^7.7.4",
     "@babel/preset-env": "^7.7.4",
+    "@poziworld/custom-elements": "^1.3.2",
     "@poziworld/cypress-browser-extension-plugin": "^0.2.1",
-    "@webcomponents/webcomponentsjs": "^2.4.0",
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.5.2",

src/content-scripts/button/elements.js

@@ -55,10 +55,20 @@ function createContainer( buttonLocation ) {
   container.setAttribute( 'data-position-vertical', position.vertical );
   container.setAttribute( 'data-position-horizontal', position.horizontal );
 
-  // Avoid CSS collisions when websites define styles for [role="button"] or even <scroll-to-top-button>
-  containerShadow = container.attachShadow( {
-    mode: 'open',
-  } );
+  if ( utils.canUseShadowDom() ) {
+    try {
+      // Avoid CSS collisions when websites define styles for [role="button"] or even <scroll-to-top-button>
+      containerShadow = container.attachShadow( {
+        mode: 'open',
+      } );
+    }
+    catch ( error ) {
+      // @todo Shouldn't be a case?
+    }
+  }
+  else {
+    containerShadow = container;
+  }
 }
 
 /**

src/loaders/manifest-loader.js

@@ -6,6 +6,7 @@ const { mergeDeep } = require( 'immutable' );
  * https://nodejs.org/api/fs.html#fs_fs_readfilesync_path_options
  */
 
+// @todo Make dynamic.
 const PACKAGE_JSON_PATH = './package.json';
 const PACKAGE_JSON_ENCODING = 'utf8';
 
@@ -17,6 +18,7 @@ const PACKAGE_JSON_ENCODING = 'utf8';
  * @type {string}
  */
 
+// @todo Make dynamic.
 const OPTIONS_PAGE_PATH = 'options/index.html';
 
 /**
@@ -25,6 +27,7 @@ const OPTIONS_PAGE_PATH = 'options/index.html';
  * @type {string}
  */
 
+// @todo Make dynamic.
 const EXTENSION_ID_AFFIX = '@poziworld.com';
 
 module.exports = loadManifestJson;
@@ -124,7 +127,7 @@ function makeChromiumSpecificManifestJson( manifestJsonAsJs, packageJsonAsJs, ne
  */
 
 function makeFirefoxSpecificManifestJson( manifestJsonAsJs, packageJsonAsJs, newProperties ) {
-  newProperties.applications = {
+  newProperties.browser_specific_settings = {
     gecko: {
       id: packageJsonAsJs.name + EXTENSION_ID_AFFIX,
     }
@@ -136,6 +139,16 @@ function makeFirefoxSpecificManifestJson( manifestJsonAsJs, packageJsonAsJs, new
 
   delete manifestJsonAsJs.version_name;
 
+  // @todo Make dynamic.
+  const browserList = fs.readFileSync( path.resolve( __dirname, '..', '..', '.browserslistrc' ), PACKAGE_JSON_ENCODING );
+  // @todo Make dynamic.
+  const minVersionMinusOne = browserList.match( /(firefox > )([0-9]{2,})/gi );
+
+  if ( minVersionMinusOne ) {
+    // @todo Optimize.
+    newProperties.browser_specific_settings.gecko.strict_min_version = ( Number( minVersionMinusOne[ 0 ].match( /[0-9]{2,}/g )[ 0 ] ) + 1 ).toString();
+  }
+
   return combineProperties( manifestJsonAsJs, newProperties );
 }
 

src/shared/elements/index.js

@@ -1,5 +1,6 @@
-import '@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce';
+import '@poziworld/custom-elements';
 
+import utils from 'Shared/utils';
 import { ScrollToTopButtonContainer } from './scroll-to-top-button-container';
 import { ScrollToTopButton } from './scroll-to-top-button';
 
@@ -19,6 +20,15 @@ export function setUp() {
  */
 
 function define() {
-  customElements.define( CONTAINER_TAG_NAME, ScrollToTopButtonContainer );
-  customElements.define( BUTTON_TAG_NAME, ScrollToTopButton );
+  if ( utils.canUseCustomElements() ) {
+    try {
+      const customElements = window.customElements;
+
+      customElements.define( CONTAINER_TAG_NAME, ScrollToTopButtonContainer );
+      customElements.define( BUTTON_TAG_NAME, ScrollToTopButton );
+    }
+    catch ( error ) {
+      // @todo Shouldn't be a case?
+    }
+  }
 }

src/shared/elements/scroll-to-top-button.js

@@ -122,9 +122,16 @@ export class ScrollToTopButton extends HTMLElement {
    */
 
   #createShadowRoot() {
-    this.#shadow = this.attachShadow( {
-      mode: 'closed',
-    } );
+    if ( utils.canUseShadowDom() ) {
+      try {
+        this.#shadow = this.attachShadow( {
+          mode: 'closed',
+        } );
+      }
+      catch ( error ) {
+        // @todo Shouldn't be a case?
+      }
+    }
   }
 
   /**
@@ -201,7 +208,7 @@ export class ScrollToTopButton extends HTMLElement {
     link.href = utils.getUrl( this.#CSS_PATH );
     link.addEventListener( 'load', resolve );
 
-    this.#shadow.append( link );
+    this.#appendToShadow( link );
   };
 
   /**
@@ -320,7 +327,7 @@ export class ScrollToTopButton extends HTMLElement {
    */
 
   #setButtonImage = () => {
-    this.#shadow.append( this.#image );
+    this.#appendToShadow( this.#image );
   };
 
   /**
@@ -351,4 +358,24 @@ export class ScrollToTopButton extends HTMLElement {
       } ) );
     }
   }
+
+  /**
+   * Shadow DOM is not supported in old browsers, so they may experience CSS collisions.
+   *
+   * @param {HTMLElement} element
+   */
+
+  #appendToShadow( element ) {
+    if ( utils.canUseShadowDom() ) {
+      try {
+        this.#shadow.append( element );
+      }
+      catch ( error ) {
+        // @todo Shouldn't be a case?
+      }
+    }
+    else {
+      this.append( element );
+    }
+  }
 }

src/shared/utils/dom.js

@@ -12,3 +12,27 @@ export function getDocumentFragment( markup ) {
     RETURN_DOM_FRAGMENT: true,
   } );
 }
+
+/**
+ * Determine whether custom elements are supported.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements}
+ *
+ * @return {boolean}
+ */
+
+export function canUseCustomElements() {
+  return Boolean( window.customElements );
+}
+
+/**
+ * Determine whether the shadow DOM is supported.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM}
+ *
+ * @return {boolean}
+ */
+
+export function canUseShadowDom() {
+  return Boolean( window.document.body.attachShadow );
+}