@inboxsdk/core 1.1.6 → 1.1.7

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

@@ -1,407 +1,460 @@
-"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"));
+import escape from 'lodash/escape';
+import asap from 'asap';
+import * as Kefir from 'kefir';
+import kefirStopper 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 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);
-    // 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
-    // GmailToolbarView's type. When addButton is called, the buttons get the
-    // same attributes as the GmailToolbarView added. CSS rules are used to
-    // hide the buttons with attributes that don't currently match the toolbar
-    // element.
-    this._element = element;
-    this._driver = driver;
-    this._stopper = (0, _kefirStopper.default)();
-    this._routeViewDriver = routeViewDriver;
-    if (this._getMoveSectionElement()) {
-      this._ready = _kefir.default.constant(this);
-    } else {
-      this._ready = (0, _streamWaitFor.default)(() => !!this._getMoveSectionElement()).takeUntilBy(this._stopper).map(() => this).toProperty();
+    _element;
+    _driver;
+    _ready;
+    _stopper;
+    _routeViewDriver;
+    _buttonViewControllers = new Set();
+    _moreMenuItems = [];
+    _toolbarState;
+    _threadViewDriver;
+    _rowListViewDriver;
+    _isUpdateButtonClassesScheduled = false;
+    _moreMenuItemsContainer = null;
+    constructor(element, driver, routeViewDriver, parent) {
+        // 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
+        // GmailToolbarView's type. When addButton is called, the buttons get the
+        // same attributes as the GmailToolbarView added. CSS rules are used to
+        // hide the buttons with attributes that don't currently match the toolbar
+        // element.
+        this._element = element;
+        this._driver = driver;
+        this._stopper = kefirStopper();
+        this._routeViewDriver = routeViewDriver;
+        if (this._getMoveSectionElement()) {
+            this._ready = Kefir.constant(this);
+        }
+        else {
+            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) {
+            this._threadViewDriver = parent;
+            this._ready.onValue(() => {
+                this._element.setAttribute('data-thread-toolbar', 'true');
+            });
+        }
+        else if (parent instanceof GmailRowListView) {
+            this._rowListViewDriver = parent;
+            this._ready.onValue(() => {
+                this._element.setAttribute('data-rowlist-toolbar', 'true');
+            });
+        }
+        else {
+            throw new Error('Invalid parent');
+        }
     }
-    this._ready.onValue(() => {
-      this._startMonitoringMoreMenu();
-      this._determineToolbarState();
-      this._determineToolbarIconMode();
-      this._setupToolbarStateMonitoring();
-    });
-    if (parent instanceof _gmailThreadView.default) {
-      this._threadViewDriver = parent;
-      this._ready.onValue(() => {
-        this._element.setAttribute('data-thread-toolbar', 'true');
-      });
-    } else if (parent instanceof _gmailRowListView.default) {
-      this._rowListViewDriver = parent;
-      this._ready.onValue(() => {
-        this._element.setAttribute('data-rowlist-toolbar', 'true');
-      });
-    } else {
-      throw new Error('Invalid parent');
+    getStopper() {
+        return this._stopper;
     }
-  }
-  getStopper() {
-    return this._stopper;
-  }
-  getElement() {
-    return this._element;
-  }
-  getRouteViewDriver() {
-    return this._routeViewDriver;
-  }
-  getThreadViewDriver() {
-    return this._threadViewDriver;
-  }
-  isForRowList() {
-    return this._rowListViewDriver != null;
-  }
-  isForThread() {
-    return this._threadViewDriver != null;
-  }
-  getThreadRowViewDrivers() {
-    if (!this._rowListViewDriver) {
-      console.error('missing this._rowListViewDriver');
-      return new Set();
+    getElement() {
+        return this._element;
     }
-    return this._rowListViewDriver.getThreadRowViewDrivers();
-  }
-  addButton(buttonDescriptor, id) {
-    const buttonStopper = (0, _kefirStopper.default)();
-    this._stopper.takeUntilBy(buttonStopper).onValue(() => {
-      buttonStopper.destroy();
-    });
-    const appId = this._driver.getAppId();
-    const toolbarSections = _toolbars.SECTION_NAMES;
-    this._ready.takeUntilBy(buttonStopper).onValue(() => {
-      if (buttonDescriptor.section === toolbarSections.OTHER) {
-        const entry = {
-          buttonDescriptor
-        };
-        this._moreMenuItems.push(entry);
-        this._addToOpenMoreMenu(buttonDescriptor);
-        buttonStopper.onValue(() => {
-          this._moreMenuItems = this._moreMenuItems.filter(_entry => _entry !== entry);
-          this._addMoreItems();
+    getRouteViewDriver() {
+        return this._routeViewDriver;
+    }
+    getThreadViewDriver() {
+        return this._threadViewDriver;
+    }
+    isForRowList() {
+        return this._rowListViewDriver != null;
+    }
+    isForThread() {
+        return this._threadViewDriver != null;
+    }
+    getThreadRowViewDrivers() {
+        if (!this._rowListViewDriver) {
+            console.error('missing this._rowListViewDriver');
+            return new Set();
+        }
+        return this._rowListViewDriver.getThreadRowViewDrivers();
+    }
+    addButton(buttonDescriptor, id) {
+        const buttonStopper = kefirStopper();
+        this._stopper.takeUntilBy(buttonStopper).onValue(() => {
+            buttonStopper.destroy();
         });
-      } else {
-        const sectionElement = this._getSectionElement(buttonDescriptor.section, toolbarSections);
-        if (sectionElement) {
-          const buttonViewController = this._createButtonViewController(buttonDescriptor);
-          this._buttonViewControllers.add(buttonViewController);
-          buttonStopper.onValue(() => {
-            this._buttonViewControllers.delete(buttonViewController);
-            buttonViewController.destroy();
-          });
-
-          // 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')
+        const appId = this._driver.getAppId();
+        const toolbarSections = SECTION_NAMES;
+        this._ready.takeUntilBy(buttonStopper).onValue(() => {
+            if (buttonDescriptor.section === toolbarSections.OTHER) {
+                const entry = {
+                    buttonDescriptor,
+                };
+                this._moreMenuItems.push(entry);
+                this._addToOpenMoreMenu(buttonDescriptor);
+                buttonStopper.onValue(() => {
+                    this._moreMenuItems = this._moreMenuItems.filter((_entry) => _entry !== entry);
+                    this._addMoreItems();
+                });
+            }
+            else {
+                const sectionElement = this._getSectionElement(buttonDescriptor.section, toolbarSections);
+                if (sectionElement) {
+                    const buttonViewController = this._createButtonViewController(buttonDescriptor);
+                    this._buttonViewControllers.add(buttonViewController);
+                    buttonStopper.onValue(() => {
+                        this._buttonViewControllers.delete(buttonViewController);
+                        buttonViewController.destroy();
+                    });
+                    // 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));
+                    insertElementInOrder(sectionElement, buttonViewController.getView().getElement());
+                    Kefir.merge([Kefir.constant(-1), Kefir.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(({ 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');
+                }
+            }
+        });
+        return {
+            getStopper: () => buttonStopper,
+            destroy: () => {
+                buttonStopper.destroy();
+            },
+        };
+    }
+    waitForReady() {
+        return this._ready;
+    }
+    _createButtonViewController(buttonDescriptor) {
+        const buttonView = this._getButtonView(buttonDescriptor);
+        buttonDescriptor.buttonView = buttonView;
+        let buttonViewController = null;
+        if (buttonDescriptor.hasDropdown) {
+            buttonViewController = new DropdownButtonViewController({
+                buttonView: buttonView,
+                dropdownViewDriverClass: GmailDropdownView,
+                dropdownShowFunction: buttonDescriptor.onClick,
+                dropdownPositionOptions: {
+                    position: 'bottom',
+                    hAlign: 'left',
+                },
             });
-          });
-          this._updateButtonClasses(this._element);
-          buttonViewController.getView().setEnabled(this._toolbarState === 'EXPANDED');
         }
-      }
-    });
-    return {
-      getStopper: () => buttonStopper,
-      destroy: () => {
-        buttonStopper.destroy();
-      }
-    };
-  }
-  waitForReady() {
-    return this._ready;
-  }
-  _createButtonViewController(buttonDescriptor) {
-    const buttonView = this._getButtonView(buttonDescriptor);
-    buttonDescriptor.buttonView = buttonView;
-    let buttonViewController = null;
-    if (buttonDescriptor.hasDropdown) {
-      buttonViewController = new _dropdownButtonViewController.default({
-        buttonView: buttonView,
-        dropdownViewDriverClass: _gmailDropdownView.default,
-        dropdownShowFunction: buttonDescriptor.onClick,
-        dropdownPositionOptions: {
-          position: 'bottom',
-          hAlign: 'left'
+        else {
+            buttonViewController = new BasicButtonViewController(buttonDescriptor);
         }
-      });
-    } else {
-      buttonViewController = new _basicButtonViewController.default(buttonDescriptor);
+        return buttonViewController;
     }
-    return buttonViewController;
-  }
-  _getButtonView(buttonDescriptor) {
-    const buttonView = new _buttonView.default({
-      ...buttonDescriptor,
-      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');
+    _getButtonView(buttonDescriptor) {
+        const buttonView = new ButtonView({ ...buttonDescriptor, 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;
     }
-    buttonView.getElement().setAttribute('role', 'button');
-    return buttonView;
-  }
-  _startMonitoringMoreMenu() {
-    const moreButtonElement = this._element.querySelector('.nf[role=button]');
-    if (!moreButtonElement) {
-      return;
+    _startMonitoringMoreMenu() {
+        const moreButtonElement = this._element.querySelector('.nf[role=button]');
+        if (!moreButtonElement) {
+            return;
+        }
+        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();
+            }
+        });
     }
-    (0, _makeMutationObserverStream.default)(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();
-      }
-    });
-  }
-  _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';
+    _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');
-  }
-  _setupToolbarStateMonitoring() {
-    const moveSectionElement = this._getMoveSectionElement();
-    if (!moveSectionElement) throw new Error('No move section element');
-    (0, _makeMutationObserverStream.default)(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();
-    });
-  }
-  _getSectionElement(sectionName, toolbarSections) {
-    switch (sectionName) {
-      case toolbarSections.INBOX_STATE:
-        return this._getArchiveSectionElement();
-      case toolbarSections.METADATA_STATE:
-        return this._getMoveSectionElement();
-      default:
-        return null;
+    _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');
+    }
+    _setupToolbarStateMonitoring() {
+        const moveSectionElement = this._getMoveSectionElement();
+        if (!moveSectionElement)
+            throw new Error('No move section element');
+        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();
+        });
+    }
+    _getSectionElement(sectionName, toolbarSections) {
+        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');
-  }
-  _getCheckboxSectionElement() {
-    return this._getSectionElementForButtonSelector('.T-Jo-auh');
-  }
-  _getMoveSectionElement() {
-    return this._getSectionElementForButtonSelector('.asb, .ase, .ns, .mw');
-  }
-  _getSectionElementForButtonSelector(buttonSelector) {
-    const sectionElements = this._element.querySelectorAll('.G-Ni');
-    for (let ii = 0; ii < sectionElements.length; ii++) {
-      if (sectionElements[ii].querySelector(buttonSelector)) {
-        return sectionElements[ii];
-      }
+    _getArchiveSectionElement() {
+        return this._getSectionElementForButtonSelector('.ar9, .aFh, .aFj, .lR, .nN, .nX, .aFk');
     }
-    return null;
-  }
-  _updateButtonClasses(element) {
-    if (this._isUpdateButtonClassesScheduled) return;
-    this._isUpdateButtonClassesScheduled = true;
-    (0, _asap.default)(() => {
-      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 => {
-        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)) {
-                button.classList.add('T-I-Js-Gs');
-                break;
-              } else {
-                current = current.previousElementSibling;
-              }
-            } else {
-              button.classList.add('T-I-Js-Gs');
-              break;
+    _getCheckboxSectionElement() {
+        return this._getSectionElementForButtonSelector('.T-Jo-auh');
+    }
+    _getMoveSectionElement() {
+        return this._getSectionElementForButtonSelector('.asb, .ase, .ns, .mw');
+    }
+    _getSectionElementForButtonSelector(buttonSelector) {
+        const sectionElements = this._element.querySelectorAll('.G-Ni');
+        for (let ii = 0; ii < sectionElements.length; ii++) {
+            if (sectionElements[ii].querySelector(buttonSelector)) {
+                return sectionElements[ii];
             }
-          } else {
-            button.classList.remove('T-I-Js-Gs');
-            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)) {
-                button.classList.add('T-I-Js-IF');
-                break;
-              } else {
-                current = current.nextElementSibling;
-              }
-            } else {
-              button.classList.add('T-I-Js-IF');
-              break;
+        return null;
+    }
+    _updateButtonClasses(element) {
+        if (this._isUpdateButtonClassesScheduled)
+            return;
+        this._isUpdateButtonClassesScheduled = true;
+        asap(() => {
+            if (this._toolbarState === 'EXPANDED') {
+                element.setAttribute('data-toolbar-expanded', 'true');
             }
-          } else {
-            button.classList.remove('T-I-Js-IF');
-            break;
-          }
+            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) => {
+                let current = button;
+                for (let ii = 0; ii < 100000; ii++) {
+                    if (current.previousElementSibling) {
+                        if (current.previousElementSibling.classList.contains('inboxsdk__button')) {
+                            if (isElementVisible(current.previousElementSibling)) {
+                                button.classList.add('T-I-Js-Gs');
+                                break;
+                            }
+                            else {
+                                current = current.previousElementSibling;
+                            }
+                        }
+                        else {
+                            button.classList.add('T-I-Js-Gs');
+                            break;
+                        }
+                    }
+                    else {
+                        button.classList.remove('T-I-Js-Gs');
+                        break;
+                    }
+                }
+                current = button;
+                for (let ii = 0; ii < 100000; ii++) {
+                    if (current.nextElementSibling) {
+                        if (current.nextElementSibling.classList.contains('inboxsdk__button')) {
+                            if (isElementVisible(current.nextElementSibling)) {
+                                button.classList.add('T-I-Js-IF');
+                                break;
+                            }
+                            else {
+                                current = current.nextElementSibling;
+                            }
+                        }
+                        else {
+                            button.classList.add('T-I-Js-IF');
+                            break;
+                        }
+                    }
+                    else {
+                        button.classList.remove('T-I-Js-IF');
+                        break;
+                    }
+                }
+            });
+            this._isUpdateButtonClassesScheduled = false;
+        });
+    }
+    _updateButtonEnabledState() {
+        const enabled = this._toolbarState === 'EXPANDED';
+        this._buttonViewControllers.forEach((buttonViewController) => {
+            buttonViewController.getView().setEnabled(enabled);
+        });
+    }
+    _addMoreItems() {
+        this._clearMoreItems();
+        if (this._toolbarState !== 'EXPANDED') {
+            return;
+        }
+        this._moreMenuItems.forEach((item) => {
+            this._addToOpenMoreMenu(item.buttonDescriptor);
+        });
+    }
+    _clearMoreItems() {
+        if (this._moreMenuItemsContainer) {
+            this._moreMenuItemsContainer.remove();
+            this._moreMenuItemsContainer = null;
         }
-      });
-      this._isUpdateButtonClassesScheduled = false;
-    });
-  }
-  _updateButtonEnabledState() {
-    const enabled = this._toolbarState === 'EXPANDED';
-    this._buttonViewControllers.forEach(buttonViewController => {
-      buttonViewController.getView().setEnabled(enabled);
-    });
-  }
-  _addMoreItems() {
-    this._clearMoreItems();
-    if (this._toolbarState !== 'EXPANDED') {
-      return;
     }
-    this._moreMenuItems.forEach(item => {
-      this._addToOpenMoreMenu(item.buttonDescriptor);
-    });
-  }
-  _clearMoreItems() {
-    if (this._moreMenuItemsContainer) {
-      this._moreMenuItemsContainer.remove();
-      this._moreMenuItemsContainer = null;
+    _addToOpenMoreMenu(buttonDescriptor) {
+        const moreMenu = GmailElementGetter.getActiveMoreMenu();
+        if (!moreMenu) {
+            return;
+        }
+        const appDiv = this._getMoreMenuItemsContainer(moreMenu);
+        const menuItemElement = this._getMoreMenuItemElement(buttonDescriptor);
+        insertElementInOrder(appDiv, menuItemElement);
     }
-  }
-  _addToOpenMoreMenu(buttonDescriptor) {
-    const moreMenu = _gmailElementGetter.default.getActiveMoreMenu();
-    if (!moreMenu) {
-      return;
+    _getMoreMenuItemsContainer(moreMenu) {
+        if (this._moreMenuItemsContainer) {
+            return this._moreMenuItemsContainer;
+        }
+        const container = (this._moreMenuItemsContainer =
+            document.createElement('div'));
+        container.setAttribute('data-group-order-hint', this._driver.getAppId());
+        container.innerHTML = '<div class="J-Kh"></div>';
+        insertElementInOrder(moreMenu, container);
+        return container;
     }
-    const appDiv = this._getMoreMenuItemsContainer(moreMenu);
-    const menuItemElement = this._getMoreMenuItemElement(buttonDescriptor);
-    (0, _insertElementInOrder.default)(appDiv, menuItemElement);
-  }
-  _getMoreMenuItemsContainer(moreMenu) {
-    if (this._moreMenuItemsContainer) {
-      return this._moreMenuItemsContainer;
+    _getMoreMenuItemElement(buttonDescriptor) {
+        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="' +
+                    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) => itemElement.classList.add('J-N-JT'));
+        itemElement.addEventListener('mouseleave', (e) => itemElement.classList.remove('J-N-JT'));
+        itemElement.addEventListener('click', (e) => {
+            if (buttonDescriptor.onClick) {
+                buttonDescriptor.onClick({});
+            }
+        });
+        return itemElement;
     }
-    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);
-    return container;
-  }
-  _getMoreMenuItemElement(buttonDescriptor) {
-    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 => {
-      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');
+    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);
     }
-    this._clearMoreItems();
-    this._stopper.destroy();
-    this._updateButtonClasses(element);
-  }
 }
-var _default = (0, _ud.defn)(module, GmailToolbarView);
-exports.default = _default;
+export default GmailToolbarView;