feat: redesign popup menu

icons/more.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M380.26 843.25l-87.663-82.33 264.355-248.321-265.488-249.422 87.796-82.43 352.416 330.885-.867.833.767.767-87.595 82.496-.1-.1z"/></svg>

package.json

@@ -8,6 +8,7 @@
     "i18n": "gulp i18n",
     "lint": "gulp lint",
     "update": "node scripts/update",
+    "svgo": "svgo icons",
     "test": "mocha"
   },
   "description": "Violentmonkey",
@@ -30,6 +31,7 @@
     "mocha": "^3.1.2",
     "ncp": "^2.0.0",
     "precss": "^1.4.0",
+    "svgo": "^0.7.2",
     "through2": "^2.0.3"
   },
   "author": "Gerald <[email protected]>",

src/_locales/cs/messages.yml

@@ -287,6 +287,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Řízení skriptů
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Najdi skripty pro tuto stránku
@@ -299,6 +300,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Zpět
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Skriptové příkazy...
@@ -440,3 +442,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: ''
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: ''
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: ''

src/_locales/de/messages.yml

@@ -285,6 +285,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Skripte verwalten
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Finde Skripte für diese Seite
@@ -297,6 +298,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Zurück
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Skriptbefehle...
@@ -436,3 +438,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: ''
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: ''
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: ''

src/_locales/en/messages.yml

@@ -285,6 +285,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Manage scripts
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Find scripts for this site
@@ -297,6 +298,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Back
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Script commands...
@@ -440,3 +442,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: Save
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: Open Dashboard
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: Matched scripts

src/_locales/id/messages.yml

@@ -289,6 +289,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Kelola script
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Temukan script untuk situs ini
@@ -301,6 +302,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Kembali
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Perintah script...
@@ -442,3 +444,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: ''
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: ''
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: ''

src/_locales/pl/messages.yml

@@ -287,6 +287,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Zarządzaj skryptami
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Znajdź skrypty dla tej strony
@@ -299,6 +300,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Wstecz
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Komendy skryptu...
@@ -438,3 +440,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: ''
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: ''
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: ''

src/_locales/ro/messages.yml

@@ -289,6 +289,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Administrează scripturile
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Găsește scripturi pentru acest sait
@@ -301,6 +302,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Înapoi
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Comenzi de scripturi...
@@ -442,3 +444,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: ''
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: ''
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: ''

src/_locales/ru/messages.yml

@@ -285,6 +285,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Управление скриптами
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Найти скрипты для сайта
@@ -297,6 +298,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Назад
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Команды скриптов...
@@ -438,3 +440,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: ''
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: ''
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: ''

src/_locales/sr/messages.yml

@@ -285,6 +285,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Управљај скриптама
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Пронађи скрипте за овај сајт
@@ -297,6 +298,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Назад
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Команде скрипте...
@@ -438,3 +440,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: ''
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: ''
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: ''

src/_locales/vi/messages.yml

@@ -285,6 +285,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: Quản lý scripts
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: Tìm script cho trang này
@@ -297,6 +298,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: Quay lại
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: Menu của script...
@@ -438,3 +440,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: ''
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: ''
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: ''

src/_locales/zh/messages.yml

@@ -287,6 +287,7 @@ hintVacuum:
 menuManageScripts:
   description: 'Menu item to manage scripts, or to open the options page of the extension.'
   message: 管理脚本
+  touched: false
 menuFindScripts:
   description: Menu item to find scripts for a site.
   message: 为此站点查找脚本
@@ -299,6 +300,7 @@ menuScriptDisabled:
 menuBack:
   description: Menu item to go back to main menu from script commands.
   message: 返回
+  touched: false
 menuCommands:
   description: Menu item to list script commands.
   message: 脚本命令...
@@ -438,3 +440,9 @@ descCustomCSS:
 buttonSaveCustomCSS:
   description: Label for button to save custom CSS.
   message: 保存
+menuDashboard:
+  description: Label for menu item to open dashboard.
+  message: 打开控制台
+menuMatchedScripts:
+  description: Label for menu listing matched scripts.
+  message: 匹配的脚本

src/popup/app.js

