@inboxsdk/core 0.2.28-alpha.5 → 0.2.28

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/manage-button-grouping.js

@@ -1,185 +1,354 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _asap = _interopRequireDefault(require("asap"));
-var _ud = require("ud");
-var _gmailComposeButtonView = _interopRequireDefault(require("./gmail-compose-button-view"));
-var _basicButtonViewController = _interopRequireDefault(require("../../../../widgets/buttons/basic-button-view-controller"));
-var _dropdownButtonViewController = _interopRequireDefault(require("../../../../widgets/buttons/dropdown-button-view-controller"));
-var _gmailDropdownView = _interopRequireDefault(require("../../widgets/gmail-dropdown-view"));
-var _insertElementInOrder = _interopRequireDefault(require("../../../../lib/dom/insert-element-in-order"));
-var _simulateMouseEvent = require("../../../../lib/dom/simulate-mouse-event");
-var _waitFor = _interopRequireDefault(require("../../../../lib/wait-for"));
-var _logger = _interopRequireDefault(require("../../../../lib/logger"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../../lib/dom/querySelectorOrFail"));
-var _censorHTMLtree = _interopRequireDefault(require("../../../../../common/censorHTMLtree"));
-var _positionFormattingToolbar = _interopRequireDefault(require("./position-formatting-toolbar"));
-var _getOrFail = _interopRequireDefault(require("../../../../../common/get-or-fail"));
-const memberMap = (0, _ud.defonce)(module, () => new Map());
-var _default = (0, _ud.defn)(module, function manageButtonGrouping(gmailComposeView) {
-  if (gmailComposeView.getElement().getAttribute('data-button-grouping-managed') === 'true') {
-    return;
+/* @flow */
+
+import asap from 'asap';
+import { defn, defonce } from 'ud';
+import GmailComposeButtonView from './gmail-compose-button-view';
+import BasicButtonViewController from '../../../../widgets/buttons/basic-button-view-controller';
+import DropdownButtonViewController from '../../../../widgets/buttons/dropdown-button-view-controller';
+import GmailDropdownView from '../../widgets/gmail-dropdown-view';
+import insertElementInOrder from '../../../../lib/dom/insert-element-in-order';
+import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
+import waitFor from '../../../../lib/wait-for';
+import Logger from '../../../../lib/logger';
+import querySelector from '../../../../lib/dom/querySelectorOrFail';
+import censorHTMLtree from '../../../../../common/censorHTMLtree';
+import positionFormattingToolbar from './position-formatting-toolbar';
+import type GmailComposeView from '../gmail-compose-view';
+import get from '../../../../../common/get-or-fail';
+
+const memberMap = defonce(module, () => new Map());
+
+export default defn(
+  module,
+  function manageButtonGrouping(gmailComposeView: GmailComposeView) {
+    if (
+      gmailComposeView
+        .getElement()
+        .getAttribute('data-button-grouping-managed') === 'true'
+    ) {
+      return;
+    }
+
+    var members = {};
+    memberMap.set(gmailComposeView, members);
+
+    gmailComposeView
+      .getElement()
+      .setAttribute('data-button-grouping-managed', 'true');
+
+    gmailComposeView
+      .getEventStream()
+      .filter((event) => event.eventName === 'fullscreenChanged')
+      .debounce(10)
+      .onValue(() => {
+        _handleComposeFullscreenStateChanged(gmailComposeView);
+      });
+
+    gmailComposeView
+      .getEventStream()
+      .filter(function (event) {
+        return event.eventName === 'buttonAdded';
+      })
+      .onValue(() => {
+        _handleButtonAdded(gmailComposeView);
+      });
+
+    gmailComposeView
+      .getEventStream()
+      .filter(
+        (event) =>
+          event.eventName === 'resize' || event.eventName === 'restored'
+      )
+      .onValue(() => {
+        _handleButtonAdded(gmailComposeView);
+      });
+
+    var el = gmailComposeView.getElement();
+    gmailComposeView.getStopper().onValue(function () {
+      memberMap.delete(gmailComposeView);
+      el.setAttribute('data-button-grouping-managed', 'false');
+    });
   }
-  var members = {};
-  memberMap.set(gmailComposeView, members);
-  gmailComposeView.getElement().setAttribute('data-button-grouping-managed', 'true');
-  gmailComposeView.getEventStream().filter(event => event.eventName === 'fullscreenChanged').debounce(10).onValue(() => {
-    _handleComposeFullscreenStateChanged(gmailComposeView);
-  });
-  gmailComposeView.getEventStream().filter(function (event) {
-    return event.eventName === 'buttonAdded';
-  }).onValue(() => {
-    _handleButtonAdded(gmailComposeView);
-  });
-  gmailComposeView.getEventStream().filter(event => event.eventName === 'resize' || event.eventName === 'restored').onValue(() => {
-    _handleButtonAdded(gmailComposeView);
-  });
-  var el = gmailComposeView.getElement();
-  gmailComposeView.getStopper().onValue(function () {
-    memberMap.delete(gmailComposeView);
-    el.setAttribute('data-button-grouping-managed', 'false');
-  });
-});
-exports.default = _default;
+);
+
 function _handleComposeFullscreenStateChanged(gmailComposeView) {
-  if (gmailComposeView.getElement().querySelector('.inboxsdk__compose_groupedActionToolbar')) {
+  if (
+    gmailComposeView
+      .getElement()
+      .querySelector('.inboxsdk__compose_groupedActionToolbar')
+  ) {
     _ungroupButtons(gmailComposeView);
   }
+
   _handleButtonAdded(gmailComposeView);
 }
+
 function _ungroupButtons(gmailComposeView) {
-  const members = (0, _getOrFail.default)(memberMap, gmailComposeView);
-  if (members.groupedToolbarButtonViewController) members.groupedToolbarButtonViewController.destroy();
-  if (members.formattingToolbarMutationObserver) members.formattingToolbarMutationObserver.disconnect();
-  const buttonToolbar = members.groupedActionToolbarContainer.firstElementChild;
+  const members = get(memberMap, gmailComposeView);
+  if (members.groupedToolbarButtonViewController)
+    members.groupedToolbarButtonViewController.destroy();
+  if (members.formattingToolbarMutationObserver)
+    members.formattingToolbarMutationObserver.disconnect();
+
+  const buttonToolbar: ?HTMLElement = (members.groupedActionToolbarContainer
+    .firstElementChild: any);
+
   if (buttonToolbar) {
     _moveNoOverflowButtonsToContainer(gmailComposeView, buttonToolbar);
     buttonToolbar.remove();
-    const composeActionToolbar = (0, _querySelectorOrFail.default)(gmailComposeView.getElement(), '.inboxsdk__compose_actionToolbar');
+
+    const composeActionToolbar = querySelector(
+      gmailComposeView.getElement(),
+      '.inboxsdk__compose_actionToolbar'
+    );
     composeActionToolbar.innerHTML = '';
     composeActionToolbar.appendChild(buttonToolbar);
   }
 }
-function _handleButtonAdded(gmailComposeView) {
+
+function _handleButtonAdded(gmailComposeView: GmailComposeView) {
   _groupButtonsIfNeeded(gmailComposeView);
   _fixToolbarPosition(gmailComposeView);
 }
+
 const groupButtonsIfNeededMap = new WeakSet();
-function _groupButtonsIfNeeded(gmailComposeView) {
+function _groupButtonsIfNeeded(gmailComposeView: GmailComposeView) {
   if (groupButtonsIfNeededMap.has(gmailComposeView)) return;
+
   groupButtonsIfNeededMap.add(gmailComposeView);
+
   window.requestAnimationFrame(() => {
     groupButtonsIfNeededMap.delete(gmailComposeView);
+
     if (gmailComposeView.isDestroyed()) return;
+
     _narrowButtonsIfNeeded(gmailComposeView);
+
     if (_doButtonsNeedToGroup(gmailComposeView)) {
-      var groupedActionToolbarContainer = _createGroupedActionToolbarContainer(gmailComposeView);
-      var groupToggleButtonViewController = _createGroupToggleButtonViewController(gmailComposeView);
+      var groupedActionToolbarContainer =
+        _createGroupedActionToolbarContainer(gmailComposeView);
+      var groupToggleButtonViewController =
+        _createGroupToggleButtonViewController(gmailComposeView);
+
       _swapToActionToolbar(gmailComposeView, groupToggleButtonViewController);
-      _checkAndSetInitialState(gmailComposeView, groupToggleButtonViewController);
-      _startMonitoringFormattingToolbar(gmailComposeView, groupToggleButtonViewController);
+      _checkAndSetInitialState(
+        gmailComposeView,
+        groupToggleButtonViewController
+      );
+      _startMonitoringFormattingToolbar(
+        gmailComposeView,
+        groupToggleButtonViewController
+      );
 
       // remove narrow buttons class
-      gmailComposeView.getElement().classList.remove('inboxsdk__compose_narrow_buttons');
+      gmailComposeView
+        .getElement()
+        .classList.remove('inboxsdk__compose_narrow_buttons');
 
       // see if we should narrow buttons again
       _narrowButtonsIfNeeded(gmailComposeView);
+
       gmailComposeView.getStopper().onValue(function () {
-        groupedActionToolbarContainer.remove();
+        (groupedActionToolbarContainer: any).remove();
         groupToggleButtonViewController.destroy();
       });
     }
   });
 }
-function _narrowButtonsIfNeeded(gmailComposeView) {
-  if (gmailComposeView.getElement().clientWidth > _getBottomBarTableWidth(gmailComposeView) || gmailComposeView.getElement().querySelectorAll('.inboxsdk__composeButton').length === 0 || gmailComposeView.getElement().classList.contains('inboxsdk__compose_narrow_buttons')) return;
-  gmailComposeView.getElement().classList.add('inboxsdk__compose_narrow_buttons');
+
+function _narrowButtonsIfNeeded(gmailComposeView: GmailComposeView) {
+  if (
+    gmailComposeView.getElement().clientWidth >
+      _getBottomBarTableWidth(gmailComposeView) ||
+    gmailComposeView.getElement().querySelectorAll('.inboxsdk__composeButton')
+      .length === 0 ||
+    gmailComposeView
+      .getElement()
+      .classList.contains('inboxsdk__compose_narrow_buttons')
+  )
+    return;
+
+  gmailComposeView
+    .getElement()
+    .classList.add('inboxsdk__compose_narrow_buttons');
   //force reflow
   gmailComposeView.getElement().offsetTop;
 }
-function _doButtonsNeedToGroup(gmailComposeView) {
-  if (gmailComposeView.getElement().querySelector('.inboxsdk__compose_groupedActionToolbar')) return false;
-  if (gmailComposeView.getElement().querySelectorAll('.inboxsdk__composeButton:not([data-no-overflow])').length < 2) return false;
-  return _getBottomBarTableWidth(gmailComposeView) > gmailComposeView.getBottomToolbarContainer().clientWidth;
+
+function _doButtonsNeedToGroup(gmailComposeView: GmailComposeView): boolean {
+  if (
+    gmailComposeView
+      .getElement()
+      .querySelector('.inboxsdk__compose_groupedActionToolbar')
+  )
+    return false;
+  if (
+    gmailComposeView
+      .getElement()
+      .querySelectorAll('.inboxsdk__composeButton:not([data-no-overflow])')
+      .length < 2
+  )
+    return false;
+
+  return (
+    _getBottomBarTableWidth(gmailComposeView) >
+    gmailComposeView.getBottomToolbarContainer().clientWidth
+  );
 }
-function _getBottomBarTableWidth(gmailComposeView) {
+
+function _getBottomBarTableWidth(gmailComposeView: GmailComposeView): number {
   const bottomBarTable = gmailComposeView.getBottomBarTable();
-  return Array.from(bottomBarTable.querySelectorAll('.btC > td')).reduce((total, el) => total + el.clientWidth, 0);
+
+  return Array.from(bottomBarTable.querySelectorAll('.btC > td')).reduce(
+    (total, el) => total + el.clientWidth,
+    0
+  );
 }
-function _createGroupedActionToolbarContainer(gmailComposeView) {
-  var groupedActionToolbarContainer = document.createElement('div');
-  groupedActionToolbarContainer.classList.add('inboxsdk__compose_groupedActionToolbar');
-  groupedActionToolbarContainer.innerHTML = '<div class="inboxsdk__compose_groupedActionToolbar_arrow"> </div>';
-  (0, _getOrFail.default)(memberMap, gmailComposeView).groupedActionToolbarContainer = groupedActionToolbarContainer;
+
+function _createGroupedActionToolbarContainer(
+  gmailComposeView: GmailComposeView
+): HTMLElement {
+  var groupedActionToolbarContainer: HTMLElement =
+    document.createElement('div');
+  groupedActionToolbarContainer.classList.add(
+    'inboxsdk__compose_groupedActionToolbar'
+  );
+  groupedActionToolbarContainer.innerHTML =
+    '<div class="inboxsdk__compose_groupedActionToolbar_arrow"> </div>';
+
+  get(memberMap, gmailComposeView).groupedActionToolbarContainer =
+    groupedActionToolbarContainer;
+
   groupedActionToolbarContainer.style.display = 'none';
+
   return groupedActionToolbarContainer;
 }
-function _createGroupToggleButtonViewController(gmailComposeView) {
-  var members = (0, _getOrFail.default)(memberMap, gmailComposeView);
+
+function _createGroupToggleButtonViewController(
+  gmailComposeView: GmailComposeView
+) {
+  var members = get(memberMap, gmailComposeView);
+
   var buttonView = _createGroupToggleButtonView();
-  var buttonViewController = new _basicButtonViewController.default({
+
+  var buttonViewController = new BasicButtonViewController({
     buttonView: buttonView,
     activateFunction: function () {
       _toggleGroupButtonToolbar(gmailComposeView, buttonViewController);
+
       if (_isToggleExpanded()) {
-        (0, _getOrFail.default)(memberMap, gmailComposeView).groupedActionToolbarContainer.querySelectorAll('.inboxsdk__composeButton')[0].focus();
+        get(memberMap, gmailComposeView)
+          .groupedActionToolbarContainer.querySelectorAll(
+            '.inboxsdk__composeButton'
+          )[0]
+          .focus();
       }
-    }
-  });
-  members.groupedActionToolbarContainer.addEventListener('keydown', function (event) {
-    if (event.which === 27) {
-      //escape
-      buttonViewController.activate();
-      buttonView.getElement().focus();
-      event.preventDefault();
-      event.stopPropagation();
-    }
+    },
   });
-  (0, _getOrFail.default)(memberMap, gmailComposeView).groupedToolbarButtonViewController = buttonViewController;
+
+  members.groupedActionToolbarContainer.addEventListener(
+    'keydown',
+    (function (event) {
+      if (event.which === 27) {
+        //escape
+        buttonViewController.activate();
+
+        buttonView.getElement().focus();
+
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }: any)
+  );
+
+  get(memberMap, gmailComposeView).groupedToolbarButtonViewController =
+    buttonViewController;
+
   return buttonViewController;
 }
+
 function _createGroupToggleButtonView() {
-  var buttonView = new _gmailComposeButtonView.default({
+  var buttonView = new GmailComposeButtonView({
     tooltip: 'More Tools',
-    iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl8z9ZAHF4bBsrEwAAADxJREFUOBFjYKASYISa8x/NPJLFmdAMIJs7+Awi2ys000hy7EBdghHLgy+wqeYimgU+2QaPxhrZQUe6RgBYwgkWqJftAwAAAABJRU5ErkJggg=='
+    iconUrl:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAEJGlDQ1BJQ0MgUHJvZmlsZQAAOBGFVd9v21QUPolvUqQWPyBYR4eKxa9VU1u5GxqtxgZJk6XtShal6dgqJOQ6N4mpGwfb6baqT3uBNwb8AUDZAw9IPCENBmJ72fbAtElThyqqSUh76MQPISbtBVXhu3ZiJ1PEXPX6yznfOec7517bRD1fabWaGVWIlquunc8klZOnFpSeTYrSs9RLA9Sr6U4tkcvNEi7BFffO6+EdigjL7ZHu/k72I796i9zRiSJPwG4VHX0Z+AxRzNRrtksUvwf7+Gm3BtzzHPDTNgQCqwKXfZwSeNHHJz1OIT8JjtAq6xWtCLwGPLzYZi+3YV8DGMiT4VVuG7oiZpGzrZJhcs/hL49xtzH/Dy6bdfTsXYNY+5yluWO4D4neK/ZUvok/17X0HPBLsF+vuUlhfwX4j/rSfAJ4H1H0qZJ9dN7nR19frRTeBt4Fe9FwpwtN+2p1MXscGLHR9SXrmMgjONd1ZxKzpBeA71b4tNhj6JGoyFNp4GHgwUp9qplfmnFW5oTdy7NamcwCI49kv6fN5IAHgD+0rbyoBc3SOjczohbyS1drbq6pQdqumllRC/0ymTtej8gpbbuVwpQfyw66dqEZyxZKxtHpJn+tZnpnEdrYBbueF9qQn93S7HQGGHnYP7w6L+YGHNtd1FJitqPAR+hERCNOFi1i1alKO6RQnjKUxL1GNjwlMsiEhcPLYTEiT9ISbN15OY/jx4SMshe9LaJRpTvHr3C/ybFYP1PZAfwfYrPsMBtnE6SwN9ib7AhLwTrBDgUKcm06FSrTfSj187xPdVQWOk5Q8vxAfSiIUc7Z7xr6zY/+hpqwSyv0I0/QMTRb7RMgBxNodTfSPqdraz/sDjzKBrv4zu2+a2t0/HHzjd2Lbcc2sG7GtsL42K+xLfxtUgI7YHqKlqHK8HbCCXgjHT1cAdMlDetv4FnQ2lLasaOl6vmB0CMmwT/IPszSueHQqv6i/qluqF+oF9TfO2qEGTumJH0qfSv9KH0nfS/9TIp0Wboi/SRdlb6RLgU5u++9nyXYe69fYRPdil1o1WufNSdTTsp75BfllPy8/LI8G7AUuV8ek6fkvfDsCfbNDP0dvRh0CrNqTbV7LfEEGDQPJQadBtfGVMWEq3QWWdufk6ZSNsjG2PQjp3ZcnOWWing6noonSInvi0/Ex+IzAreevPhe+CawpgP1/pMTMDo64G0sTCXIM+KdOnFWRfQKdJvQzV1+Bt8OokmrdtY2yhVX2a+qrykJfMq4Ml3VR4cVzTQVz+UoNne4vcKLoyS+gyKO6EHe+75Fdt0Mbe5bRIf/wjvrVmhbqBN97RD1vxrahvBOfOYzoosH9bq94uejSOQGkVM6sN/7HelL4t10t9F4gPdVzydEOx83Gv+uNxo7XyL/FtFl8z9ZAHF4bBsrEwAAADxJREFUOBFjYKASYISa8x/NPJLFmdAMIJs7+Awi2ys000hy7EBdghHLgy+wqeYimgU+2QaPxhrZQUe6RgBYwgkWqJftAwAAAABJRU5ErkJggg==',
   });
+
   buttonView.addClass('inboxsdk__compose_groupedActionButton');
   buttonView.getElement().setAttribute('tabindex', '1');
+
   return buttonView;
 }
+
 function _swapToActionToolbar(gmailComposeView, buttonViewController) {
-  const actionToolbar = (0, _querySelectorOrFail.default)(gmailComposeView.getElement(), '.inboxsdk__compose_actionToolbar > div');
-  const actionToolbarContainer = actionToolbar.parentElement;
+  const actionToolbar = querySelector(
+    gmailComposeView.getElement(),
+    '.inboxsdk__compose_actionToolbar > div'
+  );
+  const actionToolbarContainer: HTMLElement =
+    (actionToolbar.parentElement: any);
+
   const newActionToolbar = document.createElement('div');
   newActionToolbar.appendChild(buttonViewController.getView().getElement());
+
   actionToolbarContainer.appendChild(newActionToolbar);
-  const groupedActionToolbarContainer = (0, _getOrFail.default)(memberMap, gmailComposeView).groupedActionToolbarContainer;
-  groupedActionToolbarContainer.insertBefore(actionToolbar, groupedActionToolbarContainer.firstElementChild);
+  const groupedActionToolbarContainer: HTMLElement = get(
+    memberMap,
+    gmailComposeView
+  ).groupedActionToolbarContainer;
+  groupedActionToolbarContainer.insertBefore(
+    actionToolbar,
+    (groupedActionToolbarContainer.firstElementChild: any)
+  );
   actionToolbarContainer.appendChild(groupedActionToolbarContainer);
+
   _moveNoOverflowButtonsToActionToolbar(gmailComposeView);
 }
+
 function _moveNoOverflowButtonsToActionToolbar(gmailComposeView) {
-  const actionToolbar = (0, _querySelectorOrFail.default)(gmailComposeView.getElement(), '.inboxsdk__compose_actionToolbar > div');
+  const actionToolbar = querySelector(
+    gmailComposeView.getElement(),
+    '.inboxsdk__compose_actionToolbar > div'
+  );
+
   _moveNoOverflowButtonsToContainer(gmailComposeView, actionToolbar);
 }
-function _moveNoOverflowButtonsToContainer(gmailComposeView, container) {
-  const noOverflowButtons = gmailComposeView.getElement().querySelectorAll('.inboxsdk__composeButton[data-no-overflow]');
-  Array.from(noOverflowButtons).forEach(buttonElement => (0, _insertElementInOrder.default)(container, buttonElement, undefined, true));
+
+function _moveNoOverflowButtonsToContainer(
+  gmailComposeView,
+  container: HTMLElement
+) {
+  const noOverflowButtons = gmailComposeView
+    .getElement()
+    .querySelectorAll('.inboxsdk__composeButton[data-no-overflow]');
+
+  Array.from(noOverflowButtons).forEach((buttonElement: HTMLElement) =>
+    insertElementInOrder(container, buttonElement, undefined, true)
+  );
 }
-function _checkAndSetInitialState(gmailComposeView, groupToggleButtonViewController) {
+
+function _checkAndSetInitialState(
+  gmailComposeView,
+  groupToggleButtonViewController
+) {
   if (_isToggleExpanded()) {
-    _expandGroupButtonToolbar(gmailComposeView, groupToggleButtonViewController);
+    _expandGroupButtonToolbar(
+      gmailComposeView,
+      groupToggleButtonViewController
+    );
   }
 }
+
 function _collapseGroupButtonToolbar(gmailComposeView, buttonViewController) {
-  (0, _getOrFail.default)(memberMap, gmailComposeView).groupedActionToolbarContainer.style.display = 'none';
-  gmailComposeView.getElement().classList.remove('inboxsdk__compose_groupedActionToolbar_visible');
+  get(memberMap, gmailComposeView).groupedActionToolbarContainer.style.display =
+    'none';
+  gmailComposeView
+    .getElement()
+    .classList.remove('inboxsdk__compose_groupedActionToolbar_visible');
+
   buttonViewController.getView().deactivate();
   localStorage['inboxsdk__compose_groupedActionButton_state'] = 'collapsed';
+
   const bottomToolbarTable = gmailComposeView.getBottomBarTable();
   bottomToolbarTable.style.position = '';
 
@@ -187,31 +356,43 @@ function _collapseGroupButtonToolbar(gmailComposeView, buttonViewController) {
   // in gmail v2 when the body is scrolled Gmail puts a shadow border between the
   // toolbar and the content. We "jiggle" the scroll position by 1px to trigger Gmails
   // logic to show/hide the shadow border
-  const bodyScrollContainer = gmailComposeView.getElement().querySelector('.qz');
+  const bodyScrollContainer = gmailComposeView
+    .getElement()
+    .querySelector('.qz');
   if (bodyScrollContainer) {
     bodyScrollContainer.scrollTop = bodyScrollContainer.scrollTop - 1;
   }
 }
+
 function _expandGroupButtonToolbar(gmailComposeView, buttonViewController) {
-  (0, _getOrFail.default)(memberMap, gmailComposeView).groupedActionToolbarContainer.style.display = '';
-  gmailComposeView.getElement().classList.add('inboxsdk__compose_groupedActionToolbar_visible');
+  get(memberMap, gmailComposeView).groupedActionToolbarContainer.style.display =
+    '';
+  gmailComposeView
+    .getElement()
+    .classList.add('inboxsdk__compose_groupedActionToolbar_visible');
+
   buttonViewController.getView().activate();
   localStorage['inboxsdk__compose_groupedActionButton_state'] = 'expanded';
+
   _positionGroupToolbar(gmailComposeView);
+
   const formattingToolbar = gmailComposeView.getFormattingToolbar();
   if (formattingToolbar && formattingToolbar.style.display === '') {
-    (0, _simulateMouseEvent.simulateClick)(gmailComposeView.getFormattingToolbarToggleButton());
+    simulateClick(gmailComposeView.getFormattingToolbarToggleButton());
   }
 
   // when expanding the group button this can change how the body is scrolled
   // in gmail v2 when the body is scrolled Gmail puts a shadow border between the
   // toolbar and the content. We "jiggle" the scroll position by 1px to trigger Gmails
   // logic to show/hide the shadow border
-  const bodyScrollContainer = gmailComposeView.getElement().querySelector('.qz');
+  const bodyScrollContainer = gmailComposeView
+    .getElement()
+    .querySelector('.qz');
   if (bodyScrollContainer) {
     bodyScrollContainer.scrollTop = bodyScrollContainer.scrollTop + 1;
   }
 }
+
 function _toggleGroupButtonToolbar(gmailComposeView, buttonViewController) {
   if (_isToggleExpanded()) {
     _collapseGroupButtonToolbar(gmailComposeView, buttonViewController);
@@ -219,80 +400,134 @@ function _toggleGroupButtonToolbar(gmailComposeView, buttonViewController) {
     _expandGroupButtonToolbar(gmailComposeView, buttonViewController);
   }
 }
+
 function _isToggleExpanded() {
-  return localStorage['inboxsdk__compose_groupedActionButton_state'] === 'expanded';
+  return (
+    localStorage['inboxsdk__compose_groupedActionButton_state'] === 'expanded'
+  );
 }
+
 const fixToolbarPositionMap = new WeakSet();
 function _fixToolbarPosition(gmailComposeView) {
   if (fixToolbarPositionMap.has(gmailComposeView)) return;
+
   fixToolbarPositionMap.add(gmailComposeView);
   window.requestAnimationFrame(() => {
     fixToolbarPositionMap.delete(gmailComposeView);
     if (gmailComposeView.isDestroyed()) return;
-    (0, _positionFormattingToolbar.default)(gmailComposeView);
-    var groupedActionToolbarContainer = gmailComposeView.getElement().querySelector('.inboxsdk__compose_groupedActionToolbar');
+
+    positionFormattingToolbar(gmailComposeView);
+
+    var groupedActionToolbarContainer = gmailComposeView
+      .getElement()
+      .querySelector('.inboxsdk__compose_groupedActionToolbar');
     if (!groupedActionToolbarContainer) {
       return;
     }
+
     if (groupedActionToolbarContainer.style.display === 'none') {
       return;
     }
     _positionGroupToolbar(gmailComposeView);
   });
 }
+
 function _positionGroupToolbar(gmailComposeView) {
   if (gmailComposeView.isMinimized()) {
     return;
   }
-  var groupedActionToolbarContainer = gmailComposeView.getElement().querySelector('.inboxsdk__compose_groupedActionToolbar');
+
+  var groupedActionToolbarContainer = gmailComposeView
+    .getElement()
+    .querySelector('.inboxsdk__compose_groupedActionToolbar');
+
   if (!groupedActionToolbarContainer) {
     return;
   }
-  const groupedToolbarButton = (0, _querySelectorOrFail.default)(gmailComposeView.getElement(), '.inboxsdk__compose_groupedActionButton');
-  const groupedActionToolbarArrow = (0, _querySelectorOrFail.default)(groupedActionToolbarContainer, '.inboxsdk__compose_groupedActionToolbar_arrow');
+
+  const groupedToolbarButton = querySelector(
+    gmailComposeView.getElement(),
+    '.inboxsdk__compose_groupedActionButton'
+  );
+  const groupedActionToolbarArrow = querySelector(
+    groupedActionToolbarContainer,
+    '.inboxsdk__compose_groupedActionToolbar_arrow'
+  );
+
   groupedActionToolbarContainer.style.display = '';
-  if (groupedToolbarButton.offsetLeft + groupedToolbarButton.clientWidth > groupedActionToolbarContainer.offsetWidth) {
-    var marginLeft = groupedToolbarButton.clientWidth / 2 - groupedActionToolbarContainer.offsetWidth / 2 - 3;
-    groupedActionToolbarContainer.style.left = groupedToolbarButton.offsetLeft + marginLeft + 'px';
+
+  if (
+    groupedToolbarButton.offsetLeft + groupedToolbarButton.clientWidth >
+    groupedActionToolbarContainer.offsetWidth
+  ) {
+    var marginLeft =
+      groupedToolbarButton.clientWidth / 2 -
+      groupedActionToolbarContainer.offsetWidth / 2 -
+      3;
+
+    groupedActionToolbarContainer.style.left =
+      groupedToolbarButton.offsetLeft + marginLeft + 'px';
+
     groupedActionToolbarArrow.style.left = -(marginLeft + 1) + 'px';
   } else {
     groupedActionToolbarContainer.style.left = '';
-    groupedActionToolbarArrow.style.left = groupedToolbarButton.offsetLeft - 1 + 'px';
+    groupedActionToolbarArrow.style.left =
+      groupedToolbarButton.offsetLeft - 1 + 'px';
   }
+
   const bottomToolbarTable = gmailComposeView.getBottomBarTable();
   bottomToolbarTable.style.position = 'relative';
+
   const bottomToolbarHeight = gmailComposeView.getBottomBarTable().clientHeight;
   groupedActionToolbarContainer.style.bottom = `${bottomToolbarHeight + 1}px`;
   if (bottomToolbarHeight < 1) {
     const heElements = gmailComposeView.getElement().querySelectorAll('td.HE');
-    _logger.default.error(new Error('bottom toolbar had bad height'), {
+    Logger.error(new Error('bottom toolbar had bad height'), {
       bottomToolbarHeight,
-      heElementHeights: Array.from(heElements).map(el => el.clientHeight),
-      heElementsHTML: Array.from(heElements).map(_censorHTMLtree.default)
+      heElementHeights: Array.from(heElements).map((el) => el.clientHeight),
+      heElementsHTML: Array.from(heElements).map(censorHTMLtree),
     });
   }
 }
-function _startMonitoringFormattingToolbar(gmailComposeView, groupToggleButtonViewController) {
-  (0, _waitFor.default)(function () {
+
+function _startMonitoringFormattingToolbar(
+  gmailComposeView,
+  groupToggleButtonViewController
+) {
+  waitFor(function () {
     if (gmailComposeView.isDestroyed()) throw 'skip';
+
     return gmailComposeView.getFormattingToolbar();
-  }).then(formattingToolbar => {
-    const mutationObserver = new MutationObserver(function (mutations) {
-      const target = mutations[0].target;
-      if (target instanceof HTMLElement && target.style.display === '' && localStorage['inboxsdk__compose_groupedActionButton_state'] === 'expanded') {
-        groupToggleButtonViewController.activate();
+  })
+    .then((formattingToolbar) => {
+      const mutationObserver = new MutationObserver(function (mutations) {
+        const target = mutations[0].target;
+        if (
+          target instanceof HTMLElement &&
+          target.style.display === '' &&
+          localStorage['inboxsdk__compose_groupedActionButton_state'] ===
+            'expanded'
+        ) {
+          groupToggleButtonViewController.activate();
+        }
+      });
+
+      mutationObserver.observe(formattingToolbar, {
+        attributes: true,
+        attributeFilter: ['style'],
+      });
+
+      get(memberMap, gmailComposeView).formattingToolbarMutationObserver =
+        mutationObserver;
+
+      gmailComposeView
+        .getStopper()
+        .onValue(() => mutationObserver.disconnect());
+    })
+    .catch((err) => {
+      if (err !== 'skip') {
+        Logger.error(err);
+        throw err;
       }
     });
-    mutationObserver.observe(formattingToolbar, {
-      attributes: true,
-      attributeFilter: ['style']
-    });
-    (0, _getOrFail.default)(memberMap, gmailComposeView).formattingToolbarMutationObserver = mutationObserver;
-    gmailComposeView.getStopper().onValue(() => mutationObserver.disconnect());
-  }).catch(err => {
-    if (err !== 'skip') {
-      _logger.default.error(err);
-      throw err;
-    }
-  });
-}
+}