@inboxsdk/core 1.1.6 → 1.1.8

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

@@ -1,862 +1,979 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-exports.removeAllThreadRowUnclaimedModifications = removeAllThreadRowUnclaimedModifications;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _once = _interopRequireDefault(require("lodash/once"));
-var _flatten = _interopRequireDefault(require("lodash/flatten"));
-var _includes = _interopRequireDefault(require("lodash/includes"));
-var _intersection = _interopRequireDefault(require("lodash/intersection"));
-var _uniqBy = _interopRequireDefault(require("lodash/uniqBy"));
-var _flatMap = _interopRequireDefault(require("lodash/flatMap"));
-var _ud = require("ud");
-var _assert = _interopRequireDefault(require("assert"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _asap = _interopRequireDefault(require("asap"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-chunked-stream"));
-var _insertElementInOrder = _interopRequireDefault(require("../../../lib/dom/insert-element-in-order"));
-var _kefirCast = _interopRequireDefault(require("kefir-cast"));
-var _delayAsap = _interopRequireDefault(require("../../../lib/delay-asap"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _gmailDropdownView = _interopRequireDefault(require("../widgets/gmail-dropdown-view"));
-var _dropdownView = _interopRequireDefault(require("../../../widgets/buttons/dropdown-view"));
-var _gmailLabelView = _interopRequireDefault(require("../widgets/gmail-label-view"));
-var _gmailActionButtonView = _interopRequireDefault(require("../widgets/gmail-action-button-view"));
-var _updateIcon = _interopRequireDefault(require("../../../driver-common/update-icon"));
-const cachedModificationsByRow = (0, _ud.defonce)(module, () => new WeakMap());
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import once from 'lodash/once';
+import flatten from 'lodash/flatten';
+import includes from 'lodash/includes';
+import intersection from 'lodash/intersection';
+import uniqBy from 'lodash/uniqBy';
+import flatMap from 'lodash/flatMap';
+import { defonce } from 'ud';
+import assert from 'assert';
+import * as Kefir from 'kefir';
+import asap from 'asap';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import insertElementInOrder from '../../../lib/dom/insert-element-in-order';
+import kefirCast from 'kefir-cast';
+import delayAsap from '../../../lib/delay-asap';
+import kefirStopper from 'kefir-stopper';
+import GmailDropdownView from '../widgets/gmail-dropdown-view';
+import DropdownView from '../../../widgets/buttons/dropdown-view';
+import GmailLabelView from '../widgets/gmail-label-view';
+import GmailActionButtonView from '../widgets/gmail-action-button-view';
+import updateIcon from '../../../driver-common/update-icon';
+const cachedModificationsByRow = defonce(module, () => new WeakMap());
 function focusAndNoPropagation(event) {
-  this.focus();
-  event.stopImmediatePropagation();
+    this.focus();
+    event.stopImmediatePropagation();
 }
 function starGroupEventInterceptor(event) {
-  const isOnStar = this.firstElementChild.contains(event.target);
-  const isOnSDKButton = !isOnStar && this !== event.target;
-  if (!isOnStar) {
-    event.stopImmediatePropagation();
-    if (!isOnSDKButton || event.type == 'mouseover') {
-      const newEvent = document.createEvent('MouseEvents');
-      newEvent.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, event.relatedTarget);
-      this.parentElement.dispatchEvent(newEvent);
+    const isOnStar = this.firstElementChild.contains(event.target);
+    const isOnSDKButton = !isOnStar && this !== event.target;
+    if (!isOnStar) {
+        event.stopImmediatePropagation();
+        if (!isOnSDKButton || event.type == 'mouseover') {
+            const newEvent = document.createEvent('MouseEvents');
+            newEvent.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, event.relatedTarget);
+            this.parentElement.dispatchEvent(newEvent);
+        }
     }
-  }
 }
 class GmailThreadRowView {
-  constructor(element, rowListViewDriver, gmailDriver) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    (0, _defineProperty2.default)(this, "_isDestroyed", false);
-    this;
-    (0, _assert.default)(element.hasAttribute('id'), 'check element is main thread row');
-    this._isVertical = (0, _intersection.default)(Array.from(element.classList), ['zA', 'apv']).length === 2;
-    if (this._isVertical) {
-      const threadRow2 = element.nextElementSibling;
-      if (!threadRow2) throw new Error('threadRow2 not found');
-      const threadRow3 = threadRow2.nextElementSibling;
-      const has3Rows = threadRow3 && threadRow3.classList.contains('apw');
-      this._elements = has3Rows ? [element, element.nextElementSibling, element.nextElementSibling.nextElementSibling] : [element, element.nextElementSibling];
-    } else {
-      this._elements = [element];
-    }
-    const modifications = cachedModificationsByRow.get(this._elements[0]);
-    if (!modifications) {
-      this._alreadyHadModifications = false;
-      this._modifications = {
-        label: {
-          unclaimed: [],
-          claimed: []
-        },
-        action: {
-          unclaimed: [],
-          claimed: []
-        },
-        button: {
-          unclaimed: [],
-          claimed: []
-        },
-        image: {
-          unclaimed: [],
-          claimed: []
-        },
-        replacedDate: {
-          unclaimed: [],
-          claimed: []
-        },
-        replacedDraftLabel: {
-          unclaimed: [],
-          claimed: []
-        }
-      };
-      cachedModificationsByRow.set(this._elements[0], this._modifications);
-    } else {
-      this._modifications = modifications;
-      this._alreadyHadModifications = true;
-    }
-    this._rowListViewDriver = rowListViewDriver;
-    this._driver = gmailDriver;
-    this._userView = null; // supplied by ThreadRowView
-    this._cachedThreadID = null; // set in getter
-
-    this._refresher = null;
-    this._subjectRefresher = null;
-    this._imageRefresher = null;
-    this._counts = null;
-    this._elements[0].setAttribute('data-inboxsdk-thread-row', 'true');
-  }
-  destroy() {
-    if (!this._elements.length) {
-      return;
-    }
-    this._isDestroyed = true;
-    this._modifications.label.unclaimed = this._modifications.label.claimed.concat(this._modifications.label.unclaimed);
-    this._modifications.label.claimed.length = 0;
-    this._modifications.action.unclaimed = this._modifications.action.claimed.concat(this._modifications.action.unclaimed);
-    this._modifications.action.claimed.length = 0;
-    this._modifications.button.unclaimed = this._modifications.button.claimed.concat(this._modifications.button.unclaimed);
-    this._modifications.button.claimed.length = 0;
-    this._modifications.image.unclaimed = this._modifications.image.claimed.concat(this._modifications.image.unclaimed);
-    this._modifications.image.claimed.length = 0;
-    this._modifications.replacedDate.unclaimed = this._modifications.replacedDate.claimed.concat(this._modifications.replacedDate.unclaimed);
-    this._modifications.replacedDate.claimed.length = 0;
-    this._modifications.replacedDraftLabel.unclaimed = this._modifications.replacedDraftLabel.claimed.concat(this._modifications.replacedDraftLabel.unclaimed);
-    this._modifications.replacedDraftLabel.claimed.length = 0;
-    (0, _flatMap.default)(this._elements, el => Array.from(el.getElementsByClassName('inboxsdk__thread_row_addition'))).forEach(el => {
-      el.remove();
-    });
-    this._stopper.destroy();
-    this._elements.length = 0;
-  }
-  getElement() {
-    return this._elements[0];
-  }
-  _removeUnclaimedModifications() {
-    _removeThreadRowUnclaimedModifications(this._modifications);
-
-    // TODO fix column width to deal with removed buttons
-  }
-
-  getAlreadyHadModifications() {
-    return this._alreadyHadModifications;
-  }
-
-  // Returns a Kefir stream that emits this object once this object is ready for the
-  // user. It should almost always synchronously ready immediately, but there's
-  // a few cases such as with multiple inbox or the drafts page that it needs a moment.
-  // make sure you take until by on the gmailThreadRowView.getStopper() because waitForReady
-  // must not be called after the gmailThreadRowView is destroyed
-  waitForReady() {
-    const time = [0, 10, 100, 1000, 15000];
-    const step = () => {
-      if (this._threadIdReady()) {
-        (0, _asap.default)(() => {
-          if (this._elements.length) this._removeUnclaimedModifications();
-        });
-        return _kefir.default.constant(this);
-      } else {
-        const stepTime = time.shift();
-        if (stepTime == undefined) {
-          console.log('Should not happen: ThreadRowViewDriver never became ready', this);
-          return _kefir.default.never();
-        } else {
-          return _kefir.default.later(stepTime).flatMap(step);
+    _elements;
+    _modifications;
+    _alreadyHadModifications;
+    _rowListViewDriver;
+    _driver;
+    _userView;
+    _cachedThreadID;
+    _cachedSyncThreadID;
+    _cachedSyncDraftIDPromise;
+    _stopper = kefirStopper();
+    _refresher;
+    _subjectRefresher;
+    _imageRefresher;
+    _counts;
+    _isVertical;
+    _isDestroyed = false;
+    constructor(element, rowListViewDriver, gmailDriver) {
+        this;
+        assert(element.hasAttribute('id'), 'check element is main thread row');
+        this._isVertical =
+            intersection(Array.from(element.classList), ['zA', 'apv']).length === 2;
+        if (this._isVertical) {
+            const threadRow2 = element.nextElementSibling;
+            if (!threadRow2)
+                throw new Error('threadRow2 not found');
+            const threadRow3 = threadRow2.nextElementSibling;
+            const has3Rows = threadRow3 && threadRow3.classList.contains('apw');
+            this._elements = has3Rows
+                ? [
+                    element,
+                    element.nextElementSibling,
+                    element.nextElementSibling.nextElementSibling,
+                ]
+                : [element, element.nextElementSibling];
         }
-      }
-    };
-    return step();
-  }
-  setUserView(userView) {
-    this._userView = userView;
-  }
-  getCounts() {
-    let counts = this._counts;
-    if (!counts) {
-      const recipientsElement = (0, _querySelectorOrFail.default)(this._elements[0], 'td div.yW');
-      if (this._driver.isUsingSyncAPI()) {
-        const draftCount = recipientsElement.querySelectorAll('.boq').length;
-        const messageCountMatch = recipientsElement.querySelector('.bx0');
-        const messageCount = messageCountMatch && messageCountMatch.innerHTML ? +messageCountMatch.innerHTML : draftCount ? 0 : 1;
-        counts = this._counts = {
-          messageCount,
-          draftCount
-        };
-      } else {
-        const [preDrafts, drafts] = recipientsElement.innerHTML.split(/<font color=[^>]+>[^>]+<\/font>/);
-        const preDraftsWithoutNames = preDrafts.replace(/<span\b[^>]*>.*?<\/span>/g, '');
-        const messageCountMatch = preDraftsWithoutNames.match(/\((\d+)\)/);
-        const messageCount = messageCountMatch ? +messageCountMatch[1] : preDrafts ? 1 : 0;
-        const draftCountMatch = drafts && drafts.match(/\((\d+)\)/);
-        const draftCount = draftCountMatch ? +draftCountMatch[1] : drafts != null ? 1 : 0;
-        counts = this._counts = {
-          messageCount,
-          draftCount
-        };
-      }
-    }
-    return counts;
-  }
-  _expandColumn(colSelector, width) {
-    this._rowListViewDriver.expandColumn(colSelector, width);
-  }
-  addLabel(label) {
-    if (!this._elements.length) {
-      console.warn('addLabel called on destroyed thread row');
-      return;
-    }
-    const prop = (0, _kefirCast.default)(_kefir.default, label).takeUntilBy(this._stopper).toProperty();
-    let labelMod = null;
-    prop.combine(this._getRefresher()).takeUntilBy(this._stopper).onValue(_ref => {
-      let [labelDescriptor] = _ref;
-      if (!labelDescriptor) {
-        if (labelMod) {
-          labelMod.remove();
-          this._modifications.label.claimed.splice(this._modifications.label.claimed.indexOf(labelMod), 1);
-          labelMod = null;
+        else {
+            this._elements = [element];
         }
-      } else {
-        if (!labelMod) {
-          labelMod = this._modifications.label.unclaimed.shift();
-          if (!labelMod) {
-            const gmailLabelView = new _gmailLabelView.default({
-              classes: ['inboxsdk__thread_row_label']
-            });
-            const el = gmailLabelView.getElement();
-            labelMod = {
-              gmailLabelView,
-              remove: el.remove.bind(el)
+        const modifications = cachedModificationsByRow.get(this._elements[0]);
+        if (!modifications) {
+            this._alreadyHadModifications = false;
+            this._modifications = {
+                label: {
+                    unclaimed: [],
+                    claimed: [],
+                },
+                action: {
+                    unclaimed: [],
+                    claimed: [],
+                },
+                button: {
+                    unclaimed: [],
+                    claimed: [],
+                },
+                image: {
+                    unclaimed: [],
+                    claimed: [],
+                },
+                replacedDate: {
+                    unclaimed: [],
+                    claimed: [],
+                },
+                replacedDraftLabel: {
+                    unclaimed: [],
+                    claimed: [],
+                },
             };
-          }
-          this._modifications.label.claimed.push(labelMod);
-        }
-        labelMod.gmailLabelView.updateLabelDescriptor(labelDescriptor);
-        const labelParentDiv = this._getLabelParent();
-        if (labelParentDiv !== labelMod.gmailLabelView.getElement().parentElement) {
-          labelParentDiv.insertAdjacentElement('afterbegin', labelMod.gmailLabelView.getElement());
+            cachedModificationsByRow.set(this._elements[0], this._modifications);
         }
-      }
-    });
-  }
-  addImage(inIconDescriptor) {
-    if (!this._elements.length) {
-      console.warn('addImage called on destroyed thread row');
-      return;
-    }
-    const prop = (0, _kefirCast.default)(_kefir.default, inIconDescriptor).toProperty().combine(_kefir.default.merge([this._getRefresher(), this._getSubjectRefresher(), this._getImageContainerRefresher()])).takeUntilBy(this._stopper);
-    let imageMod = null;
-    prop.onValue(_ref2 => {
-      let [iconDescriptor] = _ref2;
-      if (!iconDescriptor) {
-        if (imageMod) {
-          imageMod.remove();
-          this._modifications.image.claimed.splice(this._modifications.image.claimed.indexOf(imageMod), 1);
-          imageMod = null;
+        else {
+            this._modifications = modifications;
+            this._alreadyHadModifications = true;
         }
-      } else {
-        if (!imageMod) {
-          imageMod = this._modifications.image.unclaimed.shift();
-          if (!imageMod) {
-            imageMod = {
-              iconSettings: {},
-              iconWrapper: document.createElement('div'),
-              remove() {
-                this.iconWrapper.remove();
-              }
-            };
-            imageMod.iconWrapper.className = 'inboxsdk__thread_row_icon_wrapper';
-          }
-          this._modifications.image.claimed.push(imageMod);
-        }
-        const {
-          iconSettings,
-          iconWrapper
-        } = imageMod;
-        (0, _updateIcon.default)(iconSettings, iconWrapper, false, iconDescriptor.imageClass, iconDescriptor.imageUrl);
-        const containerRow = this._elements.length === 3 ? this._elements[2] : this._elements[0];
-        containerRow.classList.add('inboxsdk__thread_row_image_added');
-        if (iconDescriptor.tooltip) {
-          iconWrapper.setAttribute('data-tooltip', iconDescriptor.tooltip);
-        } else {
-          iconWrapper.removeAttribute('data-tooltip');
+        this._rowListViewDriver = rowListViewDriver;
+        this._driver = gmailDriver;
+        this._userView = null; // supplied by ThreadRowView
+        this._cachedThreadID = null; // set in getter
+        this._refresher = null;
+        this._subjectRefresher = null;
+        this._imageRefresher = null;
+        this._counts = null;
+        this._elements[0].setAttribute('data-inboxsdk-thread-row', 'true');
+    }
+    destroy() {
+        if (!this._elements.length) {
+            return;
         }
-        const labelParent = this._getLabelParent();
-        if (!labelParent.contains(iconWrapper)) {
-          (0, _querySelectorOrFail.default)(labelParent, '.y6').insertAdjacentElement('beforebegin', iconWrapper);
+        this._isDestroyed = true;
+        this._modifications.label.unclaimed =
+            this._modifications.label.claimed.concat(this._modifications.label.unclaimed);
+        this._modifications.label.claimed.length = 0;
+        this._modifications.action.unclaimed =
+            this._modifications.action.claimed.concat(this._modifications.action.unclaimed);
+        this._modifications.action.claimed.length = 0;
+        this._modifications.button.unclaimed =
+            this._modifications.button.claimed.concat(this._modifications.button.unclaimed);
+        this._modifications.button.claimed.length = 0;
+        this._modifications.image.unclaimed =
+            this._modifications.image.claimed.concat(this._modifications.image.unclaimed);
+        this._modifications.image.claimed.length = 0;
+        this._modifications.replacedDate.unclaimed =
+            this._modifications.replacedDate.claimed.concat(this._modifications.replacedDate.unclaimed);
+        this._modifications.replacedDate.claimed.length = 0;
+        this._modifications.replacedDraftLabel.unclaimed =
+            this._modifications.replacedDraftLabel.claimed.concat(this._modifications.replacedDraftLabel.unclaimed);
+        this._modifications.replacedDraftLabel.claimed.length = 0;
+        flatMap(this._elements, (el) => Array.from(el.getElementsByClassName('inboxsdk__thread_row_addition'))).forEach((el) => {
+            el.remove();
+        });
+        this._stopper.destroy();
+        this._elements.length = 0;
+    }
+    getElement() {
+        return this._elements[0];
+    }
+    _removeUnclaimedModifications() {
+        _removeThreadRowUnclaimedModifications(this._modifications); // TODO fix column width to deal with removed buttons
+    }
+    getAlreadyHadModifications() {
+        return this._alreadyHadModifications;
+    }
+    // Returns a Kefir stream that emits this object once this object is ready for the
+    // user. It should almost always synchronously ready immediately, but there's
+    // a few cases such as with multiple inbox or the drafts page that it needs a moment.
+    // make sure you take until by on the gmailThreadRowView.getStopper() because waitForReady
+    // must not be called after the gmailThreadRowView is destroyed
+    waitForReady() {
+        const time = [0, 10, 100, 1000, 15000];
+        const step = () => {
+            if (this._threadIdReady()) {
+                asap(() => {
+                    if (this._elements.length)
+                        this._removeUnclaimedModifications();
+                });
+                return Kefir.constant(this);
+            }
+            else {
+                const stepTime = time.shift();
+                if (stepTime == undefined) {
+                    console.log('Should not happen: ThreadRowViewDriver never became ready', this);
+                    return Kefir.never();
+                }
+                else {
+                    return Kefir.later(stepTime, undefined).flatMap(step);
+                }
+            }
+        };
+        return step();
+    }
+    setUserView(userView) {
+        this._userView = userView;
+    }
+    getCounts() {
+        let counts = this._counts;
+        if (!counts) {
+            const recipientsElement = querySelector(this._elements[0], 'td div.yW');
+            if (this._driver.isUsingSyncAPI()) {
+                const draftCount = recipientsElement.querySelectorAll('.boq').length;
+                const messageCountMatch = recipientsElement.querySelector('.bx0');
+                const messageCount = messageCountMatch && messageCountMatch.innerHTML
+                    ? +messageCountMatch.innerHTML
+                    : draftCount
+                        ? 0
+                        : 1;
+                counts = this._counts = {
+                    messageCount,
+                    draftCount,
+                };
+            }
+            else {
+                const [preDrafts, drafts] = recipientsElement.innerHTML.split(/<font color=[^>]+>[^>]+<\/font>/);
+                const preDraftsWithoutNames = preDrafts.replace(/<span\b[^>]*>.*?<\/span>/g, '');
+                const messageCountMatch = preDraftsWithoutNames.match(/\((\d+)\)/);
+                const messageCount = messageCountMatch
+                    ? +messageCountMatch[1]
+                    : preDrafts
+                        ? 1
+                        : 0;
+                const draftCountMatch = drafts && drafts.match(/\((\d+)\)/);
+                const draftCount = draftCountMatch
+                    ? +draftCountMatch[1]
+                    : drafts != null
+                        ? 1
+                        : 0;
+                counts = this._counts = {
+                    messageCount,
+                    draftCount,
+                };
+            }
         }
-      }
-    });
-  }
-  addButton(buttonDescriptor) {
-    if (!this._elements.length) {
-      console.warn('addButton called on destroyed thread row');
-      return;
-    }
-    if (this._elements.length != 1) return; // buttons not supported in vertical preview pane
-
-    let activeDropdown = null;
-    let buttonMod = null;
-    const prop = (0, _kefirCast.default)(_kefir.default, buttonDescriptor).toProperty().takeUntilBy(this._stopper);
-    prop.merge(this._stopper).onValue(buttonDescriptor => {
-      if (!buttonDescriptor) {
-        if (activeDropdown) {
-          activeDropdown.close();
-          activeDropdown = null;
+        return counts;
+    }
+    _expandColumn(colSelector, width) {
+        this._rowListViewDriver.expandColumn(colSelector, width);
+    }
+    addLabel(label) {
+        if (!this._elements.length) {
+            console.warn('addLabel called on destroyed thread row');
+            return;
         }
-      }
-    });
-    this._stopper.onValue(() => {
-      if (buttonMod && buttonMod.buttonSpan) {
-        buttonMod.buttonSpan.onclick = null;
-      }
-    });
-    prop.combine(this._getRefresher()).onValue(_ref3 => {
-      let [_buttonDescriptor] = _ref3;
-      const buttonDescriptor = _buttonDescriptor;
-      if (!buttonDescriptor) {
-        if (buttonMod) {
-          buttonMod.remove();
-          this._modifications.button.claimed.splice(this._modifications.button.claimed.indexOf(buttonMod), 1);
-          buttonMod = null;
+        const prop = kefirCast(Kefir, label).takeUntilBy(this._stopper).toProperty();
+        let labelMod = null;
+        prop
+            .combine(this._getRefresher())
+            .takeUntilBy(this._stopper)
+            .onValue(([labelDescriptor]) => {
+            if (!labelDescriptor) {
+                if (labelMod) {
+                    labelMod.remove();
+                    this._modifications.label.claimed.splice(this._modifications.label.claimed.indexOf(labelMod), 1);
+                    labelMod = null;
+                }
+            }
+            else {
+                if (!labelMod) {
+                    labelMod = this._modifications.label.unclaimed.shift();
+                    if (!labelMod) {
+                        const gmailLabelView = new GmailLabelView({
+                            classes: ['inboxsdk__thread_row_label'],
+                        });
+                        const el = gmailLabelView.getElement();
+                        labelMod = {
+                            gmailLabelView,
+                            remove: el.remove.bind(el),
+                        };
+                    }
+                    this._modifications.label.claimed.push(labelMod);
+                }
+                labelMod.gmailLabelView.updateLabelDescriptor(labelDescriptor);
+                const labelParentDiv = this._getLabelParent();
+                if (labelParentDiv !==
+                    labelMod.gmailLabelView.getElement().parentElement) {
+                    labelParentDiv.insertAdjacentElement('afterbegin', labelMod.gmailLabelView.getElement());
+                }
+            }
+        });
+    }
+    addImage(inIconDescriptor) {
+        if (!this._elements.length) {
+            console.warn('addImage called on destroyed thread row');
+            return;
         }
-      } else {
-        // compat workaround
-        if (buttonDescriptor.className) {
-          buttonDescriptor.iconClass = buttonDescriptor.className;
-          delete buttonDescriptor.className;
+        const prop = kefirCast(Kefir, inIconDescriptor)
+            .toProperty()
+            .combine(Kefir.merge([
+            this._getRefresher(),
+            this._getSubjectRefresher(),
+            this._getImageContainerRefresher(),
+        ]))
+            .takeUntilBy(this._stopper);
+        let imageMod = null;
+        prop.onValue(([iconDescriptor]) => {
+            if (!iconDescriptor) {
+                if (imageMod) {
+                    imageMod.remove();
+                    this._modifications.image.claimed.splice(this._modifications.image.claimed.indexOf(imageMod), 1);
+                    imageMod = null;
+                }
+            }
+            else {
+                if (!imageMod) {
+                    imageMod = this._modifications.image.unclaimed.shift();
+                    if (!imageMod) {
+                        imageMod = {
+                            iconSettings: {},
+                            iconWrapper: document.createElement('div'),
+                            remove() {
+                                this.iconWrapper.remove();
+                            },
+                        };
+                        imageMod.iconWrapper.className =
+                            'inboxsdk__thread_row_icon_wrapper';
+                    }
+                    this._modifications.image.claimed.push(imageMod);
+                }
+                const { iconSettings, iconWrapper } = imageMod;
+                updateIcon(iconSettings, iconWrapper, false, iconDescriptor.imageClass, iconDescriptor.imageUrl);
+                const containerRow = this._elements.length === 3 ? this._elements[2] : this._elements[0];
+                containerRow.classList.add('inboxsdk__thread_row_image_added');
+                if (iconDescriptor.tooltip) {
+                    iconWrapper.setAttribute('data-tooltip', iconDescriptor.tooltip);
+                }
+                else {
+                    iconWrapper.removeAttribute('data-tooltip');
+                }
+                const labelParent = this._getLabelParent();
+                if (!labelParent.contains(iconWrapper)) {
+                    querySelector(labelParent, '.y6').insertAdjacentElement('beforebegin', iconWrapper);
+                }
+            }
+        });
+    }
+    addButton(buttonDescriptor) {
+        if (!this._elements.length) {
+            console.warn('addButton called on destroyed thread row');
+            return;
         }
-        let buttonSpan, iconSettings;
-        const buttonToolbar = this._elements[0].querySelector('ul[role=toolbar]');
-        if (!buttonMod) {
-          buttonMod = this._modifications.button.unclaimed.shift();
-          if (!buttonMod) {
-            if (buttonToolbar) {
-              buttonSpan = document.createElement('li');
-              buttonSpan.classList.add('bqX');
-            } else {
-              buttonSpan = document.createElement('span');
-              // T-KT is one of the class names on the star button.
-              buttonSpan.classList.add('T-KT');
+        if (this._elements.length != 1)
+            return; // buttons not supported in vertical preview pane
+        let activeDropdown = null;
+        let buttonMod = null;
+        const prop = kefirCast(Kefir, buttonDescriptor)
+            .toProperty()
+            .takeUntilBy(this._stopper);
+        prop.merge(this._stopper).onValue((buttonDescriptor) => {
+            if (!buttonDescriptor) {
+                if (activeDropdown) {
+                    activeDropdown.close();
+                    activeDropdown = null;
+                }
             }
-            buttonSpan.classList.add('inboxsdk__thread_row_button');
-            if (buttonDescriptor.title) {
-              buttonSpan.setAttribute('title', buttonDescriptor.title);
-            } else {
-              buttonSpan.removeAttribute('title');
+        });
+        this._stopper.onValue(() => {
+            if (buttonMod && buttonMod.buttonSpan) {
+                buttonMod.buttonSpan.onclick = null;
             }
-            buttonSpan.setAttribute('tabindex', '-1');
-            buttonSpan.setAttribute('data-order-hint', String(buttonDescriptor.orderHint || 0));
-            buttonSpan.addEventListener('onmousedown', focusAndNoPropagation);
-            iconSettings = {};
-            buttonMod = {
-              buttonSpan,
-              iconSettings,
-              remove: buttonSpan.remove.bind(buttonSpan)
-            };
-          }
-          this._modifications.button.claimed.push(buttonMod);
+        });
+        prop.combine(this._getRefresher()).onValue(([_buttonDescriptor]) => {
+            const buttonDescriptor = _buttonDescriptor;
+            if (!buttonDescriptor) {
+                if (buttonMod) {
+                    buttonMod.remove();
+                    this._modifications.button.claimed.splice(this._modifications.button.claimed.indexOf(buttonMod), 1);
+                    buttonMod = null;
+                }
+            }
+            else {
+                // compat workaround
+                if (buttonDescriptor.className) {
+                    buttonDescriptor.iconClass = buttonDescriptor.className;
+                    delete buttonDescriptor.className;
+                }
+                let buttonSpan, iconSettings;
+                const buttonToolbar = this._elements[0].querySelector('ul[role=toolbar]');
+                if (!buttonMod) {
+                    buttonMod = this._modifications.button.unclaimed.shift();
+                    if (!buttonMod) {
+                        if (buttonToolbar) {
+                            buttonSpan = document.createElement('li');
+                            buttonSpan.classList.add('bqX');
+                        }
+                        else {
+                            buttonSpan = document.createElement('span');
+                            // T-KT is one of the class names on the star button.
+                            buttonSpan.classList.add('T-KT');
+                        }
+                        buttonSpan.classList.add('inboxsdk__thread_row_button');
+                        if (buttonDescriptor.title) {
+                            buttonSpan.setAttribute('title', buttonDescriptor.title);
+                        }
+                        else {
+                            buttonSpan.removeAttribute('title');
+                        }
+                        buttonSpan.setAttribute('tabindex', '-1');
+                        buttonSpan.setAttribute('data-order-hint', String(buttonDescriptor.orderHint || 0));
+                        buttonSpan.addEventListener('onmousedown', focusAndNoPropagation);
+                        iconSettings = {};
+                        buttonMod = {
+                            buttonSpan,
+                            iconSettings,
+                            remove: buttonSpan.remove.bind(buttonSpan),
+                        };
+                    }
+                    this._modifications.button.claimed.push(buttonMod);
+                }
+                // could also be trash icon
+                const starGroup = buttonToolbar
+                    ? null
+                    : querySelector(this._elements[0], 'td.apU.xY, td.aqM.xY');
+                buttonSpan = buttonMod.buttonSpan;
+                iconSettings = buttonMod.iconSettings;
+                if (buttonDescriptor.onClick) {
+                    buttonSpan.onclick = (event) => {
+                        const appEvent = {
+                            dropdown: null,
+                            threadRowView: this._userView,
+                        };
+                        if (buttonDescriptor.hasDropdown) {
+                            if (activeDropdown) {
+                                this._elements[0].classList.remove('inboxsdk__dropdown_active');
+                                this._elements[0].classList.remove('buL'); // gmail class to force row button toolbar to be visible
+                                activeDropdown.close();
+                                activeDropdown = null;
+                                return;
+                            }
+                            else {
+                                this._elements[0].classList.add('inboxsdk__dropdown_active');
+                                this._elements[0].classList.add('buL'); // gmail class to force row button toolbar to be visible
+                                appEvent.dropdown = activeDropdown = new DropdownView(new GmailDropdownView(), buttonSpan, null);
+                                activeDropdown.setPlacementOptions({
+                                    position: 'bottom',
+                                    hAlign: 'left',
+                                    vAlign: 'top',
+                                });
+                                // remember this reference before the destroy event and setTimeout
+                                // because this._elements may be cleared by then.
+                                const firstEl = this._elements[0];
+                                activeDropdown.on('destroy', () => {
+                                    setTimeout(() => {
+                                        firstEl.classList.remove('inboxsdk__dropdown_active');
+                                        firstEl.classList.remove('buL'); // gmail class to force row button toolbar to be visible
+                                        activeDropdown = null;
+                                    }, 1);
+                                });
+                            }
+                        }
+                        buttonDescriptor.onClick.call(null, appEvent);
+                    };
+                }
+                updateIcon(iconSettings, buttonSpan, false, buttonDescriptor.iconClass, buttonDescriptor.iconUrl);
+                if (buttonToolbar && buttonSpan.parentElement !== buttonToolbar) {
+                    insertElementInOrder(buttonToolbar, buttonSpan, undefined, true);
+                }
+                else if (starGroup && buttonSpan.parentElement !== starGroup) {
+                    insertElementInOrder(starGroup, buttonSpan);
+                    this._expandColumn('col.y5', 26 * starGroup.children.length);
+                    // Don't let the whole column count as the star for click and mouse over purposes.
+                    // Click events that aren't directly on the star should be stopped.
+                    // Mouseover events that aren't directly on the star should be stopped and
+                    // re-emitted from the thread row, so the thread row still has the mouseover
+                    // appearance.
+                    // Click events that are on one of our buttons should be stopped. Click events
+                    // that aren't on the star button or our buttons should be re-emitted from the
+                    // thread row so it counts as clicking on the thread.
+                    starGroup.onmouseover = starGroup.onclick = starGroupEventInterceptor;
+                }
+            }
+        });
+    }
+    addActionButton(actionButtonDescriptor) {
+        if (this._elements.length !== 1) {
+            return;
         }
-
-        // could also be trash icon
-        const starGroup = buttonToolbar ? null : (0, _querySelectorOrFail.default)(this._elements[0], 'td.apU.xY, td.aqM.xY');
-        buttonSpan = buttonMod.buttonSpan;
-        iconSettings = buttonMod.iconSettings;
-        if (buttonDescriptor.onClick) {
-          buttonSpan.onclick = event => {
-            const appEvent = {
-              dropdown: null,
-              threadRowView: this._userView
-            };
-            if (buttonDescriptor.hasDropdown) {
-              if (activeDropdown) {
-                this._elements[0].classList.remove('inboxsdk__dropdown_active');
-                this._elements[0].classList.remove('buL'); // gmail class to force row button toolbar to be visible
-                activeDropdown.close();
-                activeDropdown = null;
+        const prop = kefirCast(Kefir, actionButtonDescriptor)
+            .takeUntilBy(this._stopper)
+            .toProperty();
+        let actionMod = null;
+        this._stopper.onEnd(() => {
+            if (actionMod) {
+                actionMod.gmailActionButtonView.setOnClick(null);
+            }
+        });
+        prop.takeUntilBy(this._stopper).onValue((actionButtonDescriptor) => {
+            if (actionButtonDescriptor && actionButtonDescriptor.type !== 'LINK') {
+                console.error('Only type=LINK is currently supported');
                 return;
-              } else {
-                this._elements[0].classList.add('inboxsdk__dropdown_active');
-                this._elements[0].classList.add('buL'); // gmail class to force row button toolbar to be visible
-                appEvent.dropdown = activeDropdown = new _dropdownView.default(new _gmailDropdownView.default(), buttonSpan, null);
-                activeDropdown.setPlacementOptions({
-                  position: 'bottom',
-                  hAlign: 'left',
-                  vAlign: 'top'
-                });
-
-                // remember this reference before the destroy event and setTimeout
-                // because this._elements may be cleared by then.
-                const firstEl = this._elements[0];
-                activeDropdown.on('destroy', () => {
-                  setTimeout(() => {
-                    firstEl.classList.remove('inboxsdk__dropdown_active');
-                    firstEl.classList.remove('buL'); // gmail class to force row button toolbar to be visible
-                    activeDropdown = null;
-                  }, 1);
+            }
+            if (!actionButtonDescriptor) {
+                if (actionMod) {
+                    actionMod.remove();
+                    this._modifications.action.claimed.splice(this._modifications.action.claimed.indexOf(actionMod), 1);
+                    actionMod = null;
+                }
+            }
+            else {
+                if (!actionMod) {
+                    actionMod = this._modifications.action.unclaimed.shift();
+                    if (!actionMod) {
+                        const gmailActionButtonView = new GmailActionButtonView();
+                        const el = gmailActionButtonView.getElement();
+                        actionMod = {
+                            gmailActionButtonView,
+                            remove: el.remove.bind(el),
+                        };
+                    }
+                    this._modifications.action.claimed.push(actionMod);
+                }
+                actionMod.gmailActionButtonView.updateDescriptor(actionButtonDescriptor);
+                const { url, onClick } = actionButtonDescriptor;
+                actionMod.gmailActionButtonView.setOnClick((event) => {
+                    event.stopPropagation();
+                    window.open(url, '_blank');
+                    if (onClick) {
+                        onClick.call(null, {});
+                    }
                 });
-              }
+                const actionParentDiv = this._elements[0].querySelector('td.a4W .a4X .aKS') ||
+                    this._elements[0].querySelector('td.a4W div.xS');
+                if (!actionParentDiv)
+                    throw new Error('Failed to find actionParentDiv');
+                if (!includes(actionParentDiv.children, actionMod.gmailActionButtonView.getElement())) {
+                    actionParentDiv.insertBefore(actionMod.gmailActionButtonView.getElement(), actionParentDiv.firstChild);
+                }
             }
-            buttonDescriptor.onClick.call(null, appEvent);
-          };
-        }
-        (0, _updateIcon.default)(iconSettings, buttonSpan, false, buttonDescriptor.iconClass, buttonDescriptor.iconUrl);
-        if (buttonToolbar && buttonSpan.parentElement !== buttonToolbar) {
-          (0, _insertElementInOrder.default)(buttonToolbar, buttonSpan, undefined, true);
-        } else if (starGroup && buttonSpan.parentElement !== starGroup) {
-          (0, _insertElementInOrder.default)(starGroup, buttonSpan);
-          this._expandColumn('col.y5', 26 * starGroup.children.length);
-
-          // Don't let the whole column count as the star for click and mouse over purposes.
-          // Click events that aren't directly on the star should be stopped.
-          // Mouseover events that aren't directly on the star should be stopped and
-          // re-emitted from the thread row, so the thread row still has the mouseover
-          // appearance.
-          // Click events that are on one of our buttons should be stopped. Click events
-          // that aren't on the star button or our buttons should be re-emitted from the
-          // thread row so it counts as clicking on the thread.
-          starGroup.onmouseover = starGroup.onclick = starGroupEventInterceptor;
-        }
-      }
-    });
-  }
-  addActionButton(actionButtonDescriptor) {
-    if (this._elements.length !== 1) {
-      return;
-    }
-    const prop = (0, _kefirCast.default)(_kefir.default, actionButtonDescriptor).takeUntilBy(this._stopper).toProperty();
-    let actionMod = null;
-    this._stopper.onEnd(() => {
-      if (actionMod) {
-        actionMod.gmailActionButtonView.setOnClick(null);
-      }
-    });
-    prop.takeUntilBy(this._stopper).onValue(actionButtonDescriptor => {
-      if (actionButtonDescriptor && actionButtonDescriptor.type !== 'LINK') {
-        console.error('Only type=LINK is currently supported');
-        return;
-      }
-      if (!actionButtonDescriptor) {
-        if (actionMod) {
-          actionMod.remove();
-          this._modifications.action.claimed.splice(this._modifications.action.claimed.indexOf(actionMod), 1);
-          actionMod = null;
-        }
-      } else {
-        if (!actionMod) {
-          actionMod = this._modifications.action.unclaimed.shift();
-          if (!actionMod) {
-            const gmailActionButtonView = new _gmailActionButtonView.default();
-            const el = gmailActionButtonView.getElement();
-            actionMod = {
-              gmailActionButtonView,
-              remove: el.remove.bind(el)
-            };
-          }
-          this._modifications.action.claimed.push(actionMod);
-        }
-        actionMod.gmailActionButtonView.updateDescriptor(actionButtonDescriptor);
-        const {
-          url,
-          onClick
-        } = actionButtonDescriptor;
-        actionMod.gmailActionButtonView.setOnClick(event => {
-          event.stopPropagation();
-          window.open(url, '_blank');
-          if (onClick) {
-            onClick.call(null, {});
-          }
         });
-        const actionParentDiv = this._elements[0].querySelector('td.a4W .a4X .aKS') || this._elements[0].querySelector('td.a4W div.xS');
-        if (!actionParentDiv) throw new Error('Failed to find actionParentDiv');
-        if (!(0, _includes.default)(actionParentDiv.children, actionMod.gmailActionButtonView.getElement())) {
-          actionParentDiv.insertBefore(actionMod.gmailActionButtonView.getElement(), actionParentDiv.firstChild);
-        }
-      }
-    });
-  }
-  addAttachmentIcon(opts) {
-    if (!this._elements.length) {
-      console.warn('addAttachmentIcon called on destroyed thread row');
-      return;
-    }
-    const getImgElement = (0, _once.default)(() => {
-      const img = document.createElement('img');
-      img.src = 'images/cleardot.gif';
-      return img;
-    });
-    const getCustomIconWrapper = (0, _once.default)(() => {
-      const div = document.createElement('div');
-      return div;
-    });
-    var added = false;
-    var currentIconUrl;
-    var prop = (0, _kefirCast.default)(_kefir.default, opts).toProperty();
-    prop.combine(this._getRefresher()).takeUntilBy(this._stopper).onValue(_ref4 => {
-      let [opts] = _ref4;
-      const attachmentDiv = (0, _querySelectorOrFail.default)(this._elements[0], 'td.yf.xY');
-      if (!opts) {
-        if (added) {
-          getCustomIconWrapper().remove();
-          getImgElement().remove();
-          added = false;
-          if (!attachmentDiv.querySelector('.inboxsdk__thread_row_attachment_icon')) {
-            attachmentDiv.classList.remove('inboxsdk__thread_row_attachment_icons_present');
-          }
-        }
-      } else {
-        const img = opts.iconHtml != null ? getCustomIconWrapper() : getImgElement();
-        if (opts.tooltip) {
-          img.setAttribute('data-tooltip', opts.tooltip);
-        } else {
-          img.removeAttribute('data-tooltip');
+    }
+    addAttachmentIcon(opts) {
+        if (!this._elements.length) {
+            console.warn('addAttachmentIcon called on destroyed thread row');
+            return;
         }
-        img.className = opts.iconHtml != null ? 'inboxsdk__thread_row_addition inboxsdk__thread_row_attachment_iconWrapper ' + (opts.iconClass || '') : 'inboxsdk__thread_row_addition inboxsdk__thread_row_attachment_icon ' + (opts.iconClass || '');
-        if (opts.iconHtml != null) {
-          if (attachmentDiv.contains(getImgElement())) {
-            getImgElement().remove();
-          }
-          img.innerHTML = opts.iconHtml;
-        } else if (currentIconUrl != opts.iconUrl) {
-          if (attachmentDiv.contains(getCustomIconWrapper())) {
-            getCustomIconWrapper().remove();
-          }
-          img.style.background = opts.iconUrl ? 'url(' + opts.iconUrl + ') no-repeat 0 0' : '';
-          currentIconUrl = opts.iconUrl;
+        const getImgElement = once(() => {
+            const img = document.createElement('img');
+            img.src = 'images/cleardot.gif';
+            return img;
+        });
+        const getCustomIconWrapper = once(() => {
+            const div = document.createElement('div');
+            return div;
+        });
+        var added = false;
+        var currentIconUrl;
+        var prop = kefirCast(Kefir, opts).toProperty();
+        prop
+            .combine(this._getRefresher())
+            .takeUntilBy(this._stopper)
+            .onValue(([opts]) => {
+            const attachmentDiv = querySelector(this._elements[0], 'td.yf.xY');
+            if (!opts) {
+                if (added) {
+                    getCustomIconWrapper().remove();
+                    getImgElement().remove();
+                    added = false;
+                    if (!attachmentDiv.querySelector('.inboxsdk__thread_row_attachment_icon')) {
+                        attachmentDiv.classList.remove('inboxsdk__thread_row_attachment_icons_present');
+                    }
+                }
+            }
+            else {
+                const img = opts.iconHtml != null ? getCustomIconWrapper() : getImgElement();
+                if (opts.tooltip) {
+                    img.setAttribute('data-tooltip', opts.tooltip);
+                }
+                else {
+                    img.removeAttribute('data-tooltip');
+                }
+                img.className =
+                    opts.iconHtml != null
+                        ? 'inboxsdk__thread_row_addition inboxsdk__thread_row_attachment_iconWrapper ' +
+                            (opts.iconClass || '')
+                        : 'inboxsdk__thread_row_addition inboxsdk__thread_row_attachment_icon ' +
+                            (opts.iconClass || '');
+                if (opts.iconHtml != null) {
+                    if (attachmentDiv.contains(getImgElement())) {
+                        getImgElement().remove();
+                    }
+                    img.innerHTML = opts.iconHtml;
+                }
+                else if (currentIconUrl != opts.iconUrl) {
+                    if (attachmentDiv.contains(getCustomIconWrapper())) {
+                        getCustomIconWrapper().remove();
+                    }
+                    img.style.background = opts.iconUrl
+                        ? 'url(' + opts.iconUrl + ') no-repeat 0 0'
+                        : '';
+                    currentIconUrl = opts.iconUrl;
+                }
+                if (!attachmentDiv.contains(img)) {
+                    attachmentDiv.appendChild(img);
+                    added = true;
+                    this._expandColumn('col.yg', attachmentDiv.children.length * 16);
+                    if (this._elements.length > 1) {
+                        this._fixDateColumnWidth();
+                    }
+                }
+                attachmentDiv.classList.add('inboxsdk__thread_row_attachment_icons_present');
+            }
+        });
+    }
+    _fixDateColumnWidth() {
+        asap(() => {
+            if (!this._elements.length)
+                return;
+            const dateContainer = this._elements[0].querySelector('td.xW, td.yf > div.apm');
+            if (!dateContainer)
+                return;
+            const visibleDateSpan = dateContainer.querySelector('.inboxsdk__thread_row_custom_date') ||
+                dateContainer.firstElementChild;
+            if (!visibleDateSpan || !(visibleDateSpan instanceof HTMLElement))
+                return;
+            // Attachment icons are only in the date column in vertical preivew pane.
+            const dateColumnAttachmentIconCount = this._elements[0].querySelectorAll('td.yf > img').length;
+            this._expandColumn('col.xX', visibleDateSpan.offsetWidth +
+                8 +
+                2 +
+                20 +
+                dateColumnAttachmentIconCount * 16);
+        });
+    }
+    replaceDraftLabel(opts) {
+        if (!this._elements.length) {
+            console.warn('replaceDraftLabel called on destroyed thread row');
+            return;
         }
-        if (!attachmentDiv.contains(img)) {
-          attachmentDiv.appendChild(img);
-          added = true;
-          this._expandColumn('col.yg', attachmentDiv.children.length * 16);
-          if (this._elements.length > 1) {
-            this._fixDateColumnWidth();
-          }
+        let labelMod;
+        let draftElement, countElement;
+        const prop = kefirCast(Kefir, opts).toProperty();
+        prop
+            .combine(this._getRefresher())
+            .takeUntilBy(this._stopper)
+            .onValue(([opts]) => {
+            const originalLabel = querySelector(this._elements[0], 'td > div.yW');
+            const recipientsContainer = originalLabel.parentElement;
+            if (!recipientsContainer)
+                throw new Error('Should not happen');
+            if (!opts) {
+                if (labelMod) {
+                    labelMod.remove();
+                    this._modifications.replacedDraftLabel.claimed.splice(this._modifications.replacedDraftLabel.claimed.indexOf(labelMod), 1);
+                    labelMod = null;
+                }
+            }
+            else {
+                opts = Object.assign({
+                    count: 1,
+                }, opts);
+                if (!labelMod) {
+                    labelMod = this._modifications.replacedDraftLabel.unclaimed.shift();
+                    if (!labelMod) {
+                        labelMod = {
+                            el: Object.assign(document.createElement('span'), {
+                                className: 'inboxsdk__thread_row_custom_draft_label',
+                            }),
+                            remove() {
+                                this.el.remove();
+                            },
+                        };
+                    }
+                    this._modifications.replacedDraftLabel.claimed.push(labelMod);
+                }
+                const needToAdd = !includes(recipientsContainer.children, labelMod.el);
+                if (needToAdd || !draftElement) {
+                    labelMod.el.innerHTML = originalLabel.innerHTML;
+                    const materiaUIlDraftElements = Array.from(labelMod.el.querySelectorAll('.boq'));
+                    if (materiaUIlDraftElements.length > 0) {
+                        materiaUIlDraftElements.forEach((el) => el.remove());
+                        draftElement = Object.assign(document.createElement('span'), {
+                            className: 'boq',
+                        });
+                        labelMod.el.appendChild(draftElement);
+                    }
+                    else {
+                        draftElement = labelMod.el.querySelector('font');
+                        if (!draftElement) {
+                            return;
+                        }
+                        const nextSibling = draftElement.nextElementSibling;
+                        if (nextSibling) {
+                            nextSibling.remove();
+                        }
+                    }
+                    draftElement.classList.add('inboxsdk__thread_row_custom_draft_part');
+                    countElement = Object.assign(document.createElement('span'), {
+                        className: 'inboxsdk__thread_row_custom_draft_count',
+                    });
+                    labelMod.el.appendChild(countElement);
+                }
+                draftElement.textContent = opts.text;
+                countElement.textContent = opts.count !== 1 ? ` (${opts.count})` : '';
+                if (needToAdd) {
+                    recipientsContainer.insertBefore(labelMod.el, originalLabel);
+                }
+            }
+        });
+    }
+    replaceDate(opts) {
+        if (!this._elements.length) {
+            console.warn('replaceDate called on destroyed thread row');
+            return;
         }
-        attachmentDiv.classList.add('inboxsdk__thread_row_attachment_icons_present');
-      }
-    });
-  }
-  _fixDateColumnWidth() {
-    (0, _asap.default)(() => {
-      if (!this._elements.length) return;
-      const dateContainer = this._elements[0].querySelector('td.xW, td.yf > div.apm');
-      if (!dateContainer) return;
-      const visibleDateSpan = dateContainer.querySelector('.inboxsdk__thread_row_custom_date') || dateContainer.firstElementChild;
-      if (!visibleDateSpan || !(visibleDateSpan instanceof HTMLElement)) return;
-
-      // Attachment icons are only in the date column in vertical preivew pane.
-      const dateColumnAttachmentIconCount = this._elements[0].querySelectorAll('td.yf > img').length;
-      this._expandColumn('col.xX', visibleDateSpan.offsetWidth + 8 + 2 + 20 + dateColumnAttachmentIconCount * 16);
-    });
-  }
-  replaceDraftLabel(opts) {
-    if (!this._elements.length) {
-      console.warn('replaceDraftLabel called on destroyed thread row');
-      return;
-    }
-    let labelMod;
-    let draftElement, countElement;
-    const prop = (0, _kefirCast.default)(_kefir.default, opts).toProperty();
-    prop.combine(this._getRefresher()).takeUntilBy(this._stopper).onValue(_ref5 => {
-      let [opts] = _ref5;
-      const originalLabel = (0, _querySelectorOrFail.default)(this._elements[0], 'td > div.yW');
-      const recipientsContainer = originalLabel.parentElement;
-      if (!recipientsContainer) throw new Error('Should not happen');
-      if (!opts) {
-        if (labelMod) {
-          labelMod.remove();
-          this._modifications.replacedDraftLabel.claimed.splice(this._modifications.replacedDraftLabel.claimed.indexOf(labelMod), 1);
-          labelMod = null;
+        let dateMod;
+        const prop = kefirCast(Kefir, opts).toProperty();
+        prop
+            .combine(this._getRefresher())
+            .takeUntilBy(this._stopper)
+            .onValue(([opts]) => {
+            const dateContainer = querySelector(this._elements[0], 'td.xW, td.yf > div.apm');
+            const originalDateSpan = dateContainer.firstElementChild;
+            if (!opts) {
+                if (dateMod) {
+                    dateMod.remove();
+                    this._modifications.replacedDate.claimed.splice(this._modifications.replacedDate.claimed.indexOf(dateMod), 1);
+                    dateMod = null;
+                }
+            }
+            else {
+                if (!dateMod) {
+                    dateMod = this._modifications.replacedDate.unclaimed.shift();
+                    if (!dateMod) {
+                        dateMod = {
+                            el: Object.assign(document.createElement('span'), {
+                                className: 'inboxsdk__thread_row_custom_date',
+                            }),
+                            remove() {
+                                this.el.remove();
+                                dateContainer.classList.remove('inboxsdk__thread_row_custom_date_container');
+                            },
+                        };
+                    }
+                    this._modifications.replacedDate.claimed.push(dateMod);
+                }
+                dateMod.el.textContent = opts.text;
+                if (opts.tooltip) {
+                    dateMod.el.setAttribute('data-tooltip', opts.tooltip);
+                    dateMod.el.setAttribute('aria-label', opts.tooltip);
+                }
+                else {
+                    dateMod.el.removeAttribute('data-tooltip');
+                    dateMod.el.removeAttribute('aria-label');
+                }
+                dateMod.el.style.color = opts.textColor || '';
+                if (!includes(dateContainer.children, dateMod.el)) {
+                    dateContainer.insertBefore(dateMod.el, dateContainer.firstChild);
+                    dateContainer.classList.add('inboxsdk__thread_row_custom_date_container');
+                }
+                this._fixDateColumnWidth();
+            }
+        });
+    }
+    getEventStream() {
+        return this._stopper;
+    }
+    getStopper() {
+        return this._stopper;
+    }
+    getSubject() {
+        return this._getSubjectSelector().textContent;
+    }
+    _getSubjectSelector() {
+        return this._elements.length > 1
+            ? querySelector(this._elements[1], 'div.xS div.xT div.y6 > span[id]')
+            : querySelector(this._elements[0], 'td.a4W div.xS div.xT div.y6 > span[id]');
+    }
+    replaceSubject(newSubjectStr) {
+        const subjectEleSelector = this._getSubjectSelector();
+        if (subjectEleSelector) {
+            subjectEleSelector.textContent = newSubjectStr;
         }
-      } else {
-        opts = Object.assign({
-          count: 1
-        }, opts);
-        if (!labelMod) {
-          labelMod = this._modifications.replacedDraftLabel.unclaimed.shift();
-          if (!labelMod) {
-            labelMod = {
-              el: Object.assign(document.createElement('span'), {
-                className: 'inboxsdk__thread_row_custom_draft_label'
-              }),
-              remove() {
-                this.el.remove();
-              }
-            };
-          }
-          this._modifications.replacedDraftLabel.claimed.push(labelMod);
+    }
+    getDateString() {
+        return querySelector(this._elements[0], 'td.xW > span[title]:not(.inboxsdk__thread_row_custom_date), td.yf.apt > div.apm > span[title]:not(.inboxsdk__thread_row_custom_date)').title;
+    }
+    _threadIdReady() {
+        return !!this._getThreadID();
+    }
+    _getThreadID() {
+        if (this._cachedThreadID) {
+            return this._cachedThreadID;
         }
-        const needToAdd = !(0, _includes.default)(recipientsContainer.children, labelMod.el);
-        if (needToAdd || !draftElement) {
-          labelMod.el.innerHTML = originalLabel.innerHTML;
-          const materiaUIlDraftElements = Array.from(labelMod.el.querySelectorAll('.boq'));
-          if (materiaUIlDraftElements.length > 0) {
-            materiaUIlDraftElements.forEach(el => el.remove());
-            draftElement = Object.assign(document.createElement('span'), {
-              className: 'boq'
-            });
-            labelMod.el.appendChild(draftElement);
-          } else {
-            draftElement = labelMod.el.querySelector('font');
-            if (!draftElement) {
-              return;
+        if (this._driver.isUsingSyncAPI()) {
+            const elementWithId = flatten(this._elements.map((el) => Array.from(el.querySelectorAll('[data-thread-id][data-legacy-thread-id]')))).filter(Boolean)[0];
+            if (elementWithId) {
+                this._cachedSyncThreadID = elementWithId
+                    .getAttribute('data-thread-id')
+                    .replace('#', '');
+                this._cachedThreadID = elementWithId
+                    .getAttribute('data-legacy-thread-id')
+                    .replace('#', '');
+                return this._cachedThreadID;
             }
-            const nextSibling = draftElement.nextElementSibling;
-            if (nextSibling) {
-              nextSibling.remove();
+            else {
+                const threadID = this._driver
+                    .getThreadRowIdentifier()
+                    .getThreadIdForThreadRow(this, this._elements);
+                this._cachedSyncThreadID = threadID;
+                if (threadID) {
+                    this._driver
+                        .getOldGmailThreadIdFromSyncThreadId(threadID)
+                        .then((oldGmailThreadID) => {
+                        this._cachedThreadID = oldGmailThreadID;
+                    });
+                }
             }
-          }
-          draftElement.classList.add('inboxsdk__thread_row_custom_draft_part');
-          countElement = Object.assign(document.createElement('span'), {
-            className: 'inboxsdk__thread_row_custom_draft_count'
-          });
-          labelMod.el.appendChild(countElement);
         }
-        draftElement.textContent = opts.text;
-        countElement.textContent = opts.count !== 1 ? ` (${opts.count})` : '';
-        if (needToAdd) {
-          recipientsContainer.insertBefore(labelMod.el, originalLabel);
+        else {
+            this._cachedThreadID = this._driver
+                .getThreadRowIdentifier()
+                .getThreadIdForThreadRow(this, this._elements);
         }
-      }
-    });
-  }
-  replaceDate(opts) {
-    if (!this._elements.length) {
-      console.warn('replaceDate called on destroyed thread row');
-      return;
-    }
-    let dateMod;
-    const prop = (0, _kefirCast.default)(_kefir.default, opts).toProperty();
-    prop.combine(this._getRefresher()).takeUntilBy(this._stopper).onValue(_ref6 => {
-      let [opts] = _ref6;
-      const dateContainer = (0, _querySelectorOrFail.default)(this._elements[0], 'td.xW, td.yf > div.apm');
-      const originalDateSpan = dateContainer.firstElementChild;
-      if (!opts) {
-        if (dateMod) {
-          dateMod.remove();
-          this._modifications.replacedDate.claimed.splice(this._modifications.replacedDate.claimed.indexOf(dateMod), 1);
-          dateMod = null;
+        return this._cachedThreadID;
+    }
+    getThreadID() {
+        const threadID = this._getThreadID();
+        if (!threadID) {
+            throw new Error('Should not happen: thread id was null');
         }
-      } else {
-        if (!dateMod) {
-          dateMod = this._modifications.replacedDate.unclaimed.shift();
-          if (!dateMod) {
-            dateMod = {
-              el: Object.assign(document.createElement('span'), {
-                className: 'inboxsdk__thread_row_custom_date'
-              }),
-              remove() {
-                this.el.remove();
-                dateContainer.classList.remove('inboxsdk__thread_row_custom_date_container');
-              }
-            };
-          }
-          this._modifications.replacedDate.claimed.push(dateMod);
+        return threadID;
+    }
+    getSyncThreadID() {
+        return Promise.resolve(this._cachedSyncThreadID);
+    }
+    async getThreadIDAsync() {
+        return this.getThreadID();
+    }
+    getDraftID() {
+        if (this._cachedSyncDraftIDPromise)
+            return this._cachedSyncDraftIDPromise;
+        if (this._driver.isUsingSyncAPI()) {
+            const elementWithId = flatten(this._elements.map((el) => Array.from(el.querySelectorAll('[data-standalone-draft-id]')))).filter(Boolean)[0];
+            this._cachedSyncDraftIDPromise = Promise.resolve(elementWithId
+                ? elementWithId
+                    .getAttribute('data-standalone-draft-id')
+                    .replace('#msg-a:', '')
+                : null);
         }
-        dateMod.el.textContent = opts.text;
-        if (opts.tooltip) {
-          dateMod.el.setAttribute('data-tooltip', opts.tooltip);
-          dateMod.el.setAttribute('aria-label', opts.tooltip);
-        } else {
-          dateMod.el.removeAttribute('data-tooltip');
-          dateMod.el.removeAttribute('aria-label');
+        else {
+            this._cachedSyncDraftIDPromise = this._driver
+                .getThreadRowIdentifier()
+                .getDraftIdForThreadRow(this);
         }
-        dateMod.el.style.color = opts.textColor || '';
-        if (!(0, _includes.default)(dateContainer.children, dateMod.el)) {
-          dateContainer.insertBefore(dateMod.el, dateContainer.firstChild);
-          dateContainer.classList.add('inboxsdk__thread_row_custom_date_container');
+        return this._cachedSyncDraftIDPromise;
+    }
+    getVisibleDraftCount() {
+        return this.getCounts().draftCount;
+    }
+    getVisibleMessageCount() {
+        return this.getCounts().messageCount;
+    }
+    getContacts() {
+        const senderSpans = this._elements[0].querySelectorAll('[email]');
+        const contacts = Array.from(senderSpans).map((span) => ({
+            emailAddress: span.getAttribute('email'),
+            name: span.getAttribute('name'),
+        }));
+        return uniqBy(contacts, (contact) => contact.emailAddress);
+    }
+    isSelected() {
+        return !!this._elements[0].querySelector('div[role=checkbox][aria-checked=true]');
+    }
+    _getLabelParent() {
+        return this._elements.length > 1
+            ? querySelector(this._elements[this._elements.length === 2 ? 0 : 2], 'div.apu')
+            : querySelector(this._elements[0], 'td.a4W div.xS div.xT');
+    }
+    _getWatchElement() {
+        return this._elements.length === 1
+            ? this._elements[0]
+            : this._elements[0].children[2];
+    }
+    _getRefresher() {
+        // Stream that emits an event after whenever Gmail replaces the ThreadRow DOM
+        // nodes. One time this happens is when you have a new email in your inbox,
+        // you read the email, return to the inbox, get another email, and then the
+        // first email becomes re-rendered.
+        // Important: This stream is only listened on if some modifier method
+        // (like addLabel) is called. If none of those methods are called, then the
+        // stream is not listened on and no MutationObserver ever gets made, saving
+        // us a little bit of work.
+        let refresher = this._refresher;
+        if (!refresher) {
+            refresher = this._refresher = makeMutationObserverChunkedStream(this._getWatchElement(), {
+                childList: true,
+            })
+                .map(() => null)
+                .takeUntilBy(this._stopper)
+                .toProperty(() => null);
         }
-        this._fixDateColumnWidth();
-      }
-    });
-  }
-  getEventStream() {
-    return this._stopper;
-  }
-  getStopper() {
-    return this._stopper;
-  }
-  getSubject() {
-    return this._getSubjectSelector().textContent;
-  }
-  _getSubjectSelector() {
-    return this._elements.length > 1 ? (0, _querySelectorOrFail.default)(this._elements[1], 'div.xS div.xT div.y6 > span[id]') : (0, _querySelectorOrFail.default)(this._elements[0], 'td.a4W div.xS div.xT div.y6 > span[id]');
-  }
-  replaceSubject(newSubjectStr) {
-    const subjectEleSelector = this._getSubjectSelector();
-    if (subjectEleSelector) {
-      subjectEleSelector.textContent = newSubjectStr;
-    }
-  }
-  getDateString() {
-    return (0, _querySelectorOrFail.default)(this._elements[0], 'td.xW > span[title]:not(.inboxsdk__thread_row_custom_date), td.yf.apt > div.apm > span[title]:not(.inboxsdk__thread_row_custom_date)').title;
-  }
-  _threadIdReady() {
-    return !!this._getThreadID();
-  }
-  _getThreadID() {
-    if (this._cachedThreadID) {
-      return this._cachedThreadID;
-    }
-    if (this._driver.isUsingSyncAPI()) {
-      const elementWithId = (0, _flatten.default)(this._elements.map(el => Array.from(el.querySelectorAll('[data-thread-id][data-legacy-thread-id]')))).filter(Boolean)[0];
-      if (elementWithId) {
-        this._cachedSyncThreadID = elementWithId.getAttribute('data-thread-id').replace('#', '');
-        this._cachedThreadID = elementWithId.getAttribute('data-legacy-thread-id').replace('#', '');
-        return this._cachedThreadID;
-      } else {
-        const threadID = this._driver.getThreadRowIdentifier().getThreadIdForThreadRow(this, this._elements);
-        this._cachedSyncThreadID = threadID;
-        if (threadID) {
-          this._driver.getOldGmailThreadIdFromSyncThreadId(threadID).then(oldGmailThreadID => {
-            this._cachedThreadID = oldGmailThreadID;
-          });
+        return refresher;
+    }
+    _getSubjectRefresher() {
+        // emit an event whenever the subject element is swapped out for a new one.
+        let subjectRefresher = this._subjectRefresher;
+        if (!subjectRefresher) {
+            if (this._isVertical) {
+                subjectRefresher = this._subjectRefresher = Kefir.constant(null);
+            }
+            else {
+                const watchElement = this._getWatchElement();
+                const subjectElement = querySelector(watchElement, '.y6');
+                subjectRefresher = this._subjectRefresher =
+                    makeMutationObserverChunkedStream(subjectElement, {
+                        childList: true,
+                    })
+                        .map(() => null)
+                        .takeUntilBy(this._stopper)
+                        .toProperty(() => null);
+            }
         }
-      }
-    } else {
-      this._cachedThreadID = this._driver.getThreadRowIdentifier().getThreadIdForThreadRow(this, this._elements);
-    }
-    return this._cachedThreadID;
-  }
-  getThreadID() {
-    const threadID = this._getThreadID();
-    if (!threadID) {
-      throw new Error('Should not happen: thread id was null');
-    }
-    return threadID;
-  }
-  getSyncThreadID() {
-    return Promise.resolve(this._cachedSyncThreadID);
-  }
-  async getThreadIDAsync() {
-    return this.getThreadID();
-  }
-  getDraftID() {
-    if (this._cachedSyncDraftIDPromise) return this._cachedSyncDraftIDPromise;
-    if (this._driver.isUsingSyncAPI()) {
-      const elementWithId = (0, _flatten.default)(this._elements.map(el => Array.from(el.querySelectorAll('[data-standalone-draft-id]')))).filter(Boolean)[0];
-      this._cachedSyncDraftIDPromise = Promise.resolve(elementWithId ? elementWithId.getAttribute('data-standalone-draft-id').replace('#msg-a:', '') : null);
-    } else {
-      this._cachedSyncDraftIDPromise = this._driver.getThreadRowIdentifier().getDraftIdForThreadRow(this);
-    }
-    return this._cachedSyncDraftIDPromise;
-  }
-  getVisibleDraftCount() {
-    return this.getCounts().draftCount;
-  }
-  getVisibleMessageCount() {
-    return this.getCounts().messageCount;
-  }
-  getContacts() {
-    const senderSpans = this._elements[0].querySelectorAll('[email]');
-    const contacts = Array.from(senderSpans).map(span => ({
-      emailAddress: span.getAttribute('email'),
-      name: span.getAttribute('name')
-    }));
-    return (0, _uniqBy.default)(contacts, contact => contact.emailAddress);
-  }
-  isSelected() {
-    return !!this._elements[0].querySelector('div[role=checkbox][aria-checked=true]');
-  }
-  _getLabelParent() {
-    return this._elements.length > 1 ? (0, _querySelectorOrFail.default)(this._elements[this._elements.length === 2 ? 0 : 2], 'div.apu') : (0, _querySelectorOrFail.default)(this._elements[0], 'td.a4W div.xS div.xT');
-  }
-  _getWatchElement() {
-    return this._elements.length === 1 ? this._elements[0] : this._elements[0].children[2];
-  }
-  _getRefresher() {
-    // Stream that emits an event after whenever Gmail replaces the ThreadRow DOM
-    // nodes. One time this happens is when you have a new email in your inbox,
-    // you read the email, return to the inbox, get another email, and then the
-    // first email becomes re-rendered.
-    // Important: This stream is only listened on if some modifier method
-    // (like addLabel) is called. If none of those methods are called, then the
-    // stream is not listened on and no MutationObserver ever gets made, saving
-    // us a little bit of work.
-    let refresher = this._refresher;
-    if (!refresher) {
-      refresher = this._refresher = (0, _makeMutationObserverChunkedStream.default)(this._getWatchElement(), {
-        childList: true
-      }).map(() => null).takeUntilBy(this._stopper).toProperty(() => null);
-    }
-    return refresher;
-  }
-  _getSubjectRefresher() {
-    // emit an event whenever the subject element is swapped out for a new one.
-    let subjectRefresher = this._subjectRefresher;
-    if (!subjectRefresher) {
-      if (this._isVertical) {
-        subjectRefresher = this._subjectRefresher = _kefir.default.constant(null);
-      } else {
-        const watchElement = this._getWatchElement();
-        const subjectElement = (0, _querySelectorOrFail.default)(watchElement, '.y6');
-        subjectRefresher = this._subjectRefresher = (0, _makeMutationObserverChunkedStream.default)(subjectElement, {
-          childList: true
-        }).map(() => null).takeUntilBy(this._stopper).toProperty(() => null);
-      }
-    }
-    return subjectRefresher;
-  }
-  _getImageContainerRefresher() {
-    let imageRefresher = this._imageRefresher;
-    if (!imageRefresher) {
-      if (this._isVertical) {
-        const containerRow = this._elements.length === 3 ? this._elements[2] : this._elements[0];
-        const classChangeStream = (0, _makeMutationObserverChunkedStream.default)(containerRow, {
-          attributes: true,
-          attributeFilter: ['class']
-        });
-        imageRefresher = this._imageRefresher = classChangeStream.bufferBy(classChangeStream.flatMapLatest(() => (0, _delayAsap.default)())).filter(() => containerRow.querySelectorAll('.inboxsdk__thread_row_icon_wrapper').length > 0 && !containerRow.classList.contains('inboxsdk__thread_row_image_added')).map(() => null).takeUntilBy(this._stopper).toProperty(() => null);
-      } else {
-        imageRefresher = this._imageRefresher = _kefir.default.constant(null);
-      }
+        return subjectRefresher;
+    }
+    _getImageContainerRefresher() {
+        let imageRefresher = this._imageRefresher;
+        if (!imageRefresher) {
+            if (this._isVertical) {
+                const containerRow = this._elements.length === 3 ? this._elements[2] : this._elements[0];
+                const classChangeStream = makeMutationObserverChunkedStream(containerRow, {
+                    attributes: true,
+                    attributeFilter: ['class'],
+                });
+                imageRefresher = this._imageRefresher = classChangeStream
+                    .bufferBy(classChangeStream.flatMapLatest(() => delayAsap()))
+                    .filter(() => containerRow.querySelectorAll('.inboxsdk__thread_row_icon_wrapper').length > 0 &&
+                    !containerRow.classList.contains('inboxsdk__thread_row_image_added'))
+                    .map(() => null)
+                    .takeUntilBy(this._stopper)
+                    .toProperty(() => null);
+            }
+            else {
+                imageRefresher = this._imageRefresher = Kefir.constant(null);
+            }
+        }
+        return imageRefresher;
     }
-    return imageRefresher;
-  }
 }
-var _default = (0, _ud.defn)(module, GmailThreadRowView);
-exports.default = _default;
-function removeAllThreadRowUnclaimedModifications() {
-  // run in a setTimeout so that the thread rows get destroyed
-  // and populate the unclaimed modifications
-  setTimeout(() => {
-    const modifiedRows = document.querySelectorAll('tr[data-inboxsdk-thread-row]');
-    Array.prototype.forEach.call(modifiedRows, row => {
-      const modifications = cachedModificationsByRow.get(row);
-      if (modifications) {
-        _removeThreadRowUnclaimedModifications(modifications);
-      }
-    });
-  }, 15);
+export default GmailThreadRowView;
+export function removeAllThreadRowUnclaimedModifications() {
+    // run in a setTimeout so that the thread rows get destroyed
+    // and populate the unclaimed modifications
+    setTimeout(() => {
+        const modifiedRows = document.querySelectorAll('tr[data-inboxsdk-thread-row]');
+        Array.prototype.forEach.call(modifiedRows, (row) => {
+            const modifications = cachedModificationsByRow.get(row);
+            if (modifications) {
+                _removeThreadRowUnclaimedModifications(modifications);
+            }
+        });
+    }, 15);
 }
 function _removeThreadRowUnclaimedModifications(modifications) {
-  for (let ii = 0; ii < modifications.label.unclaimed.length; ii++) {
-    const mod = modifications.label.unclaimed[ii];
-    //console.log('removing unclaimed label mod', mod);
-    mod.remove();
-  }
-  modifications.label.unclaimed.length = 0;
-  for (let ii = 0; ii < modifications.button.unclaimed.length; ii++) {
-    const mod = modifications.button.unclaimed[ii];
-    //console.log('removing unclaimed button mod', mod);
-    mod.remove();
-  }
-  modifications.button.unclaimed.length = 0;
-  for (let ii = 0; ii < modifications.image.unclaimed.length; ii++) {
-    const mod = modifications.image.unclaimed[ii];
-    //console.log('removing unclaimed image mod', mod);
-    mod.remove();
-  }
-  modifications.image.unclaimed.length = 0;
-  for (let ii = 0; ii < modifications.replacedDate.unclaimed.length; ii++) {
-    const mod = modifications.replacedDate.unclaimed[ii];
-    //console.log('removing unclaimed replacedDate mod', mod);
-    mod.remove();
-  }
-  modifications.replacedDate.unclaimed.length = 0;
-  for (let ii = 0; ii < modifications.replacedDraftLabel.unclaimed.length; ii++) {
-    const mod = modifications.replacedDraftLabel.unclaimed[ii];
-    mod.remove();
-  }
-  modifications.replacedDraftLabel.unclaimed.length = 0;
-}
+    for (let ii = 0; ii < modifications.label.unclaimed.length; ii++) {
+        const mod = modifications.label.unclaimed[ii];
+        //console.log('removing unclaimed label mod', mod);
+        mod.remove();
+    }
+    modifications.label.unclaimed.length = 0;
+    for (let ii = 0; ii < modifications.button.unclaimed.length; ii++) {
+        const mod = modifications.button.unclaimed[ii];
+        //console.log('removing unclaimed button mod', mod);
+        mod.remove();
+    }
+    modifications.button.unclaimed.length = 0;
+    for (let ii = 0; ii < modifications.image.unclaimed.length; ii++) {
+        const mod = modifications.image.unclaimed[ii];
+        //console.log('removing unclaimed image mod', mod);
+        mod.remove();
+    }
+    modifications.image.unclaimed.length = 0;
+    for (let ii = 0; ii < modifications.replacedDate.unclaimed.length; ii++) {
+        const mod = modifications.replacedDate.unclaimed[ii];
+        //console.log('removing unclaimed replacedDate mod', mod);
+        mod.remove();
+    }
+    modifications.replacedDate.unclaimed.length = 0;
+    for (let ii = 0; ii < modifications.replacedDraftLabel.unclaimed.length; ii++) {
+        const mod = modifications.replacedDraftLabel.unclaimed[ii];
+        mod.remove();
+    }
+    modifications.replacedDraftLabel.unclaimed.length = 0;
+}