Split views

scripts/minifyHtml.js

@@ -5,7 +5,7 @@ const minify = require('html-minifier').minify;
 module.exports = function (data) {
   data = String(data);
   const fragments = [];
-  const html = data.replace(/<%.*?%>/g, function (match) {
+  const html = data.replace(/<%[\s\S]*?%>/g, function (match) {
     fragments.push(match);
     return `__frag_${fragments.length - 1}__`;
   });

src/background/requests.js

@@ -149,9 +149,9 @@ var requests = function () {
     types: ['xmlhttprequest'],
   }, ['blocking', 'requestHeaders']);
 
-  chrome.webRequest.onBeforeRequest.addListener(function (req) {
+  chrome.webRequest.onHeadersReceived.addListener(function (req) {
     // onBeforeRequest is fired for local files too
-    if (/\.user\.js([\?#]|$)/.test(req.url)) {
+    if (~([200, 304].indexOf(req.statusCode)) && /\.user\.js([\?#]|$)/.test(req.url)) {
       var noredirect = {redirectUrl: 'javascript:history.back()'};
       var x = new XMLHttpRequest();
       x.open('GET', req.url, false);
@@ -178,7 +178,7 @@ var requests = function () {
   }, {
     urls: ['<all_urls>'],
     types: ['main_frame'],
-  }, ['blocking']);
+  }, ['blocking', 'responseHeaders']);
 
   return {
     getRequestId: getRequestId,

src/cache.js

@@ -30,22 +30,22 @@
 var BaseView = Backbone.View.extend({
   initialize: function () {
     var _this = this;
-    var gotTemplate;
     if (_this.templateUrl)
-      gotTemplate = _.cache.get(_this.templateUrl)
+      _this.__gotTemplate = _.cache.get(_this.templateUrl)
       .then(function (fn) {
         _this.templateFn = fn;
       });
-    var render = _this.render.bind(_this);
-    var initI18n = _this.initI18n.bind(_this);
-    _this.render = function () {
-      gotTemplate
-        ? gotTemplate.then(render).then(initI18n)
-        : render();
-      return _this;
-    };
+    _.bindAll(_this, 'render', 'initI18n');
     _this.render();
   },
+  _render: function () {
+    this.$el.html(this.templateFn());
+  },
+  render: function () {
+    var render = this._render.bind(this);
+    (this.__gotTemplate || Promise.resolve()).then(render).then(this.initI18n);
+    return this;
+  },
   initI18n: function () {
     _.forEach(this.$('[data-i18n]'), function (node) {
       node.innerHTML = _.i18n(node.dataset.i18n);

src/options/style.css

@@ -26,6 +26,9 @@ a {
 textarea, input[type=text] {
   width: 100%;
 }
+input[disabled] ~ * {
+  color: gray;
+}
 hr {
   border: none;
   border-top: 1px solid darkgray;

src/options/templates/confirm-options.html

@@ -0,0 +1,11 @@
+<label>
+  <input type=checkbox data-check="closeAfterInstall" id="cbClose" <%=
+  it.closeAfterInstall ? 'checked' : '' %>>
+  <span data-i18n=installOptionClose></span>
+</label>
+<label>
+  <input type=checkbox data-check="trackLocalFile" id="cbTrack" <%=
+  it.trackLocalFile ? 'checked' : '' %> <%=
+  it.closeAfterInstall ? 'disabled' : '' %>>
+  <span data-i18n=installOptionTrack></span>
+</label>

src/options/templates/confirm.html

@@ -2,16 +2,7 @@
   <div class=buttons>
     <div>
       <button class="button-toggle" data-i18n=buttonInstallOptions></button>
-      <div class="button-panel options-panel">
-        <label>
-          <input type=checkbox data-check="closeAfterInstall" id="cbClose" <%= it.options.closeAfterInstall ? 'checked' : '' %>>
-          <span data-i18n=installOptionClose></span>
-        </label>
-        <label>
-          <input type=checkbox data-check="trackLocalFile" id="cbTrack" <%= it.options.trackLocalFile ? 'checked' : '' %>>
-          <span data-i18n=installOptionTrack></span>
-        </label>
-      </div>
+      <!--<div class="button-panel options-panel"></div>-->
     </div>
     <button id=btnInstall data-i18n=buttonConfirmInstallation></button>
     <button id=btnClose data-i18n=buttonClose></button>

src/options/views/confirm-options.js

@@ -0,0 +1,17 @@
+var ConfirmOptionsView = BaseView.extend({
+  className: 'button-panel options-panel',
+  events: {
+    'mousedown': 'stopPropagation',
+    'change [data-check]': 'updateCheckbox',
+    'change #cbClose': 'render',
+  },
+  templateUrl: '/options/templates/confirm-options.html',
+  _render: function () {
+    var options = _.options.getAll();
+    this.$el.html(this.templateFn(options));
+  },
+  stopPropagation: function (e) {
+    e.stopPropagation();
+  },
+  updateCheckbox: _.updateCheckbox,
+});

src/options/views/confirm.js

@@ -1,23 +1,21 @@
 var ConfirmView = BaseView.extend({
   el: '#app',
   events: {
-    'click .button-toggle': 'toggleButton',
+    'click .button-toggle': 'toggleOptions',
     'click #btnInstall': 'installScript',
     'click #btnClose': 'close',
-    'change [data-check]': 'updateCheckbox',
-    'change #cbClose': 'updateClose',
   },
   templateUrl: '/options/templates/confirm.html',
   initialize: function (url, _from) {
     this.url = url;
     this.from = _from;
+    _.bindAll(this, 'hideOptions');
     BaseView.prototype.initialize.call(this);
   },
-  render: function () {
+  _render: function () {
     var _this = this;
     _this.$el.html(_this.templateFn({
       url: _this.url,
-      options: _.options.getAll(),
     }));
     _this.showMessage(_.i18n('msgLoadingData'));
     _this.loadedEditor = _.initEditor({
@@ -30,9 +28,8 @@ var ConfirmView = BaseView.extend({
     _this.loadData().then(function () {
       _this.parseMeta();
     });
-    return _this;
+    _this.$toggler = _this.$('.button-toggle');
   },
-  updateCheckbox: _.updateCheckbox,
   loadData: function () {
     var _this = this;
     _this.$('#btnInstall').prop('disabled', true);
@@ -95,15 +92,25 @@ var ConfirmView = BaseView.extend({
       return Promise.reject();
     });
   },
-  toggleButton: function (e) {
-    this.$(e.target).toggleClass('active');
+  hideOptions: function () {
+    if (!this.optionsView) return;
+    this.$toggler.removeClass('active');
+    this.optionsView.remove();
+    this.optionsView = null;
+  },
+  toggleOptions: function (e) {
+    if (this.optionsView) {
+      this.hideOptions();
+    } else {
+      this.$toggler.addClass('active');
+      this.optionsView = new ConfirmOptionsView;
+      this.optionsView.$el.insertAfter(this.$toggler);
+      $(document).one('mousedown', this.hideOptions);
+    }
   },
   close: function () {
     window.close();
   },
-  updateClose: function (e) {
-    this.$('#cbTrack').prop('disabled', e.target.checked);
-  },
   showMessage: function (msg) {
     this.$('#msg').html(msg);
   },

src/options/views/edit-meta.js

@@ -3,8 +3,9 @@ var MetaView = BaseView.extend({
   templateUrl: '/options/templates/edit-meta.html',
   events: {
     'change [data-id]': 'onChange',
+    'mousedown': 'onMousedown',
   },
-  render: function () {
+  _render: function () {
     var model = this.model;
     var it = model.toJSON();
     it.__name = model.meta.name;
@@ -18,4 +19,7 @@ var MetaView = BaseView.extend({
     var res = this.getValue(e.target);
     this.model.set(res.key, res.value);
   },
+  onMousedown: function (e) {
+    e.stopPropagation();
+  },
 });

src/options/views/edit.js

@@ -2,7 +2,7 @@ var EditView = BaseView.extend({
   className: 'frame edit',
   templateUrl: '/options/templates/edit.html',
   events: {
-    'click .button-toggle': 'toggleButton',
+    'click .button-toggle': 'toggleMeta',
     'change [data-id]': 'updateCheckbox',
     'click #editorSave': 'save',
     'click #editorClose': 'close',
@@ -18,18 +18,20 @@ var EditView = BaseView.extend({
     _this.listenTo(_this.model, 'change', function (model) {
       _this.updateStatus(true);
     });
+    _.bindAll(_this, 'save', 'close', 'hideMeta');
   },
-  render: function () {
+  _render: function () {
     var _this = this;
     var it = _this.model.toJSON();
     _this.$el.html(_this.templateFn(it));
+    _this.$toggler = _this.$('.button-toggle');
     var gotScript = it.id ? _.sendMessage({
       cmd: 'GetScript',
       data: it.id,
     }) : Promise.resolve(it);
     _this.loadedEditor = _.initEditor({
       container: _this.$('.editor-code')[0],
-      onsave: _this.save.bind(_this),
+      onsave: _this.save,
       onexit: _this.close,
       onchange: function (e) {
         _this.model.set('code', _this.editor.getValue());
@@ -76,15 +78,20 @@ var EditView = BaseView.extend({
   saveClose: function () {
     this.save().then(this.close.bind(this));
   },
-  toggleButton: function (e) {
+  hideMeta: function () {
+    if (!this.metaView) return;
+    this.$toggler.removeClass('active');
+    this.metaView.remove();
+    this.metaView = null;
+  },
+  toggleMeta: function (e) {
     if (this.metaView) {
-      this.$(e.target).removeClass('active');
-      this.metaView.remove();
-      this.metaView = null;
+      this.hideMeta();
     } else {
-      this.$(e.target).addClass('active');
+      this.$toggler.addClass('active');
       this.metaView = new MetaView({model: this.metaModel});
       this.metaView.$el.insertAfter(e.target);
+      $(document).one('mousedown', this.hideMeta);
     }
   },
   updateCheckbox: function (e) {

src/options/views/main.js

@@ -11,9 +11,8 @@ var MainView = BaseView.extend({
     _this.tab = _this.tabs[tab] || _this.tabs[''];
     BaseView.prototype.initialize.call(_this);
   },
-  render: function () {
+  _render: function () {
     this.$el.html(this.templateFn({tab: this.tab.prototype.name}));
     this.view = new this.tab;
-    return this;
   },
 });

src/options/views/script.js

@@ -30,7 +30,7 @@ var ScriptView = BaseView.extend({
         _this.model.set('_icon', DEFAULT_ICON);
       });
   },
-  render: function () {
+  _render: function () {
     var _this = this;
     var model = _this.model;
     var it = model.toJSON();
@@ -42,7 +42,6 @@ var ScriptView = BaseView.extend({
     if (!it.enabled) _this.$el.addClass('disabled');
     else _this.$el.removeClass('disabled');
     _this.loadIcon();
-    return _this;
   },
   getAuthor: function (text) {
     if (!text) return '';

src/options/views/tab-about.js

@@ -2,8 +2,4 @@ var AboutTab = BaseView.extend({
   el: '#tab',
   name: 'about',
   templateUrl: '/options/templates/tab-about.html',
-  render: function () {
-    this.$el.html(this.templateFn());
-    return this;
-  },
 });

src/options/views/tab-installed.js

@@ -26,14 +26,13 @@ var MainTab = BaseView.extend({
       _this.editView = null;
     }
   },
-  render: function () {
+  _render: function () {
     this.$el.html(this.templateFn());
     this.$list = this.$('.scripts');
     this.$bd = this.$('.backdrop');
     this.$bdm = this.$('.backdrop > div');
     this.setBackdrop();
     this.addAll();
-    return this;
   },
   setBackdrop: function () {
     if (scriptList.loading) {

src/options/views/tab-settings.js

@@ -5,12 +5,11 @@ var ExportList = BaseView.extend({
     BaseView.prototype.initialize.call(this);
     this.listenTo(scriptList, 'reset change', this.render);
   },
-  render: function () {
+  _render: function () {
     var _this = this;
     _this.$el.html(scriptList.map(function (script) {
       return _this.templateFn(script.toJSON());
     }).join(''));
-    return _this;
   },
   getSelected: function () {
     var selected = [];
@@ -43,13 +42,12 @@ var SettingsTab = BaseView.extend({
     'click #bVacuum': 'onVacuum',
   },
   templateUrl: '/options/templates/tab-settings.html',
-  render: function () {
+  _render: function () {
     var options = _.options.getAll();
     this.$el.html(this.templateFn(options));
     this.$('#sInjectMode').val(options.injectMode);
     this.updateInjectHint();
     this.exportList = new ExportList;
-    return this;
   },
   updateCheckbox: _.updateCheckbox,
   updateAutoUpdate: function (e) {

src/popup/views/command.js

@@ -3,7 +3,7 @@ var CommandsView = MenuBaseView.extend({
     MenuBaseView.prototype.initialize.call(this);
     this.listenTo(commandsMenu, 'reset', this.render);
   },
-  render: function () {
+  _render: function () {
     if (!commandsMenu.length)
       return app.navigate('', {trigger: true, replace: true});
     var _this = this;

src/popup/views/item.js

@@ -8,7 +8,7 @@ var MenuItemView = BaseView.extend({
     BaseView.prototype.initialize.call(this);
     this.listenTo(this.model, 'change', this.render);
   },
-  render: function () {
+  _render: function () {
     var it = this.model.toJSON();
     if (typeof it.symbol === 'function')
       it.symbol = it.symbol(it.data);

src/popup/views/menu.js

@@ -4,7 +4,7 @@ var MenuView = MenuBaseView.extend({
     this.listenTo(scriptsMenu, 'reset', this.render);
     this.listenTo(commandsMenu, 'reset', this.render);
   },
-  render: function () {
+  _render: function () {
     var _this = this;
     _this.$el.html(_this.templateFn({
       hasSep: !!scriptsMenu.length