Adding ability to dismiss browser notices

popup.html

@@ -77,19 +77,16 @@
       }
 
       /* NOTIFICATIONS */
-      #notificationBanner {
+      #notificationBannerContainer {
-        display: none;
         background-color: #f8f3d6;
         font-size: .9em;
         line-height: 1.3em;
-        padding: 1em;
       }
-      #notificationBanner span {
+      #notificationBannerContainer span {
+        padding: 1em;
         display: none;
       }
-      #notificationBanner span[style*="display: block"] + span[style*="display: block"]{
+      #notificationBannerContainer span[style*="display: block"] + span[style*="display: block"]{
-        padding-top: .75em;
-        margin-top: .75em;
         border-top: 1px solid #000;
       }
 
@@ -271,17 +268,19 @@
         >
       </div>
     </div>
-    <div id="notificationBanner">
+    <div id="notificationBannerContainer">
-      <span id="notificationBannerBug">
+      <span id="notificationBannerChromeBug">
         Chromium users: Due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1271154" target="_blank">browser bug</a>,
         this extension may stop working after an update. If this happens, try restarting your browser,
         turning the extension off and on via your browser's extension settings (chrome://extensions/),
         and/or reinstalling the extension.
+        <a id="chromeBugHideLink" href="#">Hide this message</a>
       </span>
       <span id="notificationBannerOpera">
         Opera users: By default, Opera will block extensions from running on search engines.
-        Search engine access can be enabled per-extension by going to "chrome://extensions/"
+        Search engine access can be enabled per-extension by going to "about:extensions"
         and selecting the "Allow access to search page results" option under Indie Wiki Buddy.
+        <a id="operaPermsHideLink" href="#">Hide this message</a>
       </span>
     </div>
   </body>

popup.js

@@ -221,18 +221,34 @@ function setBreezeWiki(setting, storeSetting = true) {
 
 // Main function that runs on-load
 document.addEventListener('DOMContentLoaded', function () {  
-  notificationBanner = document.getElementById('notificationBanner');
-  
   // If running Chromium, show warning about service worker bug
   if (navigator.userAgent.match(/Chrom[e|ium]/)) {
-    notificationBanner.style.display = 'block';
+    const notificationBannerChromeBug = document.getElementById('notificationBannerChromeBug');
-    document.getElementById('notificationBannerBug').style.display = 'block';
+    chrome.storage.local.get({ 'hideChromeBugNote': false }, function (item) {
+      if (!item.hideChromeBugNote) {
+        notificationBannerChromeBug.style.display = 'block';
+
+        document.getElementById('chromeBugHideLink').addEventListener('click', function () {
+          chrome.storage.local.set({ 'hideChromeBugNote': true });
+          notificationBannerChromeBug.style.display = 'none';
+        });
+      }
+    });
   }
 
-  // If running Opera, show note about search engine acces
+  // If running Opera, show note about search engine access
   if (navigator.userAgent.match(/OPR\//)) {
-    notificationBanner.style.display = 'block';
+    const notificationBannerOpera = document.getElementById('notificationBannerOpera');
-    document.getElementById('notificationBannerOpera').style.display = 'block';
+    chrome.storage.local.get({ 'hideOperaPermissionsNote': false }, function (item) {
+      if (!item.hideOperaPermissionsNote) {
+        notificationBannerOpera.style.display = 'block';
+
+        document.getElementById('operaPermsHideLink').addEventListener('click', function () {
+          chrome.storage.local.set({ 'hideOperaPermissionsNote': true });
+          notificationBannerOpera.style.display = 'none';
+        });
+      }
+    });
   }
 
   loadBreezeWikiOptions();

settings.html

@@ -106,19 +106,16 @@
       }
 
       /* NOTIFICATIONS */
-      #notificationBanner {
+      #notificationBannerContainer {
-        display: none;
         background-color: #f8f3d6;
         font-size: .9em;
         line-height: 1.3em;
-        padding: 1em;
       }
-      #notificationBanner span {
+      #notificationBannerContainer span {
+        padding: 1em;
         display: none;
       }
-      #notificationBanner span[style*="display: block"] + span[style*="display: block"]{
+      #notificationBannerContainer span[style*="display: block"] + span[style*="display: block"]{
-        padding-top: .75em;
-        margin-top: .75em;
         border-top: 1px solid #000;
       }
 
