Add a new feature (Hide on mouseover)

Resources/CSS/popup.css

@@ -39,7 +39,7 @@ nav {
 	flex: 1;
 	vertical-align: middle;
 	text-align: right;
-	padding: 8px 8px 0 0;
+	padding: 9px 9px 0 0;
 }
 
 .title {

Resources/HTML/options.html

@@ -87,6 +87,9 @@
                     </select>
                     <span i18n-content="optionsPageDisplayOptionsAutoHideSeconds">seconds</span>
                 </div>
+                <label class="preferences-label" for="hideonhover"><span i18n-content="hideonhover">Hide On Hover For</span> </label>
+                <input type="number" id="hideonhover" value="" placeholder="Enter How many Sec" />
+                <small i18n-content="hideonhovernote">Set it 0 or leave it empty to disable</small>
             </div>
         </div>
         <div class="detail-row">

Resources/HTML/popup.html

@@ -77,6 +77,9 @@ <h2>Options</h2>
                     </select>
                     <span i18n-content="optionsPageDisplayOptionsAutoHideSeconds">seconds</span>
                 </div>
+                <label class="preferences-label" for="hideonhover"><span i18n-content="hideonhover">Hide On Hover For</span> </label>
+                <input type="number" id="hideonhover" value="" placeholder="Enter How many Sec" />
+                <small i18n-content="hideonhovernote">Set it 0 or leave it empty to disable</small>
                 <div>
                     <button id="goToOptions" i18n-content="buttonOptions">options page</button>
                 </div>

Resources/JavaScript/content.js

@@ -374,6 +374,14 @@ chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
                         break;
                 }
             }
