Refactored to remove need for new webNavigation permission

Author: Brian Vaughn

shells/browser/chrome/manifest.json

@@ -41,7 +41,6 @@
   },
 
   "permissions": [
-    "webNavigation",
     "file:///*",
     "http://*/*",
     "https://*/*"

shells/browser/firefox/manifest.json

@@ -45,7 +45,6 @@
   },
 
   "permissions": [
-    "webNavigation",
     "file:///*",
     "http://*/*",
     "https://*/*"

shells/browser/shared/src/main.js

@@ -117,6 +117,10 @@ function createPanelIfReactLoaded() {
           localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
         }
 
+        if (store !== null) {
+          profilingData = store.profilerStore.profilingData;
+        }
+
         store = new Store(bridge, {
           isProfiling,
           supportsReloadAndProfile: getBrowserName() === 'Chrome',
@@ -266,21 +270,6 @@ function createPanelIfReactLoaded() {
 
       chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
-      // Shutdown bridge before a new page is loaded.
-      chrome.webNavigation.onBeforeNavigate.addListener(
-        function onBeforeNavigate(details) {
-          // Ignore navigation events from other tabs (or from within frames).
-          if (details.tabId !== tabId || details.frameId !== 0) {
-            return;
-          }
-
-          // `bridge.shutdown()` will remove all listeners we added, so we don't have to.
-          bridge.shutdown();
-
-          profilingData = store.profilerStore.profilingData;
-        }
-      );
-
       // Re-initialize DevTools panel when a new page is loaded.
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
         // Re-initialize saved filters on navigation,

src/devtools/views/DevTools.js

@@ -5,7 +5,7 @@
 import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Components from './Components/Components';
@@ -103,6 +103,16 @@ export default function DevTools({
     [canViewElementSourceFunction, viewElementSourceFunction]
   );
 
+  useEffect(() => {
+    return () => {
+      try {
+        bridge.shutdown()
+      } catch (error) {
+        // Attempting to use a disconnected port.
+      }
+    };
+  }, [bridge]);
+
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>