@@ -303,17 +300,19 @@
           >Source&nbsp;Code</a
         >
       </div>
-      <div id="notificationBanner">
+      <div id="notificationBannerContainer">
-        <span id="notificationBannerBug">
+        <span id="notificationBannerChromeBug">
           Chromium users: Due to a <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1271154" target="_blank">browser bug</a>,
           this extension may stop working after an update. If this happens, try restarting your browser,
           turning the extension off and on via your browser's extension settings (chrome://extensions/),
           and/or reinstalling the extension.
+          <a id="chromeBugHideLink" href="#">Hide this message</a>
         </span>
         <span id="notificationBannerOpera">
           Opera users: By default, Opera will block extensions from running on search engines.
           Search engine access can be enabled per-extension by going to "about:extensions"
           and selecting the "Allow access to search page results" option under Indie Wiki Buddy.
+          <a id="operaPermsHideLink" href="#">Hide this message</a>
         </span>
         <span id="notificationBannerReview">
           Enjoying Indie Wiki Buddy? Please leave a review!

settings.js

@@ -515,8 +515,6 @@ function setBreezeWiki(setting, storeSetting = true) {
 
 // Main function that runs on-load
 document.addEventListener('DOMContentLoaded', function () {  
-  notificationBanner = document.getElementById('notificationBanner');
-  
   // If newly installed, show initial install guide
   if (new URLSearchParams(window.location.search).get('newinstall')) {
     document.getElementById('firstInstallInfo').style.display = 'block';
@@ -524,14 +522,32 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // If running Chromium, show warning about service worker bug
   if (navigator.userAgent.match(/Chrom[e|ium]/)) {
-    notificationBanner.style.display = 'block';
+    const notificationBannerChromeBug = document.getElementById('notificationBannerChromeBug');
-    document.getElementById('notificationBannerBug').style.display = 'block';
+    chrome.storage.local.get({ 'hideChromeBugNote': false }, function (item) {
+      if (!item.hideChromeBugNote) {
+        notificationBannerChromeBug.style.display = 'block';
+
+        document.getElementById('chromeBugHideLink').addEventListener('click', function () {
+          chrome.storage.local.set({ 'hideChromeBugNote': true });
+          notificationBannerChromeBug.style.display = 'none';
+        });
+      }
+    });
   }
 
-  // If running Opera, show note about search engine acces
+  // If running Opera, show note about search engine access
   if (navigator.userAgent.match(/OPR\//)) {
-    notificationBanner.style.display = 'block';
+    const notificationBannerOpera = document.getElementById('notificationBannerOpera');
-    document.getElementById('notificationBannerOpera').style.display = 'block';
+    chrome.storage.local.get({ 'hideOperaPermissionsNote': false }, function (item) {
+      if (!item.hideOperaPermissionsNote) {
+        notificationBannerOpera.style.display = 'block';
+
+        document.getElementById('operaPermsHideLink').addEventListener('click', function () {
+          chrome.storage.local.set({ 'hideOperaPermissionsNote': true });
+          notificationBannerOpera.style.display = 'none';
+        });
+      }
+    });
   }
 
   // Count number of times settings have been opened
@@ -544,7 +560,9 @@ document.addEventListener('DOMContentLoaded', function () {
     // and if the banner hasn't been previously dismissed
     chrome.storage.local.get({ 'hideReviewReminder': false }, function (item) {
       if (!item.hideReviewReminder && ((countSettingsOpened - 1) % 5 === 0)) {
-        notificationBanner.style.display = 'block';
+        const notificationBannerReview = document.getElementById('notificationBannerReview');
+
+        notificationBannerReview.style.display = 'block';
         document.getElementById('notificationBannerReview').style.display = ' block';
 
         // Disable future review reminders if user clicks links:
@@ -556,7 +574,7 @@ document.addEventListener('DOMContentLoaded', function () {
         });
         document.getElementById('reviewReminderHideLink').addEventListener('click', function () {
           chrome.storage.local.set({ 'hideReviewReminder': true });
-          notificationBanner.style.display = 'none';
+          notificationBannerReview.style.display = 'none';
         });
       }
     });