stylus/content/style-injector.js

'use strict';

self.createStyleInjector = self.INJECTED === 1 ? self.createStyleInjector : ({
  compare,
  onUpdate = () => {},
}) => {
  const PREFIX = 'stylus-';
  const PATCH_ID = 'transition-patch';
  // styles are out of order if any of these elements is injected between them
  const ORDERED_TAGS = new Set(['head', 'body', 'frameset', 'style', 'link']);
  const IS_OWN_PAGE = Boolean(chrome.tabs);
  // detect Chrome 65 via a feature it added since browser version can be spoofed
  const isChromePre65 = chrome.app && typeof Worklet !== 'function';
  const docRewriteObserver = RewriteObserver(_sort);
  const docRootObserver = RootObserver(_sortIfNeeded);
  const list = [];
  const table = new Map();
  let isEnabled = true;
  let isTransitionPatched;
  // will store the original method refs because the page can override them
  let creationDoc, createElement, createElementNS;
  return {
    apply,
    clear,
    clearOrphans,
    remove,
    replace,
    toggle,
    list,
  };

  function apply(styleMap) {
    const styles = _styleMapToArray(styleMap);
    return !styles.length ?
      Promise.resolve([]) :
      docRootObserver.evade(() => {
        if (!isTransitionPatched) _applyTransitionPatch(styles);
        const els = styles.map(_apply);
        _emitUpdate();
        return els;
      });
  }

  function clear() {
    for (const style of list) {
      style.el.remove();
    }
    list.length = 0;
    table.clear();
    _emitUpdate();
  }

  function clearOrphans() {
    for (const el of document.querySelectorAll(`style[id^="${PREFIX}"].stylus`)) {
      const id = el.id.slice(PREFIX.length);
      if (/^\d+$/.test(id) || id === PATCH_ID) {
        el.remove();
      }
    }
  }

  function remove(id) {
    _remove(id);
    _emitUpdate();
  }

  function replace(styleMap) {
    const styles = _styleMapToArray(styleMap);
    const added = new Set(styles.map(s => s.id));
    const removed = [];
    for (const style of list) {
      if (!added.has(style.id)) {
        removed.push(style.id);
      }
    }
    styles.forEach(_apply);
    removed.forEach(_remove);
    _emitUpdate();
  }

  function toggle(_enabled) {
    if (isEnabled === _enabled) return;
    isEnabled = _enabled;
    for (const style of list) {
      style.el.disabled = !isEnabled;
    }
  }

  function _add(style) {
    const el = style.el = _createStyle(style.id, style.code);
    table.set(style.id, style);
    const nextIndex = list.findIndex(i => compare(i, style) > 0);
    if (nextIndex < 0) {
      document.documentElement.appendChild(el);
      list.push(style);
    } else {
      document.documentElement.insertBefore(el, list[nextIndex].el);
      list.splice(nextIndex, 0, style);
    }
    // moving an element resets its 'disabled' state
    el.disabled = !isEnabled;
    return el;
  }

  function _apply(style) {
    return table.has(style.id) ? _update(style) : _add(style);
  }

  function _applyTransitionPatch(styles) {
    // CSS transition bug workaround: since we insert styles asynchronously,
    // the browsers, especially Firefox, may apply all transitions on page load
    isTransitionPatched = document.readyState === 'complete';
    if (isTransitionPatched || !styles.some(s => s.code.includes('transition'))) {
      return;
    }
    const el = _createStyle(PATCH_ID, `
      :root:not(#\\0):not(#\\0) * {
        transition: none !important;
      }
    `);
    document.documentElement.appendChild(el);
    // wait for the next paint to complete
    // note: requestAnimationFrame won't fire in inactive tabs
    requestAnimationFrame(() => setTimeout(() => el.remove()));
  }

  function _createStyle(id, code = '') {
    if (!creationDoc) _initCreationDoc();
    let el;
    if (document.documentElement instanceof SVGSVGElement) {
      // SVG document style
      el = createElementNS.call(creationDoc, 'http://www.w3.org/2000/svg', 'style');
    } else if (document instanceof XMLDocument) {
      // XML document style
      el = createElementNS.call(creationDoc, 'http://www.w3.org/1999/xhtml', 'style');
    } else {
      // HTML document style; also works on HTML-embedded SVG
      el = createElement.call(creationDoc, 'style');
    }
    if (id) {
      el.id = `${PREFIX}${id}`;
      const oldEl = document.getElementById(el.id);
      if (oldEl) oldEl.id += '-superseded-by-Stylus';
    }
    el.type = 'text/css';
    // SVG className is not a string, but an instance of SVGAnimatedString
    el.classList.add('stylus');
    el.textContent = code;
    return el;
  }

  function _emitUpdate() {
    if (!IS_OWN_PAGE && list.length) {
      docRewriteObserver.start();
      docRootObserver.start();
    } else {
      docRewriteObserver.stop();
      docRootObserver.stop();
    }
    onUpdate();
  }

  /*
  FF59+ workaround: allow the page to read our sheets, https://github.com/openstyles/stylus/issues/461
  First we're trying the page context document where inline styles may be forbidden by CSP
  https://bugzilla.mozilla.org/show_bug.cgi?id=1579345#c3
  and since userAgent.navigator can be spoofed via about:config or devtools,
  we're checking for getPreventDefault that was removed in FF59
  */
  function _initCreationDoc() {
    creationDoc = !Event.prototype.getPreventDefault && document.wrappedJSObject;
    if (creationDoc) {
      ({createElement, createElementNS} = creationDoc);
      const el = document.documentElement.appendChild(_createStyle());
      const isApplied = el.sheet;
      el.remove();
      if (isApplied) return;
    }
    creationDoc = document;
    ({createElement, createElementNS} = document);
  }

  function _remove(id) {
    const style = table.get(id);
    if (!style) return;
    table.delete(id);
    list.splice(list.indexOf(style), 1);
    style.el.remove();
  }

  function _sort() {
    docRootObserver.evade(() => {
      list.sort(compare);
      for (const style of list) {
        // moving an element resets its 'disabled' state
        document.documentElement.appendChild(style.el);
        style.el.disabled = !isEnabled;
      }
    });
  }

  function _sortIfNeeded() {
    let needsSort;
    let el = list.length && list[0].el;
    if (!el) {
      needsSort = false;
    } else if (el.parentNode !== creationDoc.documentElement) {
      needsSort = true;
    } else {
      let i = 0;
      while (el) {
        if (i < list.length && el === list[i].el) {
          i++;
        } else if (ORDERED_TAGS.has(el.localName)) {
          needsSort = true;
          break;
        }
        el = el.nextElementSibling;
      }
      // some styles are not injected to the document
      if (i < list.length) needsSort = true;
    }
    if (needsSort) _sort();
    return needsSort;
  }

  function _styleMapToArray(styleMap) {
    return Object.values(styleMap).map(s => ({
      id: s.id,
      code: s.code.join(''),
    }));
  }

  function _update({id, code}) {
    const style = table.get(id);
    if (style.code === code) return;
    style.code = code;
    // workaround for Chrome devtools bug fixed in v65
    if (isChromePre65) {
      const oldEl = style.el;
      style.el = _createStyle(id, code);
      oldEl.parentNode.insertBefore(style.el, oldEl.nextSibling);
      oldEl.remove();
    } else {
      style.el.textContent = code;
    }
    // https://github.com/openstyles/stylus/issues/693
    style.el.disabled = !isEnabled;
  }

  function RewriteObserver(onChange) {
    // detect documentElement being rewritten from inside the script
    let root;
    let observing = false;
    let timer;
    const observer = new MutationObserver(_check);
    return {start, stop};

    function start() {
      if (observing) return;
      // detect dynamic iframes rewritten after creation by the embedder i.e. externally
      root = document.documentElement;
      timer = setTimeout(_check);
      observer.observe(document, {childList: true});
      observing = true;
    }

    function stop() {
      if (!observing) return;
      clearTimeout(timer);
      observer.disconnect();
      observing = false;
    }

    function _check() {
      if (root !== document.documentElement) {
        root = document.documentElement;
        onChange();
      }
    }
  }

  function RootObserver(onChange) {
    let digest = 0;
    let lastCalledTime = NaN;
    let observing = false;
    const observer = new MutationObserver(() => {
      if (digest) {
        if (performance.now() - lastCalledTime > 1000) {
          digest = 0;
        } else if (digest > 5) {
          throw new Error('The page keeps generating mutations. Skip the event.');
        }
      }
      if (onChange()) {
        digest++;
        lastCalledTime = performance.now();
      }
    });
    return {evade, start, stop};

    function evade(fn) {
      const restore = observing && start;
      stop();
      return new Promise(resolve => _run(fn, resolve, _waitForRoot))
        .then(restore);
    }

    function start() {
      if (observing) return;
      observer.observe(document.documentElement, {childList: true});
      observing = true;
    }

    function stop() {
      if (!observing) return;
      // FIXME: do we need this?
      observer.takeRecords();
      observer.disconnect();
      observing = false;
    }

    function _run(fn, resolve, wait) {
      if (document.documentElement) {
        resolve(fn());
        return true;
      }
      if (wait) wait(fn, resolve);
    }

    function _waitForRoot(...args) {
      new MutationObserver((_, observer) => _run(...args) && observer.disconnect())
        .observe(document, {childList: true});
    }
  }
};