customizable show/hide delay

Author: lxieyang

src/pages/Background/index.js

@@ -111,6 +111,22 @@ const persistAutoShowHideStatus = (status) => {
   });
 };
 
+let autoShowHideDelay = 500;
+
+chrome.storage.sync.get(['autoShowHideDelay'], (result) => {
+  if (result.autoShowHideDelay !== undefined) {
+    autoShowHideDelay = result.autoShowHideDelay;
+  } else {
+    persistAutoShowHideDelayStatus(500); // default to be 500 ms
+  }
+});
+
+const persistAutoShowHideDelayStatus = (status) => {
+  chrome.storage.sync.set({
+    autoShowHideDelay: status,
+  });
+};
+
 /**
  * Dark Mode
  */
@@ -258,6 +274,23 @@ const updateAutoShowHideStatus = (toStatus) => {
   );
 };
 
+const updateAutoShowHideDelayStatus = (toStatus) => {
+  chrome.tabs.query(
+    {
+      currentWindow: true,
+    },
+    function(tabs) {
+      tabs.forEach((tab) => {
+        chrome.tabs.sendMessage(tab.id, {
+          from: 'background',
+          msg: 'UPDATE_AUTO_SHOW_HIDE_DELAY_STATUS',
+          toStatus,
+        });
+      });
+    }
+  );
+};
+
 const updateDarkModeStatus = (toStatus) => {
   chrome.tabs.query(
     {
@@ -361,6 +394,14 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     autoShowHide = toStatus;
     persistAutoShowHideStatus(autoShowHide);
     updateAutoShowHideStatus(autoShowHide);
+  } else if (
+    request.from === 'settings' &&
+    request.msg === 'USER_CHANGE_AUTO_SHOW_HIDE_DELAY'
+  ) {
+    const { toStatus } = request;
+    autoShowHideDelay = toStatus;
+    persistAutoShowHideDelayStatus(autoShowHideDelay);
+    updateAutoShowHideDelayStatus(autoShowHideDelay);
   } else if (
     request.from === 'settings' &&
     request.msg === 'USER_CHANGE_DARK_MODE'

src/pages/Content/index.jsx

@@ -8,6 +8,7 @@ import { SIDEBAR_CONTAINER_ID } from '../../shared/constants';
 let shouldShrinkBody = true;
 let sidebarLocation = 'left';
 let autoShowHide = false;
+let autoShowHideDelay = 500;
 const toggleButtonLocation = 'bottom';
 let sidebarWidth = 280;
 
@@ -140,6 +141,12 @@ chrome.storage.sync.get(['autoShowHide'], (result) => {
   }
 });
 
+chrome.storage.sync.get(['autoShowHideDelay'], (result) => {
+  if (result.autoShowHideDelay !== undefined) {
+    autoShowHideDelay = result.autoShowHideDelay;
+  }
+});
+
 const checkSidebarStatus = () => {
   chrome.runtime.sendMessage(
     {
@@ -185,27 +192,27 @@ const mouseEnteredSidebarHandler = (event) => {
   if (isToggledOpenGloballyFromBackground === true) {
     return;
   }
-  console.log('mouse entered');
+  // console.log('mouse entered');
   clearTimeout(mouseLeftSidebarTimer);
 };
 
 const mouseLeftSidebarHandler = (event) => {
   if (isToggledOpenGloballyFromBackground === true) {
     return;
   }
-  console.log('mouse left');
+  // console.log('mouse left');
   mouseLeftSidebarTimer = setTimeout(() => {
     if (Frame.isReady()) {
       Frame.toggle(false);
     }
-  }, 500);
+  }, autoShowHideDelay);
 };
 
 const focusOffSidebarHandler = (event) => {
   if (isToggledOpenGloballyFromBackground === true) {
     return;
   }
-  console.log('mouse left');
+  // console.log('mouse left');
   if (Frame.isReady()) {
     Frame.toggle(false);
   }
@@ -308,6 +315,12 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     } else {
       unmountAutoShowHideListener();
     }
+  } else if (
+    request.from === 'background' &&
+    request.msg === 'UPDATE_AUTO_SHOW_HIDE_DELAY_STATUS'
+  ) {
+    const { toStatus } = request;
+    autoShowHideDelay = toStatus;
   }
 });
 

src/pages/Sidebar/containers/Title/SettingsBox/SettingsBox.css

@@ -78,16 +78,20 @@
 }
 
 .PopoverContent .SettingEntryContent label {
-  flex: 0;
-  margin-right: 8px;
+  /* flex: 0; */
+  margin-right: 3px;
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: 4px 6px;
+  padding: 3px 3px;
 
   transition: all 0.1s ease-in;
 }
 
+.PopoverContent .SettingEntryContent label:last-child {
+  margin-right: 0px;
+}
+
 .PopoverContent .SettingEntryContent label:hover,
 .PopoverContent .SettingEntryContent label.Active {
   background-color: #f2f0f0;
@@ -116,3 +120,27 @@
   margin-right: 6px;
   flex-shrink: 0;
 }
