@inboxsdk/core 0.2.28-alpha.3 → 0.2.28-alpha.4

package/src/injected-js/gmail/sync-compose-request-processor.js

@@ -0,0 +1,110 @@
+/* @flow */
+import intersection from 'lodash/intersection';
+import { SEND_ACTIONS } from './constants';
+export function getDetailsOfComposeRequest(parsed) {
+    const updateList = parsed[2] && parsed[2][1];
+    if (!updateList)
+        return null;
+    const messageUpdates = updateList.filter((update) => {
+        const updateWrapper = update[2] && update[2][2] && (update[2][2][14] || update[2][2][2]);
+        return (updateWrapper &&
+            updateWrapper[1] &&
+            updateWrapper[1][1] &&
+            updateWrapper[1][1].indexOf('msg-a:') > -1);
+    });
+    if (messageUpdates.length) {
+        const sendUpdateMatch = messageUpdates.find((update) => {
+            const updateWrapper = update[2] && update[2][2] && (update[2][2][14] || update[2][2][2]);
+            return (updateWrapper[1][11] &&
+                intersection(updateWrapper[1][11], SEND_ACTIONS).length ===
+                    SEND_ACTIONS.length);
+        });
+        if (sendUpdateMatch) {
+            const sendUpdateWrapper = sendUpdateMatch[2] &&
+                sendUpdateMatch[2][2] &&
+                (sendUpdateMatch[2][2][14] || sendUpdateMatch[2][2][2]);
+            const sendUpdate = sendUpdateWrapper[1];
+            return getComposeRequestFromUpdate(sendUpdate, 'SEND');
+        }
+        else {
+            // There's a small chance that an update list could contain the
+            // draft saves for multiple drafts in some situations — we've never
+            // seen this so currently just picking the first update and assuming
+            // that if there are multiple updates in the request they are for
+            // queued up versions of the same draft.
+            const firstMessageUpdate = messageUpdates[0];
+            const updateWrapper = firstMessageUpdate[2] &&
+                firstMessageUpdate[2][2] &&
+                (firstMessageUpdate[2][2][14] || firstMessageUpdate[2][2][2]);
+            const update = updateWrapper[1];
+            return getComposeRequestFromUpdate(update, 'DRAFT_SAVE');
+        }
+    }
+    else {
+        // the first time a draft is saved it has a different response format
+        const messageUpdates = updateList
+            .map((update) => update[2] &&
+            update[2][2] &&
+            update[2][2][3] &&
+            update[2][2][3][1] &&
+            update[2][2][3][1][5] &&
+            update[2][2][3][1][5][0])
+            .filter(Boolean);
+        if (messageUpdates.length === 0)
+            return null;
+        const firstMessageUpdate = messageUpdates[0];
+        return getComposeRequestFromUpdate(firstMessageUpdate, 'FIRST_DRAFT_SAVE');
+    }
+}
+function getComposeRequestFromUpdate(update, type) {
+    const body = update[9] && update[9][2] && update[9][2][0] && update[9][2][0][2];
+    if (body == null)
+        return null;
+    return {
+        body,
+        type,
+        to: parseContacts(update[3]),
+        cc: parseContacts(update[4]),
+        bcc: parseContacts(update[5]),
+        draftID: update[1].replace('msg-a:', ''),
+        subject: update[8],
+    };
+}
+function parseContacts(contacts) {
+    if (!Array.isArray(contacts)) {
+        // exit cuz cannot parse
+        return null;
+    }
+    return contacts.map((c) => ({ emailAddress: c[2], name: c[3] || null }));
+}
+export function replaceEmailBodyForSendRequest(request, newBody) {
+    if (!newBody)
+        return request;
+    const parsed = JSON.parse(request);
+    const updateList = parsed[2] && parsed[2][1];
+    if (!updateList)
+        return request;
+    const messageUpdates = updateList.filter((update) => {
+        const updateWrapper = update[2] && update[2][2] && (update[2][2][14] || update[2][2][2]);
+        return (updateWrapper &&
+            updateWrapper[1] &&
+            updateWrapper[1][1] &&
+            updateWrapper[1][1].indexOf('msg-a:') > -1);
+    });
+    if (!messageUpdates.length)
+        return request;
+    const sendUpdateMatch = messageUpdates.find((update) => {
+        const updateWrapper = update[2] && update[2][2] && (update[2][2][14] || update[2][2][2]);
+        return (updateWrapper[1][11] &&
+            intersection(updateWrapper[1][11], SEND_ACTIONS).length ===
+                SEND_ACTIONS.length);
+    });
+    if (!sendUpdateMatch)
+        return request;
+    const sendUpdateWrapper = sendUpdateMatch[2] &&
+        sendUpdateMatch[2][2] &&
+        (sendUpdateMatch[2][2][14] || sendUpdateMatch[2][2][2]);
+    const sendUpdate = sendUpdateWrapper[1];
+    sendUpdate[9][2][0][2] = newBody;
+    return JSON.stringify(parsed);
+}

