show 'NEW' icon badge for major upgrades

webextension/background.js

@@ -467,6 +467,13 @@ browser.runtime.sendMessage({
   }
 }).catch(() => {});
 
+browser.runtime.sendMessage({method: "checkForMajorUpgrade"}).then(upgrading=> {
+  if (upgrading) {
+    browser.browserAction.setBadgeBackgroundColor({color: "rgba(0,217,0,255)"});
+    browser.browserAction.setBadgeText({text: "NEW"});
+  }
+}).catch((e) => { throw e;});
+
 function disableAddon(tabId) {
   browser.browserAction.disable(tabId);
   browser.browserAction.setTitle({ tabId, title: "Containers disabled in Private Browsing Mode" });

webextension/js/popup.js

@@ -64,6 +64,10 @@ const Logic = {
   _panels: {},
 
   init() {
+    // Remove browserAction "upgraded" badge when opening panel
+    browser.browserAction.setBadgeBackgroundColor({color: ""});
+    browser.browserAction.setBadgeText({text: ""});
+
     // Retrieve the list of identities.
     this.refreshIdentities()
 

webextension/popup.html

@@ -32,8 +32,8 @@
 
   <div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
     <img class="onboarding-img" alt="How to assign sites to containers" src="/img/onboarding-4.png" />
-    <h3 class="onboarding-title">Assign your favorite sites to containers..</h3>
-    <p>Assign your favorite sites to automatically open in containers.</p>
+    <h3 class="onboarding-title">Always open sites in the containers you want.</h3>
+    <p>Right-click inside a container tab to assign the site to always open in the container.</p>
     <a href="#" id="onboarding-done-button" class="onboarding-button">Done</a>
   </div>