@@ -1,73 +1,56 @@
 var _ = require('src/common');
 _.initOptions();
-var Menu = require('./views/menu');
-var Commands = require('./views/command');
-var Domains = require('./views/domain');
+var App = require('./views/app');
 var utils = require('./utils');
 
 var app = new Vue({
   el: '#app',
-  template: '<component :is=type></component>',
-  components: {
-    Menu: Menu,
-    Commands: Commands,
-    Domains: Domains,
-  },
-  data: {
-    type: 'Menu',
-  },
-  methods: {
-    navigate: function (type) {
-      this.type = type || 'Menu';
-    },
+  render: function (h) {
+    return h(App);
   },
 });
 
-exports.navigate = app.navigate.bind(app);
-
-!function () {
-  function init() {
-    var currentTab = utils.store.currentTab;
-    chrome.tabs.sendMessage(currentTab.id, {cmd: 'GetPopup'});
-    if (currentTab && /^https?:\/\//i.test(currentTab.url)) {
-      var matches = currentTab.url.match(/:\/\/(?:www\.)?([^\/]*)/);
-      var domain = matches[1];
-      var domains = domain.split('.').reduceRight(function (res, part) {
-        var last = res[0];
-        if (last) part += '.' + last;
-        res.unshift(part);
-        return res;
-      }, []);
-      domains.length > 1 && domains.pop();
-      utils.store.domains = domains;
-    }
+function init() {
+  var currentTab = utils.store.currentTab;
+  chrome.tabs.sendMessage(currentTab.id, {cmd: 'GetPopup'});
+  if (currentTab && /^https?:\/\//i.test(currentTab.url)) {
+    var matches = currentTab.url.match(/:\/\/(?:www\.)?([^\/]*)/);
+    var domain = matches[1];
+    var domains = domain.split('.').reduceRight(function (res, part) {
+      var last = res[0];
+      if (last) part += '.' + last;
+      res.unshift(part);
+      return res;
+    }, []);
+    domains.length > 1 && domains.pop();
+    utils.store.domains = domains;
   }
+}
 
-  var commands = {
-    SetPopup: function (data, src, _callback) {
-      if (utils.store.currentTab.id !== src.tab.id) return;
-      utils.store.commands = data.menus;
-      _.sendMessage({
-        cmd: 'GetMetas',
-        data: data.ids,
-      }).then(function (scripts) {
-        utils.store.scripts = scripts;
-      });
-    },
-    UpdateOptions: function (data) {
-      _.options.update(data);
-    },
-  };
-  chrome.runtime.onMessage.addListener(function (req, src, callback) {
-    var func = commands[req.cmd];
-    if (func) func(req.data, src, callback);
-  });
+var handlers = {
+  SetPopup: function (data, src, _callback) {
+    if (utils.store.currentTab.id !== src.tab.id) return;
+    utils.store.commands = data.menus;
+    _.sendMessage({
+      cmd: 'GetMetas',
+      data: data.ids,
+    }).then(function (scripts) {
+      utils.store.scripts = scripts;
+    });
+  },
+  UpdateOptions: function (data) {
+    _.options.update(data);
+  },
+};
+chrome.runtime.onMessage.addListener(function (req, src, callback) {
+  var func = handlers[req.cmd];
+  if (func) func(req.data, src, callback);
+});
 
-  chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
-    utils.store.currentTab = {
-      id: tabs[0].id,
-      url: tabs[0].url,
-    };
-    init();
-  });
-}();
+chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
+  utils.store.currentTab = {
+    id: tabs[0].id,
+    url: tabs[0].url,
+  };
+  init();
+});

src/popup/index.html

@@ -1,16 +1,16 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>Popup Menu - Violentmonkey</title>
-    <link rel="stylesheet" href="style.css">
-    <script src="/lib/vue.min.js"></script>
-		<script src="/lib/define.js"></script>
-		<script src="/common.js"></script>
-    <script src="/cache.js"></script>
-	</head>
-  <body>
-    <div id="app"></div>
-		<script src="app.js"></script>
-	</body>
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Popup Menu - Violentmonkey</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="/lib/vue.min.js"></script>
+  <script src="/lib/define.js"></script>
+  <script src="/common.js"></script>
+  <script src="/cache.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="app.js"></script>
+</body>
 </html>

