Auto-fixes: UX Improvements (#2077)

* Whitelist `conversation_search_view` for ESLint

* Autofix `conversation_search_view`

* Remove Vim modeline

* Whitelist globals for ESLint

* Ignore unnamed module IIFE

* Whitelist legacy `then` expressions

* Extract `isSearchable`

Fixes line length violations.

* Remove unused constant

* Remove unnecessary escaping for parens

Suggested by ESLint `no-useless-escape` rule.

* 🎨 Organize file list

* Whitelist `inbox_view` for ESLint

* Autofix `inbox_view`

* Remove Vim modeline

* Add function names

* Whitelist globals for ESLint

* Fix lint errors

* 🔤 `options` properties

* 🎨 Improve `then` chain formatting

* Consider `js/*.js` files as scripts not modules

Forces use of 'use strict' directive per ESLint.

* Ignore unnamed module IIFE

* Fix function argument line breaks

.eslintignore

@@ -17,7 +17,9 @@ test/views/*.js
 # ES2015+ files
 !js/background.js
 !js/models/conversations.js
-!js/views/file_input_view.js
 !js/views/attachment_view.js
+!js/views/conversation_search_view.js
+!js/views/file_input_view.js
+!js/views/inbox_view.js
 !main.js
 !prepare_build.js

app/menu.js

@@ -1,14 +1,14 @@
 function createTemplate(options, messages) {
   const {
-    showDebugLog,
-    showAbout,
-    openReleaseNotes,
-    openNewBugForm,
-    openSupportPage,
     openForums,
-    setupWithImport,
+    openNewBugForm,
+    openReleaseNotes,
+    openSupportPage,
     setupAsNewDevice,
     setupAsStandalone,
+    setupWithImport,
+    showAbout,
+    showDebugLog,
   } = options;
 
   const template = [{
@@ -156,11 +156,11 @@ function createTemplate(options, messages) {
 
 function updateForMac(template, messages, options) {
   const {
-    showWindow,
-    showAbout,
-    setupWithImport,
     setupAsNewDevice,
     setupAsStandalone,
+    setupWithImport,
+    showAbout,
+    showWindow,
   } = options;
 
   // Remove About item and separator from Help menu, since it's on the first menu

js/.eslintrc

@@ -3,4 +3,7 @@
     "browser": true,
     "node": false
   },
+  "parserOptions": {
+    "sourceType": "script"
+  }
 }

js/modules/.eslintrc

@@ -6,5 +6,8 @@
   },
   "globals": {
     "console": true
+  },
+  "parserOptions": {
+    "sourceType": "module"
   }
 }

js/views/attachment_view.js

@@ -11,6 +11,8 @@
 
 // eslint-disable-next-line func-names
 (function () {
+  'use strict';
+
   const ESCAPE_KEY_CODE = 27;
 
   const FileView = Whisper.View.extend({

js/views/conversation_search_view.js

@@ -1,27 +1,33 @@
-/*
+/* global ConversationController: false */
- * vim: ts=4:sw=4:expandtab
+/* global i18n: false */
- */
+/* global Whisper: false */
+
+// eslint-disable-next-line func-names
 (function () {
   'use strict';
+
   window.Whisper = window.Whisper || {};
 
+  const isSearchable = conversation =>
+    conversation.isSearchable();
+
   Whisper.NewContactView = Whisper.View.extend({
     templateName: 'new-contact',
     className: 'conversation-list-item contact',
     events: {
-            'click': 'validate'
+      click: 'validate',
     },
-        initialize: function() {
+    initialize() {
       this.listenTo(this.model, 'change', this.render); // auto update
     },
-        render_attributes: function() {
+    render_attributes() {
       return {
         number: i18n('newContact'),
         title: this.model.getNumber(),
         avatar: this.model.getAvatar(),
       };
     },
-        validate: function() {
+    validate() {
       if (this.model.isValid()) {
         this.$el.addClass('valid');
       } else {
@@ -32,7 +38,7 @@
 
   Whisper.ConversationSearchView = Whisper.View.extend({
     className: 'conversation-search',
-        initialize: function(options) {
+    initialize(options) {
       this.$input = options.input;
       this.$new_contact = this.$('.new-contact');
 
@@ -40,8 +46,8 @@
       // View to display the matched contacts from typeahead
       this.typeahead_view = new Whisper.ConversationListView({
         collection: new Whisper.ConversationCollection([], {
-                    comparator: function(m) { return m.getTitle().toLowerCase(); }
+          comparator(m) { return m.getTitle().toLowerCase(); },
-                })
+        }),
       });
       this.$el.append(this.typeahead_view.el);
       this.initNewContact();
@@ -53,34 +59,32 @@
       'click .new-contact': 'createConversation',
     },
 
-        filterContacts: function() {
+    filterContacts() {
-            var query = this.$input.val().trim();
+      const query = this.$input.val().trim();
       if (query.length) {
         if (this.maybeNumber(query)) {
           this.new_contact_view.model.set('id', query);
           this.new_contact_view.render().$el.show();
           this.new_contact_view.validate();
           this.hideHints();
-
         } else {
           this.new_contact_view.$el.hide();
         }
-                this.pending = this.pending.then(function() {
+        // NOTE: Temporarily allow `then` until we convert the entire file
-                    return this.typeahead.search(query).then(function() {
+        // to `async` / `await`:
-                        this.typeahead_view.collection.reset(
+        /* eslint-disable more/no-then */
-                            this.typeahead.filter(function(m) {
+        this.pending = this.pending.then(() =>
-                                return m.isSearchable();
+          this.typeahead.search(query).then(() => {
-                            })
+            this.typeahead_view.collection.reset(this.typeahead.filter(isSearchable));
-                        );
+          }));
-                    }.bind(this));
+        /* eslint-enable more/no-then */
-                }.bind(this));
         this.trigger('show');
       } else {
         this.resetTypeahead();
       }
     },
 
-        initNewContact: function() {
+    initNewContact() {
       if (this.new_contact_view) {
         this.new_contact_view.undelegateEvents();
         this.new_contact_view.$el.hide();
@@ -89,51 +93,52 @@
       this.new_contact_view = new Whisper.NewContactView({
         el: this.$new_contact,
         model: ConversationController.createTemporary({
-                    type: 'private'
+          type: 'private',
-                })
+        }),
       }).render();
     },
 
-        createConversation: function() {
+    createConversation() {
-            var conversation = this.new_contact_view.model;
       if (this.new_contact_view.model.isValid()) {
+        // NOTE: Temporarily allow `then` until we convert the entire file
+        // to `async` / `await`:
+        // eslint-disable-next-line more/no-then
         ConversationController.getOrCreateAndWait(
           this.new_contact_view.model.id,
           'private'
-                ).then(function(conversation) {
+        ).then((conversation) => {
           this.trigger('open', conversation);
           this.initNewContact();
           this.resetTypeahead();
-                }.bind(this));
+        });
       } else {
         this.new_contact_view.$('.number').text(i18n('invalidNumberError'));
         this.$input.focus();
       }
     },
 
-        reset: function() {
+    reset() {
       this.delegateEvents();
       this.typeahead_view.delegateEvents();
       this.new_contact_view.delegateEvents();
       this.resetTypeahead();
     },
 
-        resetTypeahead: function() {
+    resetTypeahead() {
       this.hideHints();
       this.new_contact_view.$el.hide();
       this.$input.val('').focus();
       if (this.showAllContacts) {
-                this.typeahead.fetchAlphabetical().then(function() {
+        // NOTE: Temporarily allow `then` until we convert the entire file
+        // to `async` / `await`:
+        // eslint-disable-next-line more/no-then
+        this.typeahead.fetchAlphabetical().then(() => {
           if (this.typeahead.length > 0) {
-                        this.typeahead_view.collection.reset(
+            this.typeahead_view.collection.reset(this.typeahead.filter(isSearchable));
-                            this.typeahead.filter(function(m) {
-                                return m.isSearchable();
-                            })
-                        );
           } else {
             this.showHints();
           }
-                }.bind(this));
+        });
         this.trigger('show');
       } else {
         this.typeahead_view.collection.reset([]);
@@ -141,27 +146,26 @@
       }
     },
 
-        showHints: function() {
+    showHints() {
       if (!this.hintView) {
         this.hintView = new Whisper.HintView({
           className: 'contact placeholder',
-                    content: i18n('newPhoneNumber')
+          content: i18n('newPhoneNumber'),
         }).render();
         this.hintView.$el.insertAfter(this.$input);
       }
       this.hintView.$el.show();
     },
 
-        hideHints: function() {
+    hideHints() {
       if (this.hintView) {
         this.hintView.remove();
         this.hintView = null;
       }
     },
 
-        maybeNumber: function(number) {
+    maybeNumber(number) {
-            return number.replace(/[\s-.\(\)]*/g,'').match(/^\+?[0-9]*$/);
+      return number.replace(/[\s-.()]*/g, '').match(/^\+?[0-9]*$/);
-        }
+    },
   });
-
+}());
-})();

js/views/inbox_view.js

@@ -1,6 +1,10 @@
-/*
+/* global ConversationController: false */
- * vim: ts=4:sw=4:expandtab
+/* global extension: false */
- */
+/* global getInboxCollection: false */
+/* global i18n: false */
+/* global Whisper: false */
+
+// eslint-disable-next-line func-names
 (function () {
   'use strict';
 
@@ -8,86 +12,88 @@
 
   Whisper.ConversationStack = Whisper.View.extend({
     className: 'conversation-stack',
-        open: function(conversation) {
+    open(conversation) {
-            var id = 'conversation-' + conversation.cid;
+      const id = `conversation-${conversation.cid}`;
       if (id !== this.el.firstChild.id) {
-                this.$el.first().find('video, audio').each(function() {
+        this.$el.first().find('video, audio').each(function pauseMedia() {
           this.pause();
         });
-                var $el = this.$('#'+id);
+        let $el = this.$(`#${id}`);
         if ($el === null || $el.length === 0) {
-                    var view = new Whisper.ConversationView({
+          const view = new Whisper.ConversationView({
             model: conversation,
-                        window: this.model.window
+            window: this.model.window,
           });
+          // eslint-disable-next-line prefer-destructuring
           $el = view.$el;
         }
         $el.prependTo(this.el);
         conversation.trigger('opened');
       }
-        }
+    },
   });
 
   Whisper.FontSizeView = Whisper.View.extend({
     defaultSize: 14,
     maxSize: 30,
     minSize: 14,
-        initialize: function() {
+    initialize() {
       this.currentSize = this.defaultSize;
       this.render();
     },
-        events: { 'keydown': 'zoomText' },
+    events: { keydown: 'zoomText' },
-        zoomText: function(e) {
+    zoomText(e) {
       if (!e.ctrlKey) {
         return;
       }
-            var keyCode = e.which || e.keyCode;
+      const keyCode = e.which || e.keyCode;
-            var maxSize = 22; // if bigger text goes outside send-message textarea
+      const maxSize = 22; // if bigger text goes outside send-message textarea
-            var minSize = 14;
+      const minSize = 14;
-            if (keyCode === 189 || keyCode == 109) {
+      if (keyCode === 189 || keyCode === 109) {
         if (this.currentSize > minSize) {
-                    this.currentSize--;
+          this.currentSize -= 1;
         }
-            } else if (keyCode === 187 || keyCode == 107) {
+      } else if (keyCode === 187 || keyCode === 107) {
         if (this.currentSize < maxSize) {
-                    this.currentSize++;
+          this.currentSize += 1;
         }
       }
       this.render();
     },
-        render: function() {
+    render() {
-            this.$el.css('font-size', this.currentSize + 'px');
+      this.$el.css('font-size', `${this.currentSize}px`);
-        }
+    },
   });
 
 
   Whisper.AppLoadingScreen = Whisper.View.extend({
     templateName: 'app-loading-screen',
     className: 'app-loading-screen',
-        updateProgress: function(count) {
+    updateProgress(count) {
       if (count > 0) {
-                var message = i18n('loadingMessages', count.toString());
+        const message = i18n('loadingMessages', count.toString());
         this.$('.message').text(message);
       }
     },
     render_attributes: {
-            message: i18n('loading')
+      message: i18n('loading'),
-        }
+    },
   });
 
   Whisper.InboxView = Whisper.View.extend({
     templateName: 'two-column',
     className: 'inbox index',
-        initialize: function (options) {
+    initialize(options = {}) {
-            options = options || {};
-
       this.ready = false;
       this.render();
       this.$el.attr('tabindex', '1');
+
+      // eslint-disable-next-line no-new
       new Whisper.FontSizeView({ el: this.$el });
+
       this.conversation_stack = new Whisper.ConversationStack({
         el: this.$('.conversation-stack'),
-                model: { window: options.window }
+        model: { window: options.window },
       });
 
       if (!options.initialLoadComplete) {
@@ -97,15 +103,15 @@
         this.startConnectionListener();
       }
 
-            var inboxCollection = getInboxCollection();
+      const inboxCollection = getInboxCollection();
 
-            inboxCollection.on('messageError', function() {
+      inboxCollection.on('messageError', () => {
         this.networkStatusView.render();
-            }.bind(this));
+      });
 
       this.inboxListView = new Whisper.ConversationListView({
         el: this.$('.inbox'),
-                collection : inboxCollection
+        collection: inboxCollection,
       }).render();
 
       this.inboxListView.listenTo(
@@ -121,31 +127,35 @@
 
       this.searchView = new Whisper.ConversationSearchView({
         el: this.$('.search-results'),
-                input : this.$('input.search')
+        input: this.$('input.search'),
       });
 
       this.searchView.$el.hide();
 
-            this.listenTo(this.searchView, 'hide', function() {
+      this.listenTo(this.searchView, 'hide', function toggleVisibility() {
         this.searchView.$el.hide();
         this.inboxListView.$el.show();
       });
-            this.listenTo(this.searchView, 'show', function() {
+      this.listenTo(this.searchView, 'show', function toggleVisibility() {
         this.searchView.$el.show();
         this.inboxListView.$el.hide();
       });
-            this.listenTo(this.searchView, 'open',
+      this.listenTo(
-                this.openConversation.bind(this, null));
+        this.searchView,
+        'open',
+        this.openConversation.bind(this, null)
+      );
 
       this.networkStatusView = new Whisper.NetworkStatusView();
-            this.$el.find('.network-status-container').append(this.networkStatusView.render().el);
+      this.$el.find('.network-status-container')
+        .append(this.networkStatusView.render().el);
 
-            extension.windows.onClosed(function() {
+      extension.windows.onClosed(() => {
         this.inboxListView.stopListening();
-            }.bind(this));
+      });
 
       if (extension.expired()) {
-                var banner = new Whisper.ExpiredAlertBanner().render();
+        const banner = new Whisper.ExpiredAlertBanner().render();
         banner.$el.prependTo(this.$el);
         this.$el.addClass('expired');
       }
@@ -158,7 +168,7 @@
       restartSignal: i18n('restartSignal'),
     },
     events: {
-            'click': 'onClick',
+      click: 'onClick',
       'click #header': 'focusHeader',
       'click .conversation': 'focusConversation',
       'click .global-menu .hamburger': 'toggleMenu',
@@ -168,9 +178,9 @@
       'click .restart-signal': window.restart,
       'show .lightbox': 'showLightbox',
     },
-        startConnectionListener: function() {
+    startConnectionListener() {
-            this.interval = setInterval(function() {
+      this.interval = setInterval(() => {
-                var status = window.getSocketStatus();
+        const status = window.getSocketStatus();
         switch (status) {
           case WebSocket.CONNECTING:
             break;
@@ -186,23 +196,29 @@
             // if we failed to connect, we pretend we got an empty event
             this.onEmpty();
             break;
+          default:
+            console.log(
+              'Whisper.InboxView::startConnectionListener:',
+              'Unknown web socket status:', status
+            );
+            break;
         }
-            }.bind(this), 1000);
+      }, 1000);
     },
-        onEmpty: function() {
+    onEmpty() {
-            var view = this.appLoadingScreen;
+      const view = this.appLoadingScreen;
       if (view) {
         this.appLoadingScreen = null;
         view.remove();
       }
     },
-        onProgress: function(count) {
+    onProgress(count) {
-            var view = this.appLoadingScreen;
+      const view = this.appLoadingScreen;
       if (view) {
         view.updateProgress(count);
       }
     },
-        focusConversation: function(e) {
+    focusConversation(e) {
       if (e && this.$(e.target).closest('.placeholder').length) {
         return;
       }
@@ -210,24 +226,24 @@
       this.$('#header, .gutter').addClass('inactive');
       this.$('.conversation-stack').removeClass('inactive');
     },
-        focusHeader: function() {
+    focusHeader() {
       this.$('.conversation-stack').addClass('inactive');
       this.$('#header, .gutter').removeClass('inactive');
       this.$('.conversation:first .menu').trigger('close');
     },
-        reloadBackgroundPage: function() {
+    reloadBackgroundPage() {
       window.location.reload();
     },
-        showSettings: function() {
+    showSettings() {
-            var view = new Whisper.SettingsView();
+      const view = new Whisper.SettingsView();
       view.$el.appendTo(this.el);
     },
-        filterContacts: function(e) {
+    filterContacts(e) {
       this.searchView.filterContacts(e);
-            var input = this.$('input.search');
+      const input = this.$('input.search');
       if (input.val().length > 0) {
         input.addClass('active');
-                var textDir = window.getComputedStyle(input[0]).direction;
+        const textDir = window.getComputedStyle(input[0]).direction;
         if (textDir === 'ltr') {
           input.removeClass('rtl').addClass('ltr');
         } else if (textDir === 'rtl') {
@@ -237,47 +253,46 @@
         input.removeClass('active');
       }
     },
-        openConversation: function(e, conversation) {
+    openConversation(e, conversation) {
       this.searchView.hideHints();
       if (conversation) {
-                conversation = ConversationController.get(conversation.id);
+        this.conversation_stack.open(ConversationController.get(conversation.id));
-                this.conversation_stack.open(conversation);
         this.focusConversation();
       }
     },
-        toggleMenu: function() {
+    toggleMenu() {
       this.$('.global-menu .menu-list').toggle();
     },
-        showLightbox: function(e) {
+    showLightbox(e) {
       this.$el.append(e.target);
     },
-        closeRecording: function(e) {
+    closeRecording(e) {
       if (e && this.$(e.target).closest('.capture-audio').length > 0) {
         return;
       }
       this.$('.conversation:first .recorder').trigger('close');
     },
-        closeMenu: function(e) {
+    closeMenu(e) {
       if (e && this.$(e.target).parent('.global-menu').length > 0) {
         return;
       }
 
       this.$('.global-menu .menu-list').hide();
     },
-        onClick: function(e) {
+    onClick(e) {
       this.closeMenu(e);
       this.closeRecording(e);
-        }
+    },
   });
 
   Whisper.ExpiredAlertBanner = Whisper.View.extend({
     templateName: 'expired_alert',
     className: 'expiredAlert clearfix',
-        render_attributes: function() {
+    render_attributes() {
       return {
         expiredWarning: i18n('expiredWarning'),
         upgrade: i18n('upgrade'),
       };
-        }
+    },
   });
-})();
+}());