better sidebar style when extension context is invalid

Author: lxieyang

src/components/Logo/Logo.jsx

@@ -13,7 +13,12 @@ const logo = (props) => {
   let src = AppLogo;
 
   if (window.chrome !== undefined && chrome.extension !== undefined) {
-    src = chrome.runtime.getURL('icon-128.png');
+    try {
+      src = chrome.runtime.getURL('icon-128.png');
+    } catch (err) {
+      console.log(err);
+      // return null;
+    }
   }
 
   return (

src/pages/Content/helpers/UpdateNoticeHelper.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { sidebarRoot } from './SidebarHelper';
+import { SIDEBAR_CONTAINER_ID } from '../../../shared/constants';
 import UpdateNotice from '../modules/UpdateNotice/UpdateNotice';
 
 let updateNoticeRoot = document.createElement('div');
@@ -18,8 +20,16 @@ document.addEventListener('visibilitychange', (info) => {
     if (err.toString().indexOf('Extension context invalidated') !== -1) {
       if (!document.hidden) {
         console.log('should refresh page');
+        updateNoticeRoot.style.zIndex = '999999999';
         ReactDOM.render(<UpdateNotice />, updateNoticeRoot);
+        const sidebarIframe = sidebarRoot.querySelector('iframe');
+        sidebarIframe.style.opacity = 0.4;
+        sidebarIframe.style.pointerEvents = 'none';
+        sidebarIframe.style.userSelect = 'none';
+        document.querySelector(`#${SIDEBAR_CONTAINER_ID}`).style.cursor =
+          'not-allowed';
       } else {
+        updateNoticeRoot.style.zIndex = null;
         ReactDOM.unmountComponentAtNode(updateNoticeRoot);
       }
     }

src/pages/Content/modules/UpdateNotice/UpdateNotice.jsx

@@ -12,7 +12,7 @@ const UpdateNoticeContainer = styled.div`
   padding: 8px 16px;
   border-radius: 10px;
   color: #000;
-  background-color: #fff;
+  background-color: #fff !important;
 
   font-family: sans-serif;
   text-align: center;
@@ -21,8 +21,6 @@ const UpdateNoticeContainer = styled.div`
   font-style: normal;
   box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
   line-height: 22px;
-
-  z-index: 999999999;
 `;
 
 const ExtensionNameContainerSpan = styled.span`

src/pages/Content/modules/frame/frame.jsx

@@ -20,6 +20,7 @@ const iframeClass = css`
 `;
 
 const containerClass = css`
+  background-color: #fff;
   position: fixed;
   top: 0px;
   /* right: 0px; */

src/pages/Sidebar/Sidebar.jsx

@@ -260,34 +260,32 @@ class Sidebar extends Component {
 
     return (
       <DarkModeContext.Consumer>
-        {(darkModeContext) => {
-          return (
-            <div
-              className={classNames({
-                SidebarContainer: true,
-                Dark: darkModeContext.isDark,
-              })}
-            >
-              <Title
-                setDisplayTabInFull={this.setDisplayTabInFull}
-                setDisplayTabPreviewFrame={this.setDisplayTabPreviewFrame}
-              />
-              <TabsList
-                displayTabInFull={displayTabInFull}
-                displayTabPreviewFrame={displayTabPreviewFrame}
-                tabOrders={tabOrders
-                  .filter(({ id }) => tabsDict[id] !== undefined)
-                  .map((tabOrder) => ({
-                    ...tabOrder,
-                    ...tabsDict[tabOrder.id],
-                  }))}
-                activeTab={activeTab}
-                setTabAsLoading={this.setTabAsLoading}
-              />
-              {/* <UpdateNotice /> */}
-            </div>
-          );
-        }}
+        {({ isDark }) => (
+          <div
+            className={classNames({
+              SidebarContainer: true,
+              Dark: isDark,
+            })}
+          >
+            <Title
+              setDisplayTabInFull={this.setDisplayTabInFull}
+              setDisplayTabPreviewFrame={this.setDisplayTabPreviewFrame}
+            />
+            <TabsList
+              displayTabInFull={displayTabInFull}
+              displayTabPreviewFrame={displayTabPreviewFrame}
+              tabOrders={tabOrders
+                .filter(({ id }) => tabsDict[id] !== undefined)
+                .map((tabOrder) => ({
+                  ...tabOrder,
+                  ...tabsDict[tabOrder.id],
+                }))}
+              activeTab={activeTab}
+              setTabAsLoading={this.setTabAsLoading}
+            />
+            {/* <UpdateNotice /> */}
+          </div>
+        )}
       </DarkModeContext.Consumer>
     );
   }

src/pages/Sidebar/containers/ErrorBoundary/ErrorBoundary.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 
 class ErrorBoundary extends Component {
   state = { hasError: false };
@@ -13,7 +13,11 @@ class ErrorBoundary extends Component {
 
   render() {
     // if (this.state.hasError) {
-    //   return <h1>Oops, we done goofed up</h1>;
+    //   return (
+    //     <h1>
+    //       Oops, please refresh the current page to use Vertical Tabs again.
+    //     </h1>
+    //   );
     // }
     return this.props.children;
   }