src/popup/style.css

@@ -1,57 +1,15 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  font: 14px menu;
 }
-html {
-  font: 14px menu;
-}
-.menu {
-  max-width: 30rem;
-  max-height: 30rem;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.menu.placeholder {
-  max-width: none;
-  height: 0;
-  overflow: hidden;
-}
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.menu-item-label {
-  cursor: pointer;
-  padding: .4rem;
-  white-space: nowrap;
-}
-.menu-item-detail:hover,
-.menu-item-label:hover {
-  background: cornflowerblue;
-  color: white;
-}
-.menu-item.disabled .menu-item-label {
-  color: gray;
-}
-.menu-item.disabled .menu-item-label:hover {
-  color: silver;
-}
-.menu-item-detail {
-  float: right;
-  border-radius: .1rem;
-  text-align: center;
-  width: 1rem;
-  margin: .4rem;
-  background: white;
-  cursor: pointer;
-}
-.menu-item-detail ~ .menu-item-label {
-  padding-right: 2em;
-}
-hr {
-  border: none;
-  border-top: 1px solid silver;
+body {
+  min-width: 300px;
+  padding: 1em;
+  font-size: 1em;
 }
 .icon {
   width: 1rem;
@@ -61,3 +19,59 @@ hr {
 svg path {
   fill: currentColor;
 }
+
+.logo {
+  text-align: center;
+  img {
+    width: 6em;
+  }
+  &.disabled > img {
+    opacity: .5;
+  }
+}
+.menu {
+  border-top: 1px solid silver;
+  &-item {
+    position: relative;
+    cursor: pointer;
+    text-align: center;
+    padding: .5em 2em;
+    &.disabled {
+      color: gray;
+      &:hover {
+        color: silver;
+      }
+    }
+    &:hover {
+      background: cornflowerblue;
+      color: white;
+    }
+    > .icon {
+      position: absolute;
+      top: .7em;
+      left: .5em;
+      &-right {
+        left: auto;
+        right: .5em;
+      }
+    }
+  }
+  &.collapse {
+    > .submenu {
+      display: none;
+    }
+    > .menu-item > .icon-right {
+      transform: rotateZ(90deg);
+    }
+  }
+}
+.submenu {
+  min-height: 4em;
+  max-height: 12em;
+  margin-left: 2em;
+  overflow-y: auto;
+  border-top: 1px dashed #ddd;
+  .menu-scripts > & {
+    max-height: 20em;
+  }
+}

src/popup/views/app/index.html

@@ -0,0 +1,50 @@
+<div id="app">
+  <div class="logo" :class="{disabled:!options.isApplied}">
+    <img src="/images/icon128.png">
+  </div>
+  <div class="menu-item" :class="{disabled:!options.isApplied}" @click="onToggle">
+    <icon :name="getSymbolCheck(options.isApplied)"></icon>
+    <span v-text="options.isApplied ? i18n('menuScriptEnabled') : i18n('menuScriptDisabled')"></span>
+  </div>
+  <div class="menu">
+    <div class="menu-item" @click="onManage">
+      <icon name="cog"></icon>
+      <span v-text="i18n('menuDashboard')"></span>
+    </div>
+  </div>
+  <div class="menu menu-domains" v-show="domains.length" :class="{collapse:collapse.domains}" @click="collapse.domains=!collapse.domains">
+    <div class="menu-item">
+      <icon name="search"></icon>
+      <icon name="more" class="icon-right"></icon>
+      <span v-text="i18n('menuFindScripts')"></span>
+    </div>
+    <div class="submenu">
+      <div class="menu-item" v-for="item in domains" @click="onFindScripts(item)">
+        <span v-text="item.name"></span>
+      </div>
+    </div>
+  </div>
+  <div class="menu menu-commands" v-show="commands.length" :class="{collapse:collapse.commands}" @click="collapse.commands=!collapse.commands">
+    <div class="menu-item">
+      <icon name="more" class="icon-right"></icon>
+      <span v-text="i18n('menuCommands')"></span>
+    </div>
+    <div class="submenu">
+      <div class="menu-item" v-for="item in commands" @click="onCommand(item)">
+        <span v-text="item.name"></span>
+      </div>
+    </div>
+  </div>
+  <div class="menu menu-scripts" v-show="scripts.length" :class="{collapse:collapse.scripts}" @click="collapse.scripts=!collapse.scripts">
+    <div class="menu-item">
+      <icon name="more" class="icon-right"></icon>
+      <span v-text="i18n('menuMatchedScripts')"></span>
+    </div>
+    <div class="submenu">
+      <div class="menu-item" v-for="item in scripts" @click="onToggleScript(item)" :class="{disabled:!item.data.enabled}">
+        <icon :name="getSymbolCheck(item.data.enabled)" class="icon-right"></icon>
+        <span v-text="item.name"></span>
+      </div>
+    </div>
+  </div>
+</div>

src/popup/views/app/index.js

@@ -0,0 +1,111 @@
+var _ = require('src/common');
+var cache = require('src/cache');
+var Icon = require('../icon');
+var utils = require('../../utils');
+
+var options = {
+  isApplied: _.options.get('isApplied'),
+};
+_.options.hook(function (changes) {
+  if ('isApplied' in changes) {
+    options.isApplied = changes.isApplied;
+  }
+});
+
+module.exports = {
+  template: cache.get('./index.html'),
+  components: {
+    Icon: Icon,
+  },
+  data: function () {
+    return {
+      options: options,
+      store: utils.store,
+      collapse: {
+        domains: true,
+        commands: true,
+        scripts: false,
+      },
+    };
+  },
+  computed: {
+    domains: function () {
+      return this.store.domains.map(function (item) {
+        return {
+          name: item,
+          data: item,
+        };
+      });
+    },
+    commands: function () {
+      return this.store.commands.map(function (item) {
+        return {
+          name: item[0],
+          data: item,
+        };
+      });
+    },
+    scripts: function () {
+      return this.store.scripts.map(function (script) {
+        return {
+          name: script.custom.name || _.getLocaleString(script.meta, 'name'),
+          data: script,
+        };
+      });
+    },
+  },
+  methods: {
+    getSymbolCheck: function (bool) {
+      return bool ? 'check' : 'remove';
+    },
+    onToggle: function () {
+      _.options.set('isApplied', !this.options.isApplied);
+    },
+    onManage: function () {
+      var url = chrome.extension.getURL(chrome.app.getDetails().options_page);
+      chrome.tabs.query({
+        currentWindow: true,
+        url: url,
+      }, function (tabs) {
+        var tab = tabs.find(function (tab) {
+          var hash = tab.url.match(/#(\w+)/);
+          return !hash || hash[1] !== 'confirm';
+        });
+        if (tab) chrome.tabs.update(tab.id, {active: true});
+        else chrome.tabs.create({url: url});
+      });
+    },
+    onFindScripts: function (item) {
+      var domain;
+      if (item) {
+        domain = item.name;
+      } else {
+        var matches = this.store.currentTab.url.match(/:\/\/(?:www\.)?([^\/]*)/);
+        domain = matches[1];
+      }
+      chrome.tabs.create({
+        url: 'https://greasyfork.org/scripts/search?q=' + encodeURIComponent(domain),
+      });
+    },
+    onCommand: function (item) {
+      chrome.tabs.sendMessage(this.store.currentTab.id, {
+        cmd: 'Command',
+        data: item.name,
+      });
+    },
+    onToggleScript: function (item) {
+      var _this = this;
+      _.sendMessage({
+        cmd: 'UpdateScriptInfo',
+        data: {
+          id: item.data.id,
+          enabled: !item.data.enabled,
+        },
+      })
+      .then(function () {
+        item.data.enabled = !item.data.enabled;
+        _.options.get('autoReload') && chrome.tabs.reload(_this.store.currentTab.id);
+      });
+    },
+  },
+};

src/popup/views/command.js

@@ -1,39 +0,0 @@
-var app = require('../app');
-var MixIn = require('./mixin');
-var _ = require('../../common');
-
-module.exports = {
-  mixins: [MixIn],
-  data: function () {
-    return {
-      top: [{
-        name: _.i18n('menuBack'),
-        symbol: 'arrow-left',
-        onClick: function () {
-          app.navigate();
-        },
-      }],
-    };
-  },
-  computed: {
-    bot: function () {
-      var _this = this;
-      return _this.store.commands.map(function (item) {
-        return {
-          name: item[0],
-          symbol: 'right-hand',
-          className: 'ellipsis',
-          onClick: function (options) {
-            chrome.tabs.sendMessage(_this.store.currentTab.id, {
-              cmd: 'Command',
-              data: options.name,
-            });
-          },
-        };
-      });
-    },
-  },
-  watch: {
-    'store.commands': 'fixStyles',
-  },
-};

src/popup/views/domain.js

@@ -1,37 +0,0 @@
-var app = require('../app');
-var MixIn = require('./mixin');
-var _ = require('../../common');
-
-module.exports = {
-  mixins: [MixIn],
-  data: function () {
-    return {
-      top: [{
-        name: _.i18n('menuBack'),
-        symbol: 'arrow-left',
-        onClick: function () {
-          app.navigate();
-        },
-      }],
-    };
-  },
-  computed: {
-    bot: function () {
-      var _this = this;
-      return _this.store.domains.map(function (domain) {
-        return {
-          name: domain,
-          className: 'ellipsis',
-          onClick: function () {
-            chrome.tabs.create({
-              url: 'https://greasyfork.org/scripts/search?q=' + encodeURIComponent(domain),
-            });
-          },
-        };
-      });
-    },
-  },
-  watch: {
-    'store.domains': 'fixStyles',
-  },
-};

src/popup/views/icon/index.html

@@ -0,0 +1 @@
+<svg class="icon"><use :xlink:href="iconName" /></svg>

src/popup/views/icon/index.js

@@ -0,0 +1,11 @@
+var cache = require('src/cache');
+
+module.exports = {
+  props: ['name'],
+  template: cache.get('./index.html'),
+  computed: {
+    iconName: function () {
+      return '#' + this.name;
+    },
+  },
+};

src/popup/views/item.html

@@ -1,7 +0,0 @@
-<div class="menu-item" :class="[data.className,{disabled:data.disabled}]" :title="data.title||data.name">
-  <div class="menu-item-detail" v-if="data.detailClick" @click="detailClick">...</div>
-  <div class="menu-item-label" @click="onClick">
-    <svg class="icon"><use :xlink:href="'#'+data.symbol"/></svg>
-    {{data.name}}
-  </div>
-</div>

src/popup/views/item.js

@@ -1,35 +0,0 @@
-function wrapHandler(name) {
-  return function () {
-    var _this = this;
-    var options = _this.options;
-    var handler = options[name];
-    handler && handler.call(_this, options);
-  };
-}
-
-var cache = require('../../cache');
-
-module.exports = {
-  props: ['options'],
-  template: cache.get('./item.html'),
-  data: function () {
-    return {
-      data: {},
-    };
-  },
-  watch: {
-    options: 'update',
-  },
-  methods: {
-    update: function () {
-      this.data = this.options;
-      this.init();
-    },
-    init: wrapHandler('init'),
-    onClick: wrapHandler('onClick'),
-    detailClick: wrapHandler('detailClick'),
-  },
-  mounted: function () {
-    this.update();
-  },
-};

src/popup/views/menu.html

@@ -1,10 +0,0 @@
-<div>
-  <div class="menu">
-    <menu-item v-for="item in top" v-show="isVisible(item)" :options="item"></menu-item>
-  </div>
-  <hr v-if="bot.length">
-  <div class="menu placeholder" ref="placeholder"></div>
-  <div class="menu" ref="bot">
-    <menu-item v-for="item in bot" :options="item"></menu-item>
-  </div>
-</div>

src/popup/views/menu.js

@@ -1,111 +0,0 @@
-var app = require('../app');
-var MixIn = require('./mixin');
-var _ = require('../../common');
-
-module.exports = {
-  mixins: [MixIn],
-  data: function () {
-    var _this = this;
-    return {
-      top: [{
-        name: _.i18n('menuManageScripts'),
-        symbol: 'cog',
-        onClick: function () {
-          var url = chrome.extension.getURL(chrome.app.getDetails().options_page);
-          chrome.tabs.query({
-            currentWindow: true,
-            url: url,
-          }, function (tabs) {
-            var tab = tabs.find(function (tab) {
-              var hash = tab.url.match(/#(\w+)/);
-              return !hash || hash[1] !== 'confirm';
-            });
-            if (tab) chrome.tabs.update(tab.id, {active: true});
-            else chrome.tabs.create({url: url});
-          });
-        },
-      }, {
-        name: _.i18n('menuFindScripts'),
-        symbol: 'search',
-        hide: function () {
-          var domains = this.store.domains;
-          return !domains || !domains.length;
-        },
-        onClick: function () {
-          var matches = _this.store.currentTab.url.match(/:\/\/(?:www\.)?([^\/]*)/);
-          chrome.tabs.create({
-            url: 'https://greasyfork.org/scripts/search?q=' + matches[1],
-          });
-        },
-        detailClick: function () {
-          app.navigate('Domains');
-        },
-      }, {
-        name: _.i18n('menuCommands'),
-        symbol: 'arrow-right',
-        hide: function () {
-          var commands = _this.store.commands;
-          return !commands || !commands.length;
-        },
-        onClick: function () {
-          app.navigate('Commands');
-        },
-      }, {
-        name: null,
-        symbol: null,
-        disabled: null,
-        init: function (options) {
-          options.update(options);
-          _.options.hook(function (data) {
-            data.isApplied != null && options.update(options);
-          });
-        },
-        update: function (options) {
-          options.disabled = !_.options.get('isApplied');
-          options.name = options.disabled ? _.i18n('menuScriptDisabled') : _.i18n('menuScriptEnabled');
-          options.symbol = options.disabled ? 'remove' : 'check';
-        },
-        onClick: function (options) {
-          _.options.set('isApplied', options.disabled);
-        },
-      }],
-    };
-  },
-  computed: {
-    bot: function () {
-      var _this = this;
-      return _this.store.scripts.map(function (script) {
-        return {
-          name: script.custom.name || _.getLocaleString(script.meta, 'name'),
-          className: 'ellipsis',
-          symbol: null,
-          disabled: null,
-          init: function (options) {
-            options.disabled = !script.enabled;
-            options.symbol = options.disabled ? 'remove' : 'check';
-          },
-          onClick: function (options) {
-            var vm = this;
-            _.sendMessage({
-              cmd: 'UpdateScriptInfo',
-              data: {
-                id: script.id,
-                enabled: !script.enabled,
-              },
-            })
-            .then(function () {
-              script.enabled = !script.enabled;
-              options.init.call(vm, options);
-              _.options.get('autoReload') && chrome.tabs.reload(_this.store.currentTab.id);
-            });
-          },
-        };
-      });
-    },
-  },
-  watch: {
-    'store.scripts': 'fixStyles',
-    'store.commands': 'fixStyles',
-    'store.domains': 'fixStyles',
-  },
-};

src/popup/views/mixin.js

@@ -1,35 +0,0 @@
-var MenuItem = require('./item');
-var cache = require('../../cache');
-var utils = require('../utils');
-
-module.exports = {
-  template: cache.get('./menu.html'),
-  data: function () {
-    return {
-      store: utils.store,
-    };
-  },
-  components: {
-    MenuItem: MenuItem,
-  },
-  mounted: function () {
-    this.fixStyles();
-  },
-  methods: {
-    fixStyles: function () {
-      var _this = this;
-      _this.$nextTick(function () {
-        var placeholder = _this.$refs.placeholder;
-        var bot = _this.$refs.bot;
-        placeholder.innerHTML = bot.innerHTML;
-        var pad = bot.offsetWidth - bot.clientWidth + 2;
-        placeholder.style.paddingRight = pad + 'px';
-      });
-    },
-    isVisible: function (item) {
-      var hide = item.hide;
-      if (typeof hide === 'function') hide = hide.call(this);
-      return !hide;
-    },
-  },
-};