+            if(options.hideonhover != "" && options.hideonhover){
+                document.getElementById(containerId).addEventListener("mouseover", function(event){
+                    document.getElementById(containerId).style.display = 'none';
+                    setTimeout(function() {
+                        document.getElementById(containerId).style.display = 'block';
+                    }, options.hideonhover * 1000);
+                });
+            }
 
             requestIds.forEach(function(requestId) {
                 // Render a request only once.

Resources/JavaScript/library.js

@@ -660,6 +660,7 @@ function restoreOptions() {
                 timeout: result.timeout ? result.timeout : 3,
                 hidePanelAfterTimeout: isDefined(result.hidePanelAfterTimeout) ? result.hidePanelAfterTimeout : true,
                 renderMode: result.renderMode ? result.renderMode : 'microMode',
+                hideonhover: result.hideonhover ?? null,
                 hiddenRequestHeaders: result.hiddenRequestHeaders ? result.hiddenRequestHeaders.map(item => item.toLowerCase()) : [],
                 hiddenResponseHeaders: result.hiddenResponseHeaders ? result.hiddenResponseHeaders.map(item => item.toLowerCase()) : [],
                 shownResponseHeaders: result.shownResponseHeaders ? result.shownResponseHeaders.map(item => item.toLowerCase()) : ['^server$'],
@@ -681,6 +682,7 @@ function restoreOptions() {
             timeout: localStorage.timeout ? localStorage.timeout : 3,
             hidePanelAfterTimeout: isDefined(localStorage.hidePanelAfterTimeout) ? localStorage.hidePanelAfterTimeout : true,
             renderMode: localStorage.renderMode ? localStorage.renderMode : 'microMode',
+            hideonhover: localStorage.hideonhover ?? null,
             hiddenRequestHeaders: isDefined(localStorage.hiddenRequestHeaders) ? JSON.parse(localStorage.hiddenRequestHeaders).map(item => item.toLowerCase()) : [],
             hiddenResponseHeaders: isDefined(localStorage.hiddenResponseHeaders) ? JSON.parse(localStorage.hiddenResponseHeaders).map(item => item.toLowerCase()) : [],
             shownResponseHeaders: isDefined(localStorage.shownResponseHeaders) ? JSON.parse(localStorage.shownResponseHeaders).map(item => item.toLowerCase()) : ['^Server$'],

Resources/JavaScript/options.js

@@ -13,7 +13,8 @@ document.addEventListener('DOMContentLoaded', function() {
                 timeout: document.getElementById('timeout').value,
                 hidePanelAfterTimeout: parseInt(document.getElementById('hidePanelAfterTimeout').value, 10) === 1,
                 renderMode: document.getElementById('renderMode').value,
-                theme: document.getElementById('theme').value
+                theme: document.getElementById('theme').value,
+                hideonhover: document.getElementById('hideonhover').value
             };
 
         multiSelectFields.forEach(function(fieldId) {
@@ -37,6 +38,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 localStorage.hidePanelAfterTimeout = parseInt(document.getElementById('hidePanelAfterTimeout').value, 10) === 1;
                 localStorage.renderMode = document.getElementById('renderMode').value;
                 localStorage.theme = document.getElementById('theme').value;
+                localStorage.hideonhover = document.getElementById('hideonhover').value;
 
                 multiSelectFields.forEach(function(fieldId) {
                     localStorage[fieldId] = JSON.stringify(updatedValues[fieldId]);
@@ -91,6 +93,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     theme: result.theme ? result.theme : 'light',
                     tabRequestLimit: result.tabRequestLimit ? result.tabRequestLimit : 25,
                     timeout: result.timeout ? result.timeout : 3,
+                    hideonhover: result.hideonhover ?? null,
                     hidePanelAfterTimeout: isDefined(result.hidePanelAfterTimeout) ? result.hidePanelAfterTimeout : true,
                     renderMode: result.renderMode ? result.renderMode : 'microMode',
                     hiddenRequestHeaders: result.hiddenRequestHeaders ? result.hiddenRequestHeaders : [],
@@ -106,6 +109,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 theme: localStorage.theme ? localStorage.theme : 'light',
                 tabRequestLimit: localStorage.tabRequestLimit ? localStorage.tabRequestLimit : 25,
                 timeout: localStorage.timeout ? localStorage.timeout : 3,
+                hideonhover: localStorage.hideonhover ?? null,
                 hidePanelAfterTimeout: isDefined(localStorage.hidePanelAfterTimeout) ? localStorage.hidePanelAfterTimeout : true,
                 renderMode: localStorage.renderMode ? localStorage.renderMode : 'microMode',
                 hiddenRequestHeaders: isDefined(localStorage.hiddenRequestHeaders) ? JSON.parse(localStorage.hiddenRequestHeaders) : [],
@@ -124,6 +128,7 @@ document.addEventListener('DOMContentLoaded', function() {
         document.getElementById('hidePanelAfterTimeout').value = options.hidePanelAfterTimeout ? 1 : 0;
         document.getElementById('renderMode').value = options.renderMode;
         document.getElementById('theme').value = options.theme;
+        document.getElementById('hideonhover').value = options.hideonhover;
 
         options.hiddenRequestHeaders.forEach(function(element) {
             addElement(element, 'newHiddenRequestHeader', 'hiddenRequestHeaders');
@@ -157,6 +162,9 @@ document.addEventListener('DOMContentLoaded', function() {
     document.getElementById('theme').addEventListener('change', function() {
         saveOptions();
     });
+    document.getElementById('hideonhover').addEventListener('keyup', function() {
+        saveOptions();
+    });
 
     let multiSelectFields = {
         'hiddenRequestHeaders': {addId: 'addHiddenRequestHeader', newId: 'newHiddenRequestHeader'},

_locales/en/messages.json

@@ -386,5 +386,13 @@
   "contentMessagesProEnableResponseTimes": {
     "description": "enable response times",
     "message": "enable response times"
+  },
+  "hideonhover": {
+    "description": "Hide on hover for",
+    "message": "Hide on hover for"
+  },
+  "hideonhovernote": {
+    "description": "leave it empty to disable",
+    "message": "leave it empty to disable"
   }
 }

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "__MSG_extensionName__",
   "short_name": "__MSG_extensionNameShort__",
-  "version": "2.0.49",
+  "version": "2.0.50",
   "manifest_version": 2,
   "minimum_chrome_version": "18",
   "description": "__MSG_extensionDescription__",