package/src/injected-js/injected-logger.js

@@ -0,0 +1,50 @@
+export function error(err, details) {
+    if (!err) {
+        err = new Error('No error given');
+    }
+    console.error('Error in injected script', err, details); //eslint-disable-line no-console
+    try {
+        JSON.stringify(details);
+    }
+    catch (e) {
+        details = '<failed to jsonify>';
+    }
+    const errorProperties = {};
+    for (const name in err) {
+        if (Object.prototype.hasOwnProperty.call(err, name)) {
+            try {
+                const value = err[name];
+                JSON.stringify(value);
+                errorProperties[name] = value;
+            }
+            catch (err) {
+                // ignore
+            }
+        }
+    }
+    if (Object.keys(errorProperties).length > 0) {
+        details = { errorProperties, details };
+    }
+    document.dispatchEvent(new CustomEvent('inboxSDKinjectedError', {
+        bubbles: false,
+        cancelable: false,
+        detail: {
+            message: err && err.message,
+            stack: err && err.stack,
+            details,
+        },
+    }));
+}
+export function eventSdkPassive(name, details, sensitive) {
+    try {
+        JSON.stringify(details);
+    }
+    catch (e) {
+        details = '<failed to jsonify>';
+    }
+    document.dispatchEvent(new CustomEvent('inboxSDKinjectedEventSdkPassive', {
+        bubbles: false,
+        cancelable: false,
+        detail: { name, details, sensitive },
+    }));
+}

package/src/injected-js/setupCustomViewEventAssassin.js

