Handle situations where BroadcastChannel is unsupported better

Mark all changes as requiring a reload
Hide broken reload button

src/addons/channels.js

@@ -1,23 +1,11 @@
-import EventTargetShim from './event-target';
+let changeChannel;
+let reloadChannel;
 
-// Legacy Edge does not support BroadcastChannel.
-// We only bother checking to make sure nothing errors. Users should update their browser if they want things to work.
-let _BroadcastChannel = window.BroadcastChannel;
-if (!_BroadcastChannel) {
-    _BroadcastChannel = class extends EventTargetShim {
-        constructor (name) {
-            super();
-            this.name = name;
-        }
-        postMessage () {
-
-        }
-    };
+if (typeof BroadcastChannel !== 'undefined') {
+    changeChannel = new BroadcastChannel('addons-change');
+    reloadChannel = new BroadcastChannel('addons-reload');
 }
 
-const changeChannel = new _BroadcastChannel('addons-change');
-const reloadChannel = new _BroadcastChannel('addons-reload');
-
 export default {
     changeChannel,
     reloadChannel

src/addons/settings/settings.jsx

@@ -552,12 +552,14 @@ const Dirty = props => (
     <div className={styles.dirtyOuter}>
         <div className={styles.dirtyInner}>
             {settingsTranslations['tw.addons.settings.dirty']}
-            <button
-                className={classNames(styles.button, styles.dirtyButton)}
-                onClick={props.onReloadNow}
-            >
-                {settingsTranslations['tw.addons.settings.dirtyButton']}
-            </button>
+            {props.onReloadNow && (
+                <button
+                    className={classNames(styles.button, styles.dirtyButton)}
+                    onClick={props.onReloadNow}
+                >
+                    {settingsTranslations['tw.addons.settings.dirtyButton']}
+                </button>
+            )}
         </div>
     </div>
 );
@@ -723,7 +725,9 @@ class AddonSettingsComponent extends React.Component {
         document.body.removeEventListener('keydown', this.handleKeyDown);
     }
     handleSettingStoreChanged (e) {
-        const {addonId, settingId, value, reloadRequired} = e.detail;
+        const {addonId, settingId, value} = e.detail;
+        // If channels are unavailable, every change requires reload.
+        const reloadRequired = e.detail.reloadRequired || !Channels.changeChannel;
         this.setState(state => {
             const newState = {
                 [addonId]: {
@@ -864,7 +868,7 @@ class AddonSettingsComponent extends React.Component {
                     </a>
                     {this.state.dirty && (
                         <Dirty
-                            onReloadNow={this.handleReloadNow}
+                            onReloadNow={Channels.reloadChannel ? this.handleReloadNow : null}
                         />
                     )}
                 </div>

src/playground/render-interface.jsx

@@ -74,14 +74,18 @@ const WrappedMenuBar = compose(
     SBFileUploaderHOC
 )(MenuBar);
 
-AddonChannels.reloadChannel.addEventListener('message', () => {
-    location.reload();
-});
+if (AddonChannels.reloadChannel) {
+    AddonChannels.reloadChannel.addEventListener('message', () => {
+        location.reload();
+    });
+}
 
-AddonChannels.changeChannel.addEventListener('message', e => {
-    const store = e.data.store;
-    SettingsStore.setStore(store);
-});
+if (AddonChannels.changeChannel) {
+    AddonChannels.changeChannel.addEventListener('message', e => {
+        const store = e.data.store;
+        SettingsStore.setStore(store);
+    });
+}
 
 import(/* webpackChunkName: "addons" */ '../addons/entry');