@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-toolbar-view.js

@@ -1,36 +1,56 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _uniq = _interopRequireDefault(require("lodash/uniq"));
-var _escape = _interopRequireDefault(require("lodash/escape"));
-var _asap = _interopRequireDefault(require("asap"));
-var _ud = require("ud");
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _streamWaitFor = _interopRequireDefault(require("../../../lib/stream-wait-for"));
-var _makeMutationObserverStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-stream"));
-var _insertElementInOrder = _interopRequireDefault(require("../../../lib/dom/insert-element-in-order"));
-var _isElementVisible = _interopRequireDefault(require("../../../../common/isElementVisible"));
-var _gmailElementGetter = _interopRequireDefault(require("../gmail-element-getter"));
-var _buttonView = _interopRequireDefault(require("../widgets/buttons/button-view"));
-var _gmailDropdownView = _interopRequireDefault(require("../widgets/gmail-dropdown-view"));
-var _basicButtonViewController = _interopRequireDefault(require("../../../widgets/buttons/basic-button-view-controller"));
-var _dropdownButtonViewController = _interopRequireDefault(require("../../../widgets/buttons/dropdown-button-view-controller"));
-var _gmailThreadView = _interopRequireDefault(require("./gmail-thread-view"));
-var _gmailRowListView = _interopRequireDefault(require("./gmail-row-list-view"));
-var _toolbars = require("../../../constants/toolbars");
-var _logger = _interopRequireDefault(require("../../../lib/logger"));
+/* @flow */
+
+import uniq from 'lodash/uniq';
+import escape from 'lodash/escape';
+import asap from 'asap';
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import type { Stopper } from 'kefir-stopper';
+
+import streamWaitFor from '../../../lib/stream-wait-for';
+import makeMutationObserverStream from '../../../lib/dom/make-mutation-observer-stream';
+import insertElementInOrder from '../../../lib/dom/insert-element-in-order';
+import isElementVisible from '../../../../common/isElementVisible';
+
+import GmailElementGetter from '../gmail-element-getter';
+
+import ButtonView from '../widgets/buttons/button-view';
+import GmailDropdownView from '../widgets/gmail-dropdown-view';
+import BasicButtonViewController from '../../../widgets/buttons/basic-button-view-controller';
+import DropdownButtonViewController from '../../../widgets/buttons/dropdown-button-view-controller';
+import GmailThreadView from './gmail-thread-view';
+import GmailRowListView from './gmail-row-list-view';
+
+import { SECTION_NAMES } from '../../../constants/toolbars';
+
+import type GmailDriver from '../gmail-driver';
+import type { RouteViewDriver } from '../../../driver-interfaces/route-view-driver';
+
+import Logger from '../../../lib/logger';
+
 class GmailToolbarView {
-  constructor(element, driver, routeViewDriver, parent) {
-    (0, _defineProperty2.default)(this, "_buttonViewControllers", new Set());
-    (0, _defineProperty2.default)(this, "_moreMenuItems", []);
-    (0, _defineProperty2.default)(this, "_isUpdateButtonClassesScheduled", false);
-    (0, _defineProperty2.default)(this, "_moreMenuItemsContainer", null);
+  _element: HTMLElement;
+  _driver: GmailDriver;
+  _ready: Kefir.Observable<GmailToolbarView>;
+  _stopper: Stopper;
+  _routeViewDriver: RouteViewDriver;
+  _buttonViewControllers: Set<
+    DropdownButtonViewController | BasicButtonViewController
+  > = new Set();
+  _moreMenuItems: Array<{ buttonDescriptor: Object }> = [];
+  _toolbarState: ?string;
+  _threadViewDriver: ?GmailThreadView;
+  _rowListViewDriver: ?GmailRowListView;
+  _isUpdateButtonClassesScheduled: boolean = false;
+  _moreMenuItemsContainer: ?HTMLElement = null;
+
+  constructor(
+    element: HTMLElement,
+    driver: GmailDriver,
+    routeViewDriver: RouteViewDriver,
+    parent: GmailThreadView | GmailRowListView
+  ) {
     // Important: Multiple GmailToolbarViews will be created for the same
     // toolbar element in preview pane mode! When a GmailToolbarView is
     // created, it adds some attributes to the element corresponding to the
@@ -40,25 +60,31 @@ class GmailToolbarView {
     // element.
     this._element = element;
     this._driver = driver;
-    this._stopper = (0, _kefirStopper.default)();
+    this._stopper = kefirStopper();
     this._routeViewDriver = routeViewDriver;
+
     if (this._getMoveSectionElement()) {
-      this._ready = _kefir.default.constant(this);
+      this._ready = Kefir.constant(this);
     } else {
-      this._ready = (0, _streamWaitFor.default)(() => !!this._getMoveSectionElement()).takeUntilBy(this._stopper).map(() => this).toProperty();
+      this._ready = streamWaitFor(() => !!this._getMoveSectionElement())
+        .takeUntilBy(this._stopper)
+        .map(() => this)
+        .toProperty();
     }
+
     this._ready.onValue(() => {
       this._startMonitoringMoreMenu();
       this._determineToolbarState();
       this._determineToolbarIconMode();
       this._setupToolbarStateMonitoring();
     });
-    if (parent instanceof _gmailThreadView.default) {
+
+    if (parent instanceof GmailThreadView) {
       this._threadViewDriver = parent;
       this._ready.onValue(() => {
         this._element.setAttribute('data-thread-toolbar', 'true');
       });
-    } else if (parent instanceof _gmailRowListView.default) {
+    } else if (parent instanceof GmailRowListView) {
       this._rowListViewDriver = parent;
       this._ready.onValue(() => {
         this._element.setAttribute('data-rowlist-toolbar', 'true');
@@ -67,24 +93,29 @@ class GmailToolbarView {
       throw new Error('Invalid parent');
     }
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
-  getElement() {
+  getElement(): HTMLElement {
     return this._element;
   }
-  getRouteViewDriver() {
+  getRouteViewDriver(): RouteViewDriver {
     return this._routeViewDriver;
   }
+
   getThreadViewDriver() {
     return this._threadViewDriver;
   }
-  isForRowList() {
+
+  isForRowList(): boolean {
     return this._rowListViewDriver != null;
   }
-  isForThread() {
+
+  isForThread(): boolean {
     return this._threadViewDriver != null;
   }
+
   getThreadRowViewDrivers() {
     if (!this._rowListViewDriver) {
       console.error('missing this._rowListViewDriver'); //eslint-disable-line no-console
@@ -92,28 +123,38 @@ class GmailToolbarView {
     }
     return this._rowListViewDriver.getThreadRowViewDrivers();
   }
-  addButton(buttonDescriptor, id) {
-    const buttonStopper = (0, _kefirStopper.default)();
+
+  addButton(
+    buttonDescriptor: Object,
+    id?: string
+  ): { getStopper(): Kefir.Observable<null>, destroy(): void } {
+    const buttonStopper = kefirStopper();
+
     this._stopper.takeUntilBy(buttonStopper).onValue(() => {
       buttonStopper.destroy();
     });
+
     const appId = this._driver.getAppId();
-    const toolbarSections = _toolbars.SECTION_NAMES;
+    const toolbarSections = SECTION_NAMES;
     this._ready.takeUntilBy(buttonStopper).onValue(() => {
       if (buttonDescriptor.section === toolbarSections.OTHER) {
-        const entry = {
-          buttonDescriptor
-        };
+        const entry = { buttonDescriptor };
         this._moreMenuItems.push(entry);
         this._addToOpenMoreMenu(buttonDescriptor);
         buttonStopper.onValue(() => {
-          this._moreMenuItems = this._moreMenuItems.filter(_entry => _entry !== entry);
+          this._moreMenuItems = this._moreMenuItems.filter(
+            (_entry) => _entry !== entry
+          );
           this._addMoreItems();
         });
       } else {
-        const sectionElement = this._getSectionElement(buttonDescriptor.section, toolbarSections);
+        const sectionElement = this._getSectionElement(
+          buttonDescriptor.section,
+          toolbarSections
+        );
         if (sectionElement) {
-          const buttonViewController = this._createButtonViewController(buttonDescriptor);
+          const buttonViewController =
+            this._createButtonViewController(buttonDescriptor);
           this._buttonViewControllers.add(buttonViewController);
           buttonStopper.onValue(() => {
             this._buttonViewControllers.delete(buttonViewController);
@@ -121,184 +162,282 @@ class GmailToolbarView {
           });
 
           // Debugging code to track our duplicate toolbar button issue.
-          buttonViewController.getView().getElement().__addButton_ownedByExtension = true;
-          buttonViewController.getView().getElement().setAttribute('data-add-button-debug', JSON.stringify({
-            id,
-            title: buttonDescriptor.title,
-            hasThreadViewDriver: this.isForThread(),
-            hasRowListViewDriver: this.isForRowList()
-          }));
-          buttonViewController.getView().getElement().setAttribute('data-order-hint', String(buttonDescriptor.orderHint || 0));
-          (0, _insertElementInOrder.default)(sectionElement, buttonViewController.getView().getElement());
-          _kefir.default.merge([_kefir.default.constant(-1), _kefir.default.later(1000, 1000)]).map(delay => {
-            const duplicates = Array.from(sectionElement.children).filter(el => buttonViewController.getView().getElement().getAttribute('data-rowlist-toolbar') === el.getAttribute('data-rowlist-toolbar') && buttonViewController.getView().getElement().getAttribute('data-toolbar-expanded') === el.getAttribute('data-toolbar-expanded')).filter(el => el.hasAttribute('data-add-button-debug')).map(el => Object.assign({
-              ownedByExtension: !!el.__addButton_ownedByExtension
-            }, JSON.parse(el.getAttribute('data-add-button-debug') || 'null'))).filter(_ref => {
-              let {
-                title
-              } = _ref;
-              return title === buttonDescriptor.title;
-            });
-            return {
-              delay,
-              duplicates
-            };
-          }).filter(_ref2 => {
-            let {
-              duplicates
-            } = _ref2;
-            return duplicates.length > 1;
-          }).take(1).takeUntilBy(this._stopper).onValue(_ref3 => {
-            let {
-              delay,
-              duplicates
-            } = _ref3;
-            _logger.default.error(new Error('Duplicate toolbar button'), {
-              delay,
-              duplicates,
-              dataThreadToolbar: this._element.getAttribute('data-thread-toolbar'),
-              dataRowlistToolbar: this._element.getAttribute('data-rowlist-toolbar')
+          (buttonViewController
+            .getView()
+            .getElement(): any).__addButton_ownedByExtension = true;
+          buttonViewController
+            .getView()
+            .getElement()
+            .setAttribute(
+              'data-add-button-debug',
+              JSON.stringify({
+                id,
+                title: buttonDescriptor.title,
+                hasThreadViewDriver: this.isForThread(),
+                hasRowListViewDriver: this.isForRowList(),
+              })
+            );
+
+          buttonViewController
+            .getView()
+            .getElement()
+            .setAttribute(
+              'data-order-hint',
+              String(buttonDescriptor.orderHint || 0)
+            );
+          insertElementInOrder(
+            sectionElement,
+            buttonViewController.getView().getElement()
+          );
+
+          Kefir.merge([Kefir.constant(-1), Kefir.later(1000, 1000)])
+            .map((delay) => {
+              const duplicates: Object[] = Array.from(sectionElement.children)
+                .filter(
+                  (el) =>
+                    buttonViewController
+                      .getView()
+                      .getElement()
+                      .getAttribute('data-rowlist-toolbar') ===
+                      el.getAttribute('data-rowlist-toolbar') &&
+                    buttonViewController
+                      .getView()
+                      .getElement()
+                      .getAttribute('data-toolbar-expanded') ===
+                      el.getAttribute('data-toolbar-expanded')
+                )
+                .filter((el) => el.hasAttribute('data-add-button-debug'))
+                .map((el) =>
+                  Object.assign(
+                    {
+                      ownedByExtension: !!(el: any)
+                        .__addButton_ownedByExtension,
+                    },
+                    JSON.parse(
+                      el.getAttribute('data-add-button-debug') || 'null'
+                    )
+                  )
+                )
+                .filter(({ title }) => title === buttonDescriptor.title);
+              return { delay, duplicates };
+            })
+            .filter(({ duplicates }) => duplicates.length > 1)
+            .take(1)
+            .takeUntilBy(this._stopper)
+            .onValue(({ delay, duplicates }) => {
+              Logger.error(new Error('Duplicate toolbar button'), {
+                delay,
+                duplicates,
+                dataThreadToolbar: this._element.getAttribute(
+                  'data-thread-toolbar'
+                ),
+                dataRowlistToolbar: this._element.getAttribute(
+                  'data-rowlist-toolbar'
+                ),
+              });
             });
-          });
+
           this._updateButtonClasses(this._element);
-          buttonViewController.getView().setEnabled(this._toolbarState === 'EXPANDED');
+          buttonViewController
+            .getView()
+            .setEnabled(this._toolbarState === 'EXPANDED');
         }
       }
     });
+
     return {
       getStopper: () => buttonStopper,
       destroy: () => {
         buttonStopper.destroy();
-      }
+      },
     };
   }
-  waitForReady() {
+
+  waitForReady(): Kefir.Observable<GmailToolbarView> {
     return this._ready;
   }
-  _createButtonViewController(buttonDescriptor) {
+
+  _createButtonViewController(
+    buttonDescriptor: Object
+  ): DropdownButtonViewController | BasicButtonViewController {
     const buttonView = this._getButtonView(buttonDescriptor);
     buttonDescriptor.buttonView = buttonView;
+
     let buttonViewController = null;
     if (buttonDescriptor.hasDropdown) {
-      buttonViewController = new _dropdownButtonViewController.default({
+      buttonViewController = new DropdownButtonViewController({
         buttonView: buttonView,
-        dropdownViewDriverClass: _gmailDropdownView.default,
+        dropdownViewDriverClass: GmailDropdownView,
         dropdownShowFunction: buttonDescriptor.onClick,
         dropdownPositionOptions: {
           position: 'bottom',
-          hAlign: 'left'
-        }
+          hAlign: 'left',
+        },
       });
     } else {
-      buttonViewController = new _basicButtonViewController.default(buttonDescriptor);
+      buttonViewController = new BasicButtonViewController(buttonDescriptor);
     }
+
     return buttonViewController;
   }
-  _getButtonView(buttonDescriptor) {
-    const buttonView = new _buttonView.default({
+
+  _getButtonView(buttonDescriptor: Object): Object {
+    const buttonView = new ButtonView({
       ...buttonDescriptor,
-      noArrow: true
+      noArrow: true,
     });
+
     if (this._rowListViewDriver) {
       buttonView.getElement().setAttribute('data-rowlist-toolbar', 'true');
       buttonView.getElement().setAttribute('data-toolbar-expanded', 'true');
     } else if (this._threadViewDriver) {
       buttonView.getElement().setAttribute('data-thread-toolbar', 'true');
     }
+
     buttonView.getElement().setAttribute('role', 'button');
+
     return buttonView;
   }
+
   _startMonitoringMoreMenu() {
     const moreButtonElement = this._element.querySelector('.nf[role=button]');
     if (!moreButtonElement) {
       return;
     }
-    (0, _makeMutationObserverStream.default)(moreButtonElement, {
+
+    makeMutationObserverStream(moreButtonElement, {
       attributes: true,
-      attributeFilter: ['aria-expanded']
-    }).toProperty(() => null).takeUntilBy(this._stopper).map(() => moreButtonElement.getAttribute('aria-expanded')).onValue(ariaExpanded => {
-      if (ariaExpanded !== 'true') {
-        this._clearMoreItems();
-      } else {
-        this._addMoreItems();
-      }
-    });
+      attributeFilter: ['aria-expanded'],
+    })
+      .toProperty(() => null)
+      .takeUntilBy(this._stopper)
+      .map(() => moreButtonElement.getAttribute('aria-expanded'))
+      .onValue((ariaExpanded) => {
+        if (ariaExpanded !== 'true') {
+          this._clearMoreItems();
+        } else {
+          this._addMoreItems();
+        }
+      });
   }
+
   _determineToolbarState() {
     const moveSectionElement = this._getMoveSectionElement();
     if (!moveSectionElement) throw new Error('No move section element');
+
     if (moveSectionElement.style.display === 'none') {
       this._toolbarState = 'COLLAPSED';
     } else {
       this._toolbarState = 'EXPANDED';
     }
   }
+
   _determineToolbarIconMode() {
     const moveSectionElement = this._getMoveSectionElement();
     if (!moveSectionElement) throw new Error('No move section element');
-    const isIconMode = Array.from(moveSectionElement.querySelectorAll('[role=button]:not(.inboxsdk__button)')).some(buttonElement => buttonElement.hasAttribute('title') || buttonElement.hasAttribute('data-tooltip'));
-    this._element.setAttribute('data-toolbar-icononly', isIconMode ? 'true' : 'false');
+    const isIconMode = Array.from(
+      moveSectionElement.querySelectorAll(
+        '[role=button]:not(.inboxsdk__button)'
+      )
+    ).some(
+      (buttonElement) =>
+        buttonElement.hasAttribute('title') ||
+        buttonElement.hasAttribute('data-tooltip')
+    );
+    this._element.setAttribute(
+      'data-toolbar-icononly',
+      isIconMode ? 'true' : 'false'
+    );
   }
+
   _setupToolbarStateMonitoring() {
     const moveSectionElement = this._getMoveSectionElement();
     if (!moveSectionElement) throw new Error('No move section element');
-    (0, _makeMutationObserverStream.default)(moveSectionElement, {
+    makeMutationObserverStream(moveSectionElement, {
       attributes: true,
-      attributeFilter: ['style']
-    }).takeUntilBy(this._stopper).onValue(mutation => {
-      if (mutation.target instanceof HTMLElement && mutation.target.style.display === 'none') {
-        this._toolbarState = 'COLLAPSED';
-      } else {
-        this._toolbarState = 'EXPANDED';
-      }
-      this._updateButtonClasses(this._element);
-      this._updateButtonEnabledState();
-    });
+      attributeFilter: ['style'],
+    })
+      .takeUntilBy(this._stopper)
+      .onValue((mutation) => {
+        if (
+          mutation.target instanceof HTMLElement &&
+          mutation.target.style.display === 'none'
+        ) {
+          this._toolbarState = 'COLLAPSED';
+        } else {
+          this._toolbarState = 'EXPANDED';
+        }
+
+        this._updateButtonClasses(this._element);
+        this._updateButtonEnabledState();
+      });
   }
-  _getSectionElement(sectionName, toolbarSections) {
+
+  _getSectionElement(
+    sectionName: string,
+    toolbarSections: Object
+  ): ?HTMLElement {
     switch (sectionName) {
       case toolbarSections.INBOX_STATE:
         return this._getArchiveSectionElement();
+
       case toolbarSections.METADATA_STATE:
         return this._getMoveSectionElement();
+
       default:
         return null;
     }
   }
-  _getArchiveSectionElement() {
-    return this._getSectionElementForButtonSelector('.ar9, .aFh, .aFj, .lR, .nN, .nX, .aFk');
+
+  _getArchiveSectionElement(): ?HTMLElement {
+    return this._getSectionElementForButtonSelector(
+      '.ar9, .aFh, .aFj, .lR, .nN, .nX, .aFk'
+    );
   }
-  _getCheckboxSectionElement() {
+
+  _getCheckboxSectionElement(): ?HTMLElement {
     return this._getSectionElementForButtonSelector('.T-Jo-auh');
   }
-  _getMoveSectionElement() {
+
+  _getMoveSectionElement(): ?HTMLElement {
     return this._getSectionElementForButtonSelector('.asb, .ase, .ns, .mw');
   }
-  _getSectionElementForButtonSelector(buttonSelector) {
+
+  _getSectionElementForButtonSelector(buttonSelector: string): ?HTMLElement {
     const sectionElements = this._element.querySelectorAll('.G-Ni');
+
     for (let ii = 0; ii < sectionElements.length; ii++) {
       if (sectionElements[ii].querySelector(buttonSelector)) {
         return sectionElements[ii];
       }
     }
+
     return null;
   }
-  _updateButtonClasses(element) {
+
+  _updateButtonClasses(element: HTMLElement) {
     if (this._isUpdateButtonClassesScheduled) return;
+
     this._isUpdateButtonClassesScheduled = true;
-    (0, _asap.default)(() => {
+    asap(() => {
       if (this._toolbarState === 'EXPANDED') {
         element.setAttribute('data-toolbar-expanded', 'true');
       } else if (this._toolbarState === 'COLLAPSED') {
         element.setAttribute('data-toolbar-expanded', 'false');
       }
+
       const buttons = element.querySelectorAll('.G-Ni > [role=button]');
-      Array.prototype.forEach.call(buttons, button => {
+
+      Array.prototype.forEach.call(buttons, (button) => {
         let current = button;
         for (let ii = 0; ii < 100000; ii++) {
           if (current.previousElementSibling) {
-            if (current.previousElementSibling.classList.contains('inboxsdk__button')) {
-              if ((0, _isElementVisible.default)(current.previousElementSibling)) {
+            if (
+              current.previousElementSibling.classList.contains(
+                'inboxsdk__button'
+              )
+            ) {
+              if (isElementVisible(current.previousElementSibling)) {
                 button.classList.add('T-I-Js-Gs');
                 break;
               } else {
@@ -313,11 +452,14 @@ class GmailToolbarView {
             break;
           }
         }
+
         current = button;
         for (let ii = 0; ii < 100000; ii++) {
           if (current.nextElementSibling) {
-            if (current.nextElementSibling.classList.contains('inboxsdk__button')) {
-              if ((0, _isElementVisible.default)(current.nextElementSibling)) {
+            if (
+              current.nextElementSibling.classList.contains('inboxsdk__button')
+            ) {
+              if (isElementVisible(current.nextElementSibling)) {
                 button.classList.add('T-I-Js-IF');
                 break;
               } else {
@@ -333,75 +475,117 @@ class GmailToolbarView {
           }
         }
       });
+
       this._isUpdateButtonClassesScheduled = false;
     });
   }
+
   _updateButtonEnabledState() {
     const enabled = this._toolbarState === 'EXPANDED';
-    this._buttonViewControllers.forEach(buttonViewController => {
+    this._buttonViewControllers.forEach((buttonViewController) => {
       buttonViewController.getView().setEnabled(enabled);
     });
   }
+
   _addMoreItems() {
     this._clearMoreItems();
+
     if (this._toolbarState !== 'EXPANDED') {
       return;
     }
-    this._moreMenuItems.forEach(item => {
+
+    this._moreMenuItems.forEach((item) => {
       this._addToOpenMoreMenu(item.buttonDescriptor);
     });
   }
+
   _clearMoreItems() {
     if (this._moreMenuItemsContainer) {
       this._moreMenuItemsContainer.remove();
       this._moreMenuItemsContainer = null;
     }
   }
-  _addToOpenMoreMenu(buttonDescriptor) {
-    const moreMenu = _gmailElementGetter.default.getActiveMoreMenu();
+
+  _addToOpenMoreMenu(buttonDescriptor: Object) {
+    const moreMenu = GmailElementGetter.getActiveMoreMenu();
     if (!moreMenu) {
       return;
     }
+
     const appDiv = this._getMoreMenuItemsContainer(moreMenu);
     const menuItemElement = this._getMoreMenuItemElement(buttonDescriptor);
-    (0, _insertElementInOrder.default)(appDiv, menuItemElement);
+
+    insertElementInOrder(appDiv, menuItemElement);
   }
-  _getMoreMenuItemsContainer(moreMenu) {
+
+  _getMoreMenuItemsContainer(moreMenu: HTMLElement): HTMLElement {
     if (this._moreMenuItemsContainer) {
       return this._moreMenuItemsContainer;
     }
-    const container = this._moreMenuItemsContainer = document.createElement('div');
+
+    const container = (this._moreMenuItemsContainer =
+      document.createElement('div'));
     container.setAttribute('data-group-order-hint', this._driver.getAppId());
     container.innerHTML = '<div class="J-Kh"></div>';
-    (0, _insertElementInOrder.default)(moreMenu, container);
+
+    insertElementInOrder(moreMenu, container);
+
     return container;
   }
-  _getMoreMenuItemElement(buttonDescriptor) {
+
+  _getMoreMenuItemElement(buttonDescriptor: Object): HTMLElement {
     const itemElement = document.createElement('div');
     itemElement.setAttribute('class', 'J-N inboxsdk__menuItem');
     itemElement.setAttribute('role', 'menuitem');
-    itemElement.setAttribute('data-order-hint', String(buttonDescriptor.orderHint || 0));
-    itemElement.innerHTML = ['<div class="J-N-Jz" style="-webkit-user-select: none;">', buttonDescriptor.iconUrl ? '<img class="J-N-JX" src="' + (0, _escape.default)(buttonDescriptor.iconUrl) + '" />' : '', buttonDescriptor.iconClass ? '<span class="inboxsdk__icon J-N-JX ' + (0, _escape.default)(buttonDescriptor.iconClass) + '"></span>' : '', (0, _escape.default)(buttonDescriptor.title), '</div>'].join('');
-    itemElement.addEventListener('mouseenter', e => itemElement.classList.add('J-N-JT'));
-    itemElement.addEventListener('mouseleave', e => itemElement.classList.remove('J-N-JT'));
-    itemElement.addEventListener('click', e => {
+    itemElement.setAttribute(
+      'data-order-hint',
+      String(buttonDescriptor.orderHint || 0)
+    );
+
+    itemElement.innerHTML = [
+      '<div class="J-N-Jz" style="-webkit-user-select: none;">',
+      buttonDescriptor.iconUrl
+        ? '<img class="J-N-JX" src="' +
+          escape(buttonDescriptor.iconUrl) +
+          '" />'
+        : '',
+      buttonDescriptor.iconClass
+        ? '<span class="inboxsdk__icon J-N-JX ' +
+          escape(buttonDescriptor.iconClass) +
+          '"></span>'
+        : '',
+      escape(buttonDescriptor.title),
+      '</div>',
+    ].join('');
+
+    itemElement.addEventListener('mouseenter', (e: MouseEvent) =>
+      itemElement.classList.add('J-N-JT')
+    );
+    itemElement.addEventListener('mouseleave', (e: MouseEvent) =>
+      itemElement.classList.remove('J-N-JT')
+    );
+    itemElement.addEventListener('click', (e: MouseEvent) => {
       if (buttonDescriptor.onClick) {
         buttonDescriptor.onClick({});
       }
     });
+
     return itemElement;
   }
+
   destroy() {
     const element = this._element;
+
     if (this._threadViewDriver) {
       this._element.removeAttribute('data-thread-toolbar');
     } else if (this._rowListViewDriver) {
       this._element.removeAttribute('data-rowlist-toolbar');
     }
+
     this._clearMoreItems();
     this._stopper.destroy();
     this._updateButtonClasses(element);
   }
 }
-var _default = (0, _ud.defn)(module, GmailToolbarView);
-exports.default = _default;
+
+export default defn(module, GmailToolbarView);