fix loading error of editor

src/cache.js

@@ -14,6 +14,8 @@ define('cache', function (require, _exports, module) {
     throw 'Cache not found: ' + key;
   };
 
+  var _ = require('utils/common');
+  Vue.filter('i18n', _.i18n);
   module.exports = new Cache();
   require('templates');
 

src/common.js

@@ -1,7 +1,6 @@
 define('utils/common', function (_require, _exports, module) {
   var _ = module.exports = {};
   _.i18n = chrome.i18n.getMessage;
-  Vue.filter('i18n', _.i18n);
 
   _.options = function () {
     function getOption(key, def) {

src/options/components/confirm.html

@@ -2,8 +2,8 @@
   <div class=frame-header>
     <div class=buttons>
       <div v-dropdown>
-        <button dropdown-toggle v-text="'buttonInstallOptions'|i18n" @click="showOptions=!showOptions"></button>
-        <div class="dropdown-menu options-panel" @mousedown.stop v-show="showOptions">
+        <button dropdown-toggle v-text="'buttonInstallOptions'|i18n"></button>
+        <div class="dropdown-menu options-panel" @mousedown.stop>
           <label>
             <input type=checkbox v-setting="'closeAfterInstall'">
             <span v-text="'installOptionClose'|i18n"></span>
@@ -19,8 +19,8 @@
       <button v-text="'buttonClose'|i18n" @click="close"></button>
     </div>
     <h1><span v-text="'labelInstall'|i18n"></span> - <span v-text="'extName'|i18n"></span></h1>
-    <div class=ellipsis :title="url">{{url}}</div>
-    <div class=ellipsis>{{message}}</div>
+    <div class="ellipsis confirm-url" :title="params.url">{{params.url}}</div>
+    <div class="ellipsis confirm-msg">{{message}}</div>
   </div>
   <div class=frame-body>
     <editor readonly :on-exit="close" :content="code"></editor>

src/options/components/editor.js

@@ -62,7 +62,7 @@ define('views/Editor', function (require, _exports, module) {
   }
 
   var cache = require('cache');
-  initCodeMirror();
+  var readyCodeMirror = initCodeMirror();
 
   module.exports = {
     props: {
@@ -76,41 +76,52 @@ define('views/Editor', function (require, _exports, module) {
     template: cache.get('/options/components/editor.html'),
     ready: function () {
       var _this = this;
-      var editor = _this.editor = CodeMirror(_this.$el, {
-        continueComments: true,
-        matchBrackets: true,
-        autoCloseBrackets: true,
-        highlightSelectionMatches: true,
-        lineNumbers: true,
-        mode: 'javascript',
-        lineWrapping: true,
-        styleActiveLine: true,
-        foldGutter: true,
-        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
-      });
-      _this.readonly && editor.setOption('readOnly', _this.readonly);
-      editor.on('change', function () {
-        _this.cachedContent = editor.getValue();
-        _this.content = _this.cachedContent;
+      readyCodeMirror.then(function () {
+        var editor = _this.editor = CodeMirror(_this.$el, {
+          continueComments: true,
+          matchBrackets: true,
+          autoCloseBrackets: true,
+          highlightSelectionMatches: true,
+          lineNumbers: true,
+          mode: 'javascript',
+          lineWrapping: true,
+          styleActiveLine: true,
+          foldGutter: true,
+          gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        });
+        _this.readonly && editor.setOption('readOnly', _this.readonly);
+        editor.on('change', function () {
+          _this.cachedContent = editor.getValue();
+          _this.content = _this.cachedContent;
+        });
+        var extraKeys = {};
+        if (_this.onExit) {
+          extraKeys.Esc = _this.onExit;
+        }
+        if (_this.onSave) {
+          extraKeys['Ctrl-S'] = extraKeys['Cmd-S'] = _this.onSave;
+        }
+        editor.setOption('extraKeys', extraKeys);
+        _this.update();
       });
-      var extraKeys = {};
-      if (_this.onExit) {
-        extraKeys.Esc = _this.onExit;
-      }
-      if (_this.onSave) {
-        extraKeys['Ctrl-S'] = extraKeys['Cmd-S'] = _this.onSave;
-      }
-      editor.setOption('extraKeys', extraKeys);
     },
     watch: {
       content: function (content) {
         var _this = this;
         if (content !== _this.cachedContent) {
-          _this.editor.setValue(_this.cachedContent = content);
-          _this.editor.getDoc().clearHistory();
-          _this.editor.focus();
+          _this.cachedContent = content;
+          _this.update();
         }
       },
     },
+    methods: {
+      update: function () {
+        var _this = this;
+        if (!_this.editor || _this.cachedContent == null) return;
+        _this.editor.setValue(_this.cachedContent);
+        _this.editor.getDoc().clearHistory();
+        _this.editor.focus();
+      },
+    },
   };
 });

src/options/components/script.html

@@ -9,7 +9,7 @@
   <div class=script-info>
     <a class="script-name ellipsis" target=_blank :href="homepageURL"
       v-text="script.custom.name||getLocaleString('name')"></a>
-    <a class="script-support" :class="{hide:!script.meta.supportURL}"
+    <a class="script-support" v-show="script.meta.supportURL"
       target=_blank :href="script.meta.supportURL">
       <svg class="icon"><use xlink:href="#question"/></svg>
     </a>

src/options/index.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title></title>
-    <link rel="shortcut icon" type="image/png" href="/images/icon16.png">
-    <link rel="stylesheet" href="style.css">
-    <script src="/lib/vue.min.js"></script>
-    <script src="/lib/zip.js/zip.js"></script>
-    <script src="/lib/require-lite.js"></script>
-    <script src="/common.js"></script>
-    <script src="/cache.js"></script>
-  </head>
-  <body>
-    <component :is="type" :params="params"></component>
-    <script src="app.js"></script>
-  </body>
+<head>
+  <meta charset="utf-8">
+  <title></title>
+  <link rel="shortcut icon" type="image/png" href="/images/icon16.png">
+  <link rel="stylesheet" href="style.css">
+  <script src="/lib/vue.min.js"></script>
+  <script src="/lib/zip.js/zip.js"></script>
+  <script src="/lib/require-lite.js"></script>
+  <script src="/common.js"></script>
+  <script src="/cache.js"></script>
+</head>
+<body>
+  <component :is="type" :params="params"></component>
+  <script src="app.js"></script>
+</body>
 </html>

src/options/style.css

@@ -115,7 +115,8 @@ aside img {
   padding: 0 .5rem;
   border-bottom: 1px solid darkgray;
 }
-.backdrop, .scripts {
+.backdrop,
+.scripts {
   position: absolute;
   top: 30px;
   left: 0;
@@ -126,7 +127,6 @@ aside img {
   overflow-y: auto;
 }
 .backdrop {
-  display: none;
   text-align: center;
   color: gray;
   z-index: 9;
@@ -227,14 +227,15 @@ fieldset.title {
 .options-panel label {
   display: block;
 }
-.editor-code, .editor-code .CodeMirror {
+.editor-code,
+.editor-code .CodeMirror {
   height: 100%;
 }
-#url {
+.confirm-url {
   float: left;
   max-width: 50%;
 }
-#msg {
+.confirm-msg {
   text-align: right;
 }
 .script {
@@ -245,9 +246,6 @@ fieldset.title {
   border-radius: 4px;
   transition: transform .5s;
 }
-.script .hide {
-  display: none;
-}
 .script:hover {
   border-color: darkgray;
 }
@@ -286,7 +284,6 @@ fieldset.title {
   overflow-y: auto;
 }
 .disabled .script-icon {
-  -webkit-filter: grayscale(.5);
   filter: grayscale(.5);
 }
 .disabled .script-name {

src/options/utils/index.js

@@ -18,7 +18,7 @@ define('utils', function (require, exports, _module) {
         var matches = url.match(route.re);
         if (matches) {
           return route.names.reduce(function (params, name, i) {
-            params[name] = matches[i + 1];
+            params[name] = decodeURIComponent(matches[i + 1]);
             return params;
           }, {});
         }