+
+.PopoverContent .SettingEntryContent label .AdditionalSettingItemContainer {
+  margin-left: 4px;
+}
+
+.PopoverContent
+  .SettingEntryContent
+  label
+  .AdditionalSettingItemContainer
+  input {
+  width: 35px;
+  margin: 0px 0px 0px 2px;
+}
+
+.PopoverContent
+  .SettingEntryContent
+  label
+  .AdditionalSettingItemContainer
+  input:focus {
+  outline: none;
+}
+
+input.MillSecondsInput {
+}

src/pages/Sidebar/containers/Title/SettingsBox/SettingsBox.jsx

@@ -25,6 +25,8 @@ const SettingsBox = ({
   setSettingDisplayTabTitleInFull,
   settingAutoShowHide,
   setSettingAutoShowHide,
+  settingAutoShowHideDelay,
+  setSettingAutoShowHideDelay,
   settingDarkMode,
   setSettingDarkMode,
 }) => {
@@ -209,7 +211,22 @@ const SettingsBox = ({
                   name="radio"
                 />
                 <FaCheck className="SettingEntryOptionIcon" />
-                Yes
+                Yes{' '}
+                <div className="AdditionalSettingItemContainer">
+                  (hide in
+                  <input
+                    disabled={!settingAutoShowHide}
+                    type="number"
+                    min="0"
+                    className="MillSecondsInput"
+                    placeholder={500}
+                    value={settingAutoShowHideDelay}
+                    onChange={(e) => {
+                      setSettingAutoShowHideDelay(e.target.value);
+                    }}
+                  />{' '}
+                  ms)
+                </div>
               </label>
               <label
                 className={classNames({

src/pages/Sidebar/containers/Title/Title.jsx

@@ -17,13 +17,14 @@ import DarkModeContext from '../../context/dark-mode-context';
 class Title extends Component {
   state = {
     sidebarOnLeft: null,
-    isSettingsPopoverOpen: false,
+    isSettingsPopoverOpen: true,
 
     // settings
     settingSidebarLocation: 'left',
     settingSidebarShouldShrinkBody: true,
     settingDisplayTabTitleInFull: true,
     settingAutoShowHide: false,
+    settingAutoShowHideDelay: 500,
     settingDarkMode: 'auto',
   };
 
@@ -63,6 +64,15 @@ class Title extends Component {
       }
     });
 
+    chrome.storage.sync.get(['autoShowHideDelay'], (result) => {
+      if (result.autoShowHideDelay !== undefined) {
+        console.log(result.autoShowHideDelay);
+        this.setState({
+          settingAutoShowHideDelay: result.autoShowHideDelay,
+        });
+      }
+    });
+
     chrome.storage.sync.get(['darkMode'], (result) => {
       if (result.darkMode !== undefined) {
         this.setState({
@@ -104,6 +114,12 @@ class Title extends Component {
       ) {
         const { toStatus } = request;
         this.setState({ settingAutoShowHide: toStatus === true });
+      } else if (
+        request.from === 'background' &&
+        request.msg === 'UPDATE_AUTO_SHOW_HIDE_DELAY_STATUS'
+      ) {
+        const { toStatus } = request;
+        this.setState({ settingAutoShowHideDelay: toStatus });
       } else if (
         request.from === 'background' &&
         request.msg === 'UPDATE_DARK_MODE_STATUS'
@@ -174,6 +190,19 @@ class Title extends Component {
     });
   };
 
+  setSettingAutoShowHideDelay = (toStatus) => {
+    if (toStatus === this.state.settingAutoShowHideDelay) {
+      return;
+    }
+
+    this.setState({ settingAutoShowHideDelay: toStatus });
+    chrome.runtime.sendMessage({
+      from: 'settings',
+      msg: 'USER_CHANGE_AUTO_SHOW_HIDE_DELAY',
+      toStatus,
+    });
+  };
+
   static contextType = DarkModeContext;
 
   setSettingDarkMode = (toStatus) => {
@@ -203,6 +232,7 @@ class Title extends Component {
       settingSidebarShouldShrinkBody,
       settingDisplayTabTitleInFull,
       settingAutoShowHide,
+      settingAutoShowHideDelay,
       settingDarkMode,
     } = this.state;
 
@@ -262,6 +292,10 @@ class Title extends Component {
                       }
                       settingAutoShowHide={settingAutoShowHide}
                       setSettingAutoShowHide={this.setSettingAutoHideShow}
+                      settingAutoShowHideDelay={settingAutoShowHideDelay}
+                      setSettingAutoShowHideDelay={
+                        this.setSettingAutoShowHideDelay
+                      }
                       settingDarkMode={settingDarkMode}
                       setSettingDarkMode={this.setSettingDarkMode}
                     />