Light up "what's new" when upgrading extension.

src/ext/conf/ExtensionConf.js

@@ -836,6 +836,7 @@ var ExtensionConf = {
     }
   },
 ],
+whatsNewChecked: true,
   // -----------------------------------------
   //       ::: SITE CONFIGURATION :::
   // -----------------------------------------

src/ext/lib/Settings.js

@@ -129,6 +129,9 @@ class Settings {
     // in case settings in previous version contained a fucky wucky, we overwrite existing settings with a patch
     ObjectCopy.overwrite(this.active, ExtensionConfPatch['4.2.0']);
 
+    // set 'whatsNewChecked' flag to false when updating
+    this.active.whatsNewChecked = false;
+
     this.set(this.active);
     return this.active;
   }

src/popup/App.vue

@@ -100,7 +100,8 @@
             :class="{'selected-tab': selectedTab === 'whats-new'}"
             @click="selectTab('whats-new')"
         >
-          <div class="">
+          <div :class="{'new': !settings.active.whatsNewChecked}"
+            >
             What's new?
           </div>
           <div class="">
@@ -256,6 +257,10 @@ export default {
     },
     selectTab(tab) {
       this.selectedTab = tab;
+      if (tab === 'whats-new') {
+        this.settings.active.whatsNewChecked = true;
+        this.settings.save();
+      }
     },
     selectFrame(frame) {
       this.selectedFrame = frame;

src/res/css/common.scss

@@ -332,6 +332,18 @@ small {
   padding-right: 10px;
 }
 
+.new {
+  color: #fff;
+}
+
+.new::after {
+  content: "ⓘ";
+  color: $info-color !important;
+  display: inline-block;
+  font-weight: bold;
+  padding-right: 10px;
+}
+
 .experimental::after {
   // content: "Experimental";
   content: "Ⓔ";