feat: add new feature marks

src/background/main.js

@@ -17,6 +17,7 @@ var commands = {
   GetData: function (data, src) {
     return vmdb.getData().then(function (data) {
       data.sync = sync.states();
+      data.version = VM_VER;
       return data;
     });
   },

src/cache.js

@@ -35,7 +35,7 @@ var BaseView = Backbone.View.extend({
       .then(function (fn) {
         _this.templateFn = fn;
       });
-    _.bindAll(_this, 'render', 'initI18n');
+    _.bindAll(_this, 'render', 'postrender');
     _this.render();
   },
   _render: function () {
@@ -43,13 +43,17 @@ var BaseView = Backbone.View.extend({
   },
   render: function () {
     var render = this._render.bind(this);
-    (this.__gotTemplate || Promise.resolve()).then(render).then(this.initI18n);
+    (this.__gotTemplate || Promise.resolve()).then(render)
+    .then(this.postrender);
     return this;
   },
-  initI18n: function () {
+  postrender: function () {
     _.forEach(this.$('[data-i18n]'), function (node) {
       node.innerHTML = _.i18n(node.dataset.i18n);
     });
+    _.forEach(this.$('[data-feature]'), function (node) {
+      _.features.isHit(node.dataset.feature) || node.classList.add('feature');
+    });
   },
   getValue: function (target) {
     var key = target.dataset.id;

src/common.js

@@ -14,6 +14,7 @@ _.options = function () {
     autoReload: false,
     dropbox: {},
     dropboxEnabled: false,
+    features: null,
   };
 
   function getOption(key, def) {
@@ -90,3 +91,33 @@ function format() {
   });
 }
 */
+
+_.features = function () {
+  var FEATURES = 'features';
+  var features = _.options.get(FEATURES);
+  if (!features || !features.data) features = {
+    data: {},
+  };
+
+  return {
+    init: init,
+    hit: hit,
+    isHit: isHit,
+  };
+
+  function init(version) {
+    if (features.version !== version) {
+      _.options.set(FEATURES, features = {
+        version: version,
+        data: {},
+      });
+    }
+  }
+  function hit(key) {
+    features.data[key] = 1;
+    _.options.set(FEATURES, features);
+  }
+  function isHit(key) {
+    return features.data[key];
+  }
+}();

src/options/app.js

@@ -22,7 +22,12 @@ var app = new App();
 if (!Backbone.history.start())
   app.navigate('', {trigger: true, replace: true});
 
-BaseView.prototype.initI18n.call(window);
+BaseView.prototype.postrender.call(window);
+$(document).on('click', '[data-feature]', function (e) {
+  var target = e.currentTarget;
+  _.features.hit(target.dataset.feature);
+  target.classList.remove('feature');
+});
 
 var scriptList, syncData;
 function initMain() {

src/options/model.js

@@ -38,6 +38,7 @@ var ScriptList = Backbone.Collection.extend({
       _.assign(_this.cache, data.cache);
       _this.reset(data.scripts);
       syncData.reset(data.sync);
+      _.features.init(data.version);
     });
   },
 });

src/options/style.css

@@ -318,3 +318,20 @@ fieldset.title {
   width: 1px;
   white-space: nowrap;
 }
+.feature-text {
+  position: relative;
+}
+.feature .feature-text::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 100%;
+  border-radius: 50%;
+}
+.feature .feature-text::after {
+  top: -2px;
+  width: 6px;
+  height: 6px;
+  margin-left: 2px;
+  background: red;
+}

src/options/templates/main.html

@@ -2,11 +2,13 @@
   <aside>
     <img src="/images/icon128.png">
     <h2 data-i18n=extName></h2>
-    <div class="line">2013-2015</div>
+    <div class="line">2013-2016</div>
     <hr>
     <div class=sidemenu>
       <a href="#main/installed" <%= it.tab == 'main' ? 'class="active"' : ''  %> data-i18n=sideMenuInstalled></a>
-      <a href="#main/settings" <%= it.tab == 'settings' ? 'class="active"' : '' %> data-i18n=sideMenuSettings></a>
+      <a href="#main/settings" <%= it.tab == 'settings' ? 'class="active"' : '' %> data-feature="settings">
+        <span data-i18n=sideMenuSettings class="feature-text"></span>
+      </a>
       <a href="#main/about" <%= it.tab == 'about' ? 'class="active"' : '' %> data-i18n=sideMenuAbout></a>
     </div>
   </aside>

src/options/templates/tab-settings.html

@@ -36,8 +36,8 @@
     <button id=bSelect data-i18n=buttonAllNone></button>
     <button id=bExport data-i18n=buttonExportData></button>
   </fieldset>
-  <fieldset class=title>
-    <legend data-i18n=labelSync></legend>
+  <fieldset class=title data-feature="sync">
+    <legend data-i18n=labelSync class="feature-text"></legend>
     <div class="sync-services"></div>
   </fieldset>
 </div>

src/popup/app.js

@@ -18,7 +18,7 @@ var app = new App();
 if (!Backbone.history.start())
   app.navigate('', {trigger: true, replace: true});
 
-BaseView.prototype.initI18n.call(window);
+BaseView.prototype.postrender.call(window);
 
 !function () {
   function commandClick(e, model) {