Convert the find bar to ES6 syntax

web/pdf_find_bar.js

@@ -22,9 +22,10 @@ import { mozL10n } from './ui_utils';
  * also sets up the appropriate events for the controls. Actual searching
  * is done by PDFFindController.
  */
-var PDFFindBar = (function PDFFindBarClosure() {
+class PDFFindBar {
-  function PDFFindBar(options) {
+  constructor(options) {
     this.opened = false;
+
     this.bar = options.bar || null;
     this.toggleButton = options.toggleButton || null;
     this.findField = options.findField || null;
@@ -44,66 +45,63 @@ var PDFFindBar = (function PDFFindBarClosure() {
     }
 
     // Add event listeners to the DOM elements.
-    var self = this;
+    this.toggleButton.addEventListener('click', () => {
-    this.toggleButton.addEventListener('click', function() {
+      this.toggle();
-      self.toggle();
     });
 
-    this.findField.addEventListener('input', function() {
+    this.findField.addEventListener('input', () => {
-      self.dispatchEvent('');
+      this.dispatchEvent('');
     });
 
-    this.bar.addEventListener('keydown', function(evt) {
+    this.bar.addEventListener('keydown', (e) => {
-      switch (evt.keyCode) {
+      switch (e.keyCode) {
         case 13: // Enter
-          if (evt.target === self.findField) {
+          if (e.target === this.findField) {
-            self.dispatchEvent('again', evt.shiftKey);
+            this.dispatchEvent('again', e.shiftKey);
           }
           break;
         case 27: // Escape
-          self.close();
+          this.close();
           break;
       }
     });
 
-    this.findPreviousButton.addEventListener('click', function() {
+    this.findPreviousButton.addEventListener('click', () => {
-      self.dispatchEvent('again', true);
+      this.dispatchEvent('again', true);
     });
 
-    this.findNextButton.addEventListener('click', function() {
+    this.findNextButton.addEventListener('click', () => {
-      self.dispatchEvent('again', false);
+      this.dispatchEvent('again', false);
     });
 
-    this.highlightAll.addEventListener('click', function() {
+    this.highlightAll.addEventListener('click', () => {
-      self.dispatchEvent('highlightallchange');
+      this.dispatchEvent('highlightallchange');
     });
 
-    this.caseSensitive.addEventListener('click', function() {
+    this.caseSensitive.addEventListener('click', () => {
-      self.dispatchEvent('casesensitivitychange');
+      this.dispatchEvent('casesensitivitychange');
     });
 
     this.eventBus.on('resize', this._adjustWidth.bind(this));
   }
 
-  PDFFindBar.prototype = {
+  reset() {
-    reset: function PDFFindBar_reset() {
     this.updateUIState();
-    },
+  }
 
-    dispatchEvent: function PDFFindBar_dispatchEvent(type, findPrev) {
+  dispatchEvent(type, findPrev) {
     this.eventBus.dispatch('find', {
       source: this,
-        type: type,
+      type,
       query: this.findField.value,
       caseSensitive: this.caseSensitive.checked,
       phraseSearch: true,
       highlightAll: this.highlightAll.checked,
-        findPrevious: findPrev
+      findPrevious: findPrev,
     });
-    },
+  }
 
-    updateUIState:
+  updateUIState(state, previous, matchCount) {
-        function PDFFindBar_updateUIState(state, previous, matchCount) {
     var notFound = false;
     var findMsg = '';
     var status = '';
@@ -143,27 +141,25 @@ var PDFFindBar = (function PDFFindBarClosure() {
 
     this.updateResultsCount(matchCount);
     this._adjustWidth();
-    },
-
-    updateResultsCount: function(matchCount) {
-      if (!this.findResultsCount) {
-        return; // no UI control is provided
   }
 
-      // If there are no matches, hide the counter
+  updateResultsCount(matchCount) {
+    if (!this.findResultsCount) {
+      return; // No UI control is provided.
+    }
+
+    // If there are no matches, hide the counter.
     if (!matchCount) {
       this.findResultsCount.classList.add('hidden');
       return;
     }
 
-      // Create the match counter
+    // Create and show the match counter.
     this.findResultsCount.textContent = matchCount.toLocaleString();
-
-      // Show the counter
     this.findResultsCount.classList.remove('hidden');
-    },
+  }
 
-    open: function PDFFindBar_open() {
+  open() {
     if (!this.opened) {
       this.opened = true;
       this.toggleButton.classList.add('toggled');
@@ -173,9 +169,9 @@ var PDFFindBar = (function PDFFindBarClosure() {
     this.findField.focus();
 
     this._adjustWidth();
-    },
+  }
 
-    close: function PDFFindBar_close() {
+  close() {
     if (!this.opened) {
       return;
     }
@@ -183,20 +179,20 @@ var PDFFindBar = (function PDFFindBarClosure() {
     this.toggleButton.classList.remove('toggled');
     this.bar.classList.add('hidden');
     this.findController.active = false;
-    },
+  }
 
-    toggle: function PDFFindBar_toggle() {
+  toggle() {
     if (this.opened) {
       this.close();
     } else {
       this.open();
     }
-    },
+  }
 
   /**
    * @private
    */
-    _adjustWidth: function PDFFindBar_adjustWidth() {
+  _adjustWidth() {
     if (!this.opened) {
       return;
     }
@@ -216,10 +212,8 @@ var PDFFindBar = (function PDFFindBarClosure() {
       // wrap all of them to adjust the width of the find bar.
       this.bar.classList.add('wrapContainers');
     }
-    },
+  }
-  };
+}
-  return PDFFindBar;
-})();
 
 export {
   PDFFindBar,