@@ -0,0 +1,90 @@
+import { defn } from 'ud';
+import includes from 'lodash/includes';
+import closest from 'closest-ng';
+import * as logger from './injected-logger';
+function md(value) {
+    return { value, configurable: true };
+}
+// These are basically all the keys that trigger some action in thread list
+// views and thread views that we don't want to be triggerable while a custom
+// view is open. Key combos which affect things still visible on the screen or
+// navigate to a new view are still allowed.
+const blockedAnyModKeys = [
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'PageUp',
+    'PageDown',
+    'Home',
+    'End',
+    'Enter',
+];
+// These are only necessary for Safari
+const blockedKeyIdentifiers = ['Left', 'Right', 'Up', 'Down'];
+const blockedAnyModCharacters = '!#[]{}_+=-;:\r\n1234567890`~';
+const blockedNoModCharacters = ',xsyemrafz.ujkpnl';
+const blockedShiftCharacters = 'parfniut';
+function shouldBlockEvent(event) {
+    if (!document.body.classList.contains('inboxsdk__custom_view_active')) {
+        return false;
+    }
+    const target = event.target;
+    const key = event.key || /* safari*/ String.fromCharCode(event.which || event.keyCode);
+    // Block all escape key presses inside a custom view, even when an input
+    // is focused.
+    if (event.key === 'Escape' && closest(target, '.inboxsdk__custom_view')) {
+        return true;
+    }
+    if (includes(blockedAnyModKeys, key) ||
+        /* safari */ includes(blockedKeyIdentifiers, event.keyIdentifier) ||
+        includes(blockedAnyModCharacters, key) ||
+        (!event.shiftKey &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey &&
+            includes(blockedNoModCharacters, key)) ||
+        (event.shiftKey &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            !event.altKey &&
+            includes(blockedShiftCharacters, key.toLowerCase()))) {
+        if (
+        // Gmail already ignores events originating in these elements even if
+        // they were made by an extension.
+        closest(target, 'input, textarea, button, [contenteditable]') ||
+            // Gmail ignores events originating in its own interactive elements
+            // which tend to have certain role attributes.
+            (!closest(target, '.inboxsdk__custom_view') &&
+                closest(target, '[role=button], [role=link]'))) {
+            return false;
+        }
+        return true;
+    }
+    return false;
+}
+const handler = defn(module, function (event) {
+    try {
+        // If the key is in a blacklist and it originated while a custom view is
+        // present, then maim the event object before Gmail or Inbox sees it.
+        if (shouldBlockEvent(event)) {
+            Object.defineProperties(event, {
+                altKey: md(false),
+                ctrlKey: md(false),
+                shiftKey: md(false),
+                metaKey: md(false),
+                charCode: md(92),
+                code: md('Backslash'),
+                key: md('\\'),
+                keyCode: md(92),
+                which: md(92),
+            });
+        }
+    }
+    catch (err) {
+        logger.error(err);
+    }
+});
+export default function setupCustomViewEventAssassin() {
+    document.addEventListener('keydown', handler, true);
+}

package/src/platform-implementation-js/constants/nav-item-types.js

@@ -0,0 +1,19 @@
+/**
+ * The different nav item types that exist
+ */
+const navItemTypes = Object.freeze({
+    /**
+     * standard nav item for navigating
+     */
+    NAVIGATION: 'NAVIGATION',
+    /**
+     * nav item that looks like a link
+     */
+    LINK: 'LINK',
+    // nav item for logical grouping. In Gmailv2, the entire nav item can be clicked to expand/collapse its children and it ignores all NavItemDescriptor options other than `name` and `subtitle`.
+    // Behaves identically to NAVIGATION when in Gmailv1.
+    GROUPER: 'GROUPER',
+    // Old alias for LINK
+    MANAGE: 'MANAGE',
+});
+export default navItemTypes;

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-app-menu-item.js

@@ -0,0 +1,21 @@
+import { GmailAppMenuItemView } from '../views/gmail-app-menu-item-view';
+import GmailElementGetter from '../gmail-element-getter';
+import Logger from '../../../lib/logger';
+export async function addAppMenuItem(driver, menuItemDescriptor) {
+    const appMenuInjectionContainer = await GmailElementGetter.getAppMenuAsync();
+    const gmailAppMenuItemView = new GmailAppMenuItemView(driver);
+    gmailAppMenuItemView.setMenuItemDescriptor(menuItemDescriptor);
+    try {
+        if (!appMenuInjectionContainer || !gmailAppMenuItemView.element)
+            return;
+        const siblingElement = menuItemDescriptor.insertIndex
+            ? appMenuInjectionContainer.childNodes[menuItemDescriptor.insertIndex] ??
+                null
+            : null;
+        appMenuInjectionContainer.insertBefore(gmailAppMenuItemView.element, siblingElement);
+    }
+    catch (err) {
+        Logger.error(err);
+    }
+    return gmailAppMenuItemView;
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-collapsible-panel.js

@@ -0,0 +1,28 @@
+import once from 'lodash/once';
+import GmailElementGetter from '../gmail-element-getter';
+import waitFor from '../../../lib/wait-for';
+import Logger from '../../../lib/logger';
+import { CollapsiblePanelView } from '../../../views/collapsible-panel-view';
+export async function addCollapsiblePanel(driver, panelDescriptor) {
+    const injectionContainer = await waitForAppMenuParentReady();
+    const collapsiblePanelView = new CollapsiblePanelView(driver);
+    collapsiblePanelView.panelDescriptor = panelDescriptor;
+    if (!injectionContainer || !collapsiblePanelView.element)
+        return;
+    const appMenu = await GmailElementGetter.getAppMenuAsync();
+    if (!appMenu)
+        return;
+    appMenu.insertAdjacentElement('afterend', collapsiblePanelView.element);
+    return collapsiblePanelView;
+}
+const waitForAppMenuParentReady = once(async () => {
+    if (!GmailElementGetter.isStandalone()) {
+        try {
+            const menuParentElement = await waitFor(() => GmailElementGetter.getAppMenuContainer());
+            return menuParentElement;
+        }
+        catch (e) {
+            Logger.error(e);
+        }
+    }
+});

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-nav-item.js

@@ -0,0 +1,98 @@
+import GmailElementGetter from '../gmail-element-getter';
+import GmailNavItemView from '../views/gmail-nav-item-view';
+import Logger from '../../../lib/logger';
+import waitFor from '../../../lib/wait-for';
+import insertElementInOrder from '../../../lib/dom/insert-element-in-order';
+import makeMutationObserverStream from '../../../lib/dom/make-mutation-observer-stream';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import once from 'lodash/once';
+export default async function addNavItem(driver, orderGroup, navItemDescriptor, navMenuInjectionContainer) {
+    await waitForMenuReady();
+    const gmailNavItemView = new GmailNavItemView(driver, orderGroup, 1);
+    gmailNavItemView.setNavItemDescriptor(navItemDescriptor);
+    if (!GmailElementGetter.isStandalone()) {
+        try {
+            const attacher = _attachNavItemView(gmailNavItemView, navMenuInjectionContainer);
+            attacher();
+            gmailNavItemView
+                .getEventStream()
+                .filter((event) => event.eventName === 'orderChanged')
+                .onValue(attacher);
+        }
+        catch (err) {
+            Logger.error(err);
+        }
+    }
+    return gmailNavItemView;
+}
+export const waitForMenuReady = once(async () => {
+    const appMenu = await GmailElementGetter.getAppMenuAsync();
+    if (!appMenu) {
+        await waitForNavMenuReady();
+    }
+});
+const waitForNavMenuReady = once(async () => {
+    if (!GmailElementGetter.isStandalone()) {
+        await GmailElementGetter.waitForGmailModeToSettle();
+        await waitFor(() => document.querySelector('.aeN[role=navigation], .aeN [role=navigation]'));
+        // Wait for contents of navmenu to load (needed to figure out if it's integrated gmail mode)
+        await waitFor(() => document.querySelector('.Ls77Lb.aZ6 > .pp'));
+    }
+});
+function _attachNavItemView(gmailNavItemView, navMenuInjectionContainer) {
+    if (navMenuInjectionContainer) {
+        return () => {
+            insertElementInOrder(navMenuInjectionContainer, gmailNavItemView.getElement());
+        };
+    }
+    if (!GmailElementGetter.shouldAddNavItemsInline()) {
+        // If we're in the modern (non-classic-hangouts) leftnav, then put
+        // the added nav items in a floating section at the bottom separate
+        // from the Mail section.
+        return function () {
+            const navMenuInjectionContainer = GmailElementGetter.getSeparateSectionNavItemMenuInjectionContainer();
+            if (!navMenuInjectionContainer) {
+                throw new Error('should not happen');
+            }
+            const nonMailLeftNavSections = Array.from(document.querySelectorAll('.Xa.wT:not([data-group-order-hint])')).slice(1);
+            nonMailLeftNavSections.forEach((div) => {
+                div.dataset.groupOrderHint = 'zz_gmail';
+            });
+            insertElementInOrder(navMenuInjectionContainer, gmailNavItemView.getElement());
+        };
+    }
+    else {
+        // If we're in the old classic-hangouts-compatible leftnav, then
+        // inject our added nav items among Gmail's own nav items.
+        return function () {
+            insertElementInOrder(_getNavItemsHolder(), gmailNavItemView.getElement());
+        };
+    }
+}
+function _getNavItemsHolder() {
+    const holder = document.querySelector('.inboxsdk__navMenu');
+    if (!holder) {
+        return _createNavItemsHolder();
+    }
+    else {
+        return querySelector(holder, '.TK');
+    }
+}
+function _createNavItemsHolder() {
+    const holder = document.createElement('div');
+    holder.setAttribute('class', 'LrBjie inboxsdk__navMenu');
+    holder.innerHTML = '<div class="TK"></div>';
+    const navMenuInjectionContainer = GmailElementGetter.getSameSectionNavItemMenuInjectionContainer();
+    if (!navMenuInjectionContainer)
+        throw new Error('should not happen');
+    navMenuInjectionContainer.insertBefore(holder, navMenuInjectionContainer.children[2]);
+    makeMutationObserverStream(holder, {
+        attributes: true,
+        attributeFilter: ['class'],
+    }).onValue(function () {
+        if (holder.classList.contains('TA')) {
+            holder.classList.remove('TA');
+        }
+    });
+    return querySelector(holder, '.TK');
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/add-support-item.js

@@ -0,0 +1,4 @@
+import GmailSupportItemView from '../views/gmail-support-item-view';
+export default function addSupportItem(driver, supportItemDescriptor) {
+    return new GmailSupportItemView(driver, supportItemDescriptor);
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/encodeDraftUrlId.js

@@ -0,0 +1,8 @@
+import { convertBase } from '@macil/simple-base-converter';
+const B64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+const GMAIL_ALPHABET = 'BCDFGHJKLMNPQRSTVWXZbcdfghjklmnpqrstvwxz';
+export default function encodeDraftUrlId(syncThreadId, syncMessageId) {
+    const raw = `${syncThreadId.replace(/^thread-/, '')}+${syncMessageId}`;
+    const b64 = Buffer.from(raw).toString('base64').replace(/=/g, '');
+    return convertBase(b64, B64_ALPHABET, GMAIL_ALPHABET);
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/get-rfc-message-id-for-gmail-message-id.js

@@ -0,0 +1,12 @@
+import getOriginalMessagePage from '../../../driver-common/getOriginalMessagePage';
+import htmlToText from '../../../../common/html-to-text';
+export default async function getRfcMessageIdForGmailMessageId(driver, gmailMessageId) {
+    const text = await getOriginalMessagePage(driver, {
+        oldGmailMessageID: gmailMessageId,
+    });
+    const match = text.match(/^Message-ID:\s+(\S+)\s*$/im);
+    if (!match) {
+        throw new Error("Failed to find rfc id for gmail thread id. Message may not exist in user's account.");
+    }
+    return htmlToText(match[1]);
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/get-rfc-message-id-for-gmail-thread-id.js

@@ -0,0 +1,33 @@
+import gmailAjax from '../../../driver-common/gmailAjax';
+import querystring from 'querystring';
+import * as GmailResponseProcessor from '../gmail-response-processor';
+import getRfcMessageIdForGmailMessageId from './get-rfc-message-id-for-gmail-message-id';
+export default async function getRfcMessageIdForGmailThreadId(driver, gmailThreadId) {
+    const messageIdQuery = {
+        ui: 2,
+        ik: driver.getPageCommunicator().getIkValue(),
+        view: 'cv',
+        th: gmailThreadId,
+        nsc: 1,
+        mb: 0,
+        rt: 'j',
+        search: 'all',
+    };
+    const gmailMessageIdResponse = await gmailAjax({
+        method: 'POST',
+        url: document.location.origin +
+            document.location.pathname +
+            '?' +
+            querystring.stringify(messageIdQuery),
+        canRetry: true,
+    });
+    const extractedIds = GmailResponseProcessor.extractMessageIdsFromThreadBatchRequest(gmailMessageIdResponse.text);
+    if (Object.keys(extractedIds).length !== 1) {
+        throw new Error(`Expected to find 1 thread/message ID pair, but got ${Object.keys(extractedIds).length}`);
+    }
+    const gmailMessageId = extractedIds[gmailThreadId];
+    if (!gmailMessageId) {
+        throw new Error('Could not find a message ID for given thread ID');
+    }
+    return getRfcMessageIdForGmailMessageId(driver, gmailMessageId);
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/isIntegratedViewGmail.js

@@ -0,0 +1,4 @@
+export default function isIntegratedViewGmail() {
+    const nav = document.querySelector('div[role=navigation]');
+    return Boolean(nav?.firstElementChild?.classList.contains('Xa'));
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/open-draft-by-message-id.js

@@ -0,0 +1,44 @@
+import qs from 'querystring';
+import getSyncThreadsForSearch from '../../../driver-common/getSyncThreadsForSearch';
+import encodeDraftUrlId from './encodeDraftUrlId';
+import getRfcMessageIdForGmailMessageId from './get-rfc-message-id-for-gmail-message-id';
+export default async function openDraftByMessageID(driver, messageID) {
+    let newHash;
+    if (driver.isUsingSyncAPI()) {
+        const rfcMessageID = await getRfcMessageIdForGmailMessageId(driver, messageID);
+        const { threads } = await getSyncThreadsForSearch(driver, 'rfc822msgid:' + rfcMessageID);
+        if (threads.length === 0) {
+            throw new Error('Failed to get sync message id');
+        }
+        const thread = threads[0];
+        const syncMessageData = thread.extraMetaData.syncMessageData.find((m) => m.oldMessageID === messageID);
+        if (!syncMessageData) {
+            throw new Error('Failed to find syncMessageData');
+        }
+        const { syncMessageID } = syncMessageData;
+        newHash = makeNewSyncHash(window.location.hash, thread.syncThreadID, syncMessageID);
+    }
+    else {
+        newHash = makeNewHash(window.location.hash, messageID);
+    }
+    window.location.hash = newHash;
+}
+export function makeNewHash(oldHash, messageID) {
+    oldHash = '#' + oldHash.replace(/^#/, '');
+    const [pre, query] = oldHash.split('?');
+    const params = qs.parse(query);
+    if (params.compose) {
+        params.compose += ',' + messageID;
+    }
+    else {
+        params.compose = messageID;
+    }
+    return pre + '?' + qs.stringify(params);
+}
+export function makeNewSyncHash(oldHash, syncThreadID, syncMessageID) {
+    oldHash = '#' + oldHash.replace(/^#/, '');
+    const [pre, query] = oldHash.split('?');
+    const params = qs.parse(query);
+    params.compose = encodeDraftUrlId(syncThreadID, syncMessageID);
+    return pre + '?' + qs.stringify(params);
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-driver/track-gmail-styles.js

@@ -0,0 +1,95 @@
+import Logger from '../../../lib/logger';
+import waitFor from '../../../lib/wait-for';
+import GmailElementGetter from '../gmail-element-getter';
+const RGB_REGEX = /^rgb\s*\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)/;
+function getDensity() {
+    // get the padding amount on the left-nav-menu entries to find the active
+    // density setting value.
+    const navItemOuter = document.querySelector('.TO .TN');
+    if (!navItemOuter) {
+        Logger.error(new Error('Failed to find nav item outer element'));
+        return 'compact';
+    }
+    const padding = parseInt(getComputedStyle(navItemOuter).getPropertyValue('padding-top'), 10);
+    if (padding >= 6) {
+        return 'comfortable';
+    }
+    else if (padding >= 3) {
+        return 'cozy';
+    }
+    else {
+        return 'compact';
+    }
+}
+function isDarkTheme() {
+    // get the color of the left-nav-menu entries to determine whether Gmail is
+    // in dark theme mode.
+    const navItem = document.querySelector('.aio');
+    if (!navItem) {
+        Logger.error(new Error('Failed to find nav item'));
+        return false;
+    }
+    const colorString = getComputedStyle(navItem).getPropertyValue('color');
+    const colorMatch = RGB_REGEX.exec(colorString);
+    if (!colorMatch) {
+        Logger.error(new Error('Failed to read color string'), { colorString });
+        return false;
+    }
+    const r = +colorMatch[1], g = +colorMatch[2], b = +colorMatch[3];
+    // rgb(32, 33, 36) is the default color of nav items in Material Gmail
+    if (r === 32 && g === 33 && b === 36) {
+        return false;
+    }
+    if (r !== g || r !== b) {
+        Logger.error(new Error('Nav item color not grayscale'), { r, g, b });
+    }
+    return r > 128;
+}
+export default function trackGmailStyles() {
+    if (document.head.hasAttribute('data-inboxsdk-gmail-style-tracker') ||
+        GmailElementGetter.isStandalone()) {
+        return;
+    }
+    document.head.setAttribute('data-inboxsdk-gmail-style-tracker', 'true');
+    let currentDensity = null;
+    let currentDarkTheme = null;
+    function checkStyles() {
+        const newDensity = getDensity();
+        if (currentDensity !== newDensity) {
+            if (currentDensity) {
+                document.body.classList.remove('inboxsdk__gmail_density_' + currentDensity);
+            }
+            currentDensity = newDensity;
+            document.body.classList.add('inboxsdk__gmail_density_' + currentDensity);
+        }
+        const newDarkTheme = isDarkTheme();
+        if (currentDarkTheme !== newDarkTheme) {
+            currentDarkTheme = newDarkTheme;
+            if (currentDarkTheme) {
+                document.body.classList.add('inboxsdk__gmail_dark_theme');
+            }
+            else {
+                document.body.classList.remove('inboxsdk__gmail_dark_theme');
+            }
+        }
+    }
+    waitFor(() => document.querySelector('.TO .TN') && document.querySelector('.aio'))
+        .then(() => {
+        // Gmail changes an inline <style> sheet when the display density changes.
+        // Watch for changes to all <style> elements.
+        const observer = new MutationObserver(checkStyles);
+        const options = {
+            characterData: true,
+            childList: true,
+        };
+        Array.from(document.styleSheets).forEach((sheet) => {
+            if (sheet.ownerNode.tagName == 'STYLE') {
+                observer.observe(sheet.ownerNode, options);
+            }
+        });
+        checkStyles();
+    })
+        .catch((err) => {
+        Logger.error(err);
+    });
+}

package/src/platform-implementation-js/dom-driver/gmail/gmail-element-getter/get-main-content-element-changed-stream.js

@@ -0,0 +1,38 @@
+import last from 'lodash/last';
+import * as Kefir from 'kefir';
+import streamWaitFor from '../../../lib/stream-wait-for';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import makeElementChildStream from '../../../lib/dom/make-element-child-stream';
+export default function getMainContentElementChangedStream(GmailElementGetter) {
+    const s = waitForMainContentContainer(GmailElementGetter)
+        .flatMap((mainContentContainer) => makeElementChildStream(mainContentContainer)
+        .filter(({ el }) => el.classList.contains('nH'))
+        .flatMap(({ el, removalStream }) => makeMutationObserverChunkedStream(el, {
+        attributes: true,
+        attributeFilter: ['style'],
+    })
+        .map((x) => last(x))
+        .toProperty(() => {
+        return { target: el };
+    })
+        .filter(_isNowVisible)
+        .map((e) => e.target)
+        .takeUntilBy(removalStream)))
+        .toProperty();
+    // Make sure we always have a subscriber. The function breaks if it loses all
+    // subscribers and then re-gains some.
+    s.onValue(() => {
+        // ignore, just activate
+    });
+    return s;
+}
+function waitForMainContentContainer(GmailElementGetter) {
+    if (GmailElementGetter.isStandaloneComposeWindow()) {
+        return Kefir.never();
+    }
+    return streamWaitFor(() => GmailElementGetter.getMainContentContainer());
+}
+function _isNowVisible(mutation) {
+    const el = mutation.target;
+    return el.style.display !== 'none';
+}