stylus/background/storage.js

/* global getStyleWithNoCode styleSectionsEqual */
'use strict';

const RX_NAMESPACE = /\s*(@namespace\s+(?:\S+\s+)?url\(http:\/\/.*?\);)\s*/g;
const RX_CHARSET = /\s*@charset\s+(['"]).*?\1\s*;\s*/g;
const RX_CSS_COMMENTS = /\/\*[\s\S]*?(?:\*\/|$)/g;
// eslint-disable-next-line no-var
var SLOPPY_REGEXP_PREFIX = '\0';

// CSS transition bug workaround: since we insert styles asynchronously,
// the browsers, especially Firefox, may apply all transitions on page load
const CSS_TRANSITION_SUPPRESSOR = '* { transition: none !important; }';
const RX_CSS_TRANSITION_DETECTOR = /([\s\n;/{]|-webkit-|-moz-)transition[\s\n]*:[\s\n]*(?!none)/;

// Note, only 'var'-declared variables are visible from another extension page
// eslint-disable-next-line no-var
var cachedStyles = {
  list: null,            // array of all styles
  byId: new Map(),       // all styles indexed by id
  filters: new Map(),    // filterStyles() parameters mapped to the returned results, 10k max
  regexps: new Map(),    // compiled style regexps
  exclusions: new Map(), // compiled exclusion regexps
  urlDomains: new Map(), // getDomain() results for 100 last checked urls
  needTransitionPatch: new Map(), // FF bug workaround
  mutex: {
    inProgress: true,    // while getStyles() is reading IndexedDB all subsequent calls
                         // (initially 'true' to prevent rogue getStyles before dbExec.initialized)
    onDone: [],          // to getStyles() are queued and resolved when the first one finishes
  },
};

function filterStyles({
  enabled = null,
  id = null,
  matchUrl = null,
  md5Url = null,
  asHash = null,
  omitCode,
  strictRegexp = true, // used by the popup to detect bad regexps
} = {}) {
  if (matchUrl && !URLS.supported(matchUrl)) {
    return asHash ? {length: 0} : [];
  }

  // make sure to use the same order in updateFiltersCache()
  const cacheKey =
    enabled + '\t' +
    id + '\t' +
    matchUrl + '\t' +
    md5Url + '\t' +
    asHash + '\t' +
    strictRegexp;
  const cached = cachedStyles.filters.get(cacheKey);
  let styles;
  if (cached) {
    cached.hits++;
    cached.lastHit = Date.now();
    styles = asHash
      ? Object.assign(blankHash, cached.styles)
      : cached.styles.slice();
  } else {
    styles = filterStylesInternal({
      enabled,
      id,
      matchUrl,
      md5Url,
      asHash,
      strictRegexp,
      blankHash,
      cacheKey,
      omitCode,
    });
  }
  if (!omitCode) return styles;
  if (!asHash) return styles.map(getStyleWithNoCode);
  for (const id in styles) {
    const sections = styles[id];
    if (Array.isArray(sections)) {
      styles[id] = getStyleWithNoCode({sections}).sections;
    }
  }
  return styles;
}


function filterStylesInternal({
  // js engines don't like big functions (V8 often deoptimized the original filterStyles)
  // it also makes sense to extract the less frequently executed code
  enabled,
  id,
  matchUrl,
  md5Url,
  asHash,
  strictRegexp,
  blankHash,
  cacheKey,
  omitCode,
}) {
  if (matchUrl && !cachedStyles.urlDomains.has(matchUrl)) {
    cachedStyles.urlDomains.set(matchUrl, getDomains(matchUrl));
    for (let i = cachedStyles.urlDomains.size - 100; i > 0; i--) {
      const firstKey = cachedStyles.urlDomains.keys().next().value;
      cachedStyles.urlDomains.delete(firstKey);
    }
  }

  const filtered = asHash ? {length: 0} : [];
  const needSections = asHash || matchUrl !== null;
  const matchUrlBase = matchUrl && matchUrl.includes('#') && matchUrl.split('#', 1)[0];
  let style;
  for (let i = 0; (style = styles[i]); i++) {
    if ((enabled === null || style.enabled === enabled)
    && (md5Url === null || style.md5Url === md5Url)
    && (id === null || style.id === id)) {
      const sections = needSections &&
        getApplicableSections({
          style,
          matchUrl,
          strictRegexp,
          stopOnFirst: !asHash,
          skipUrlCheck: true,
          matchUrlBase,
          omitCode,
        });
      if (asHash) {
        if (sections.length && sections[0] !== '') {
          sections.unshift({included: !isPageExcluded(matchUrl, style.exclusions)});
          filtered[style.id] = sections;
          filtered.length++;
        }
      } else if (matchUrl === null || sections.length) {
        filtered.push(style);
      }
    }
  }

  cachedStyles.filters.set(cacheKey, {
    styles: filtered,
    lastHit: Date.now(),
    hits: 1,
  });
  if (cachedStyles.filters.size > 10000) {
    cleanupCachedFilters();
  }

  // a shallow copy is needed because the cache doesn't store options like disableAll
  return asHash
    ? Object.assign(blankHash, filtered)
    : filtered;
}

function compileExclusionRegexps(exclusions) {
  exclusions.forEach(exclusion => {
    if (!cachedStyles.exclusions.get(exclusion)) {
      cachedStyles.exclusions.set(exclusion, tryRegExp(exclusion) || false);
    }
  });
}

function isPageExcluded(matchUrl, exclusions = {}) {
  const keys = Object.keys(exclusions);
  if (!keys.length) {
    return false;
  }
  compileExclusionRegexps(keys);
  return keys.some(exclude => {
    const rx = cachedStyles.exclusions.get(exclude);
    return rx && rx.test(matchUrl);
  });
}


function getApplicableSections({
  style,
  matchUrl,
  strictRegexp = true,
  // filterStylesInternal() sets the following to avoid recalc on each style:
  stopOnFirst,
  skipUrlCheck,
  matchUrlBase = matchUrl.includes('#') && matchUrl.split('#', 1)[0],
  omitCode,
  // as per spec the fragment portion is ignored in @-moz-document:
  // https://www.w3.org/TR/2012/WD-css3-conditional-20120911/#url-of-doc
  // but the spec is outdated and doesn't account for SPA sites
  // so we only respect it in case of url("http://exact.url/without/hash")
}) {
  const excluded = isPageExcluded(matchUrl, style.exclusions);
  if (!skipUrlCheck && !URLS.supported(matchUrl) || omitCode !== false && excluded) {
    return [];
  }
  // Show excluded style in popup
  if (excluded) {
    return [{}];
  }
  const sections = [];
  for (const section of style.sections) {
    const {urls, domains, urlPrefixes, regexps, code} = section;
    const isGlobal = !urls.length && !urlPrefixes.length && !domains.length && !regexps.length;
    const isMatching = !isGlobal && (
      urls.length
        && (urls.includes(matchUrl) || matchUrlBase && urls.includes(matchUrlBase))
      || urlPrefixes.length
        && arraySomeIsPrefix(urlPrefixes, matchUrl)
      || domains.length
        && arraySomeIn(cachedStyles.urlDomains.get(matchUrl) || getDomains(matchUrl), domains)
      || regexps.length
        && arraySomeMatches(regexps, matchUrl, strictRegexp));
    if (isGlobal && !styleCodeEmpty(code) || isMatching) {
      sections.push(section);
      if (stopOnFirst) {
        break;
      }
    }
  }
  return sections;

  function arraySomeIsPrefix(array, string) {
    for (const prefix of array) {
      if (string.startsWith(prefix)) {
        return true;
      }
    }
    return false;
  }

  function arraySomeIn(array, haystack) {
    for (const el of array) {
      if (haystack.indexOf(el) >= 0) {
        return true;
      }
    }
    return false;
  }

  function arraySomeMatches(array, matchUrl, strictRegexp) {
    for (const regexp of array) {
      for (let pass = 1; pass <= (strictRegexp ? 1 : 2); pass++) {
        const cacheKey = pass === 1 ? regexp : SLOPPY_REGEXP_PREFIX + regexp;
        let rx = cachedStyles.regexps.get(cacheKey);
        if (rx === false) {
          // invalid regexp
          break;
        }
        if (!rx) {
          const anchored = pass === 1 ? '^(?:' + regexp + ')$' : '^' + regexp + '$';
          rx = tryRegExp(anchored);
          cachedStyles.regexps.set(cacheKey, rx || false);
          if (!rx) {
            // invalid regexp
            break;
          }
        }
        if (rx.test(matchUrl)) {
          return true;
        }
      }
    }
    return false;
  }
}


function styleCodeEmpty(code) {
  // Collect the global section if it's not empty, not comment-only, not namespace-only.
  const cmtOpen = code && code.indexOf('/*');
  if (cmtOpen >= 0) {
    const cmtCloseLast = code.lastIndexOf('*/');
    if (cmtCloseLast < 0) {
      code = code.substr(0, cmtOpen);
    } else {
      code = code.substr(0, cmtOpen) +
        code.substring(cmtOpen, cmtCloseLast + 2).replace(RX_CSS_COMMENTS, '') +
        code.substr(cmtCloseLast + 2);
    }
  }
  if (!code || !code.trim()) return true;
  if (code.includes('@namespace')) code = code.replace(RX_NAMESPACE, '').trim();
  if (code.includes('@charset')) code = code.replace(RX_CHARSET, '').trim();
  return !code;
}


function invalidateCache({added, updated, deletedId} = {}) {
  if (!cachedStyles.list) return;
  const id = added ? added.id : updated ? updated.id : deletedId;
  const cached = cachedStyles.byId.get(id);

  if (updated) {
    if (cached) {
      const isSectionGlobal = section =>
        !section.urls.length &&
        !section.urlPrefixes.length &&
        !section.domains.length &&
        !section.regexps.length;
      const hadOrHasGlobals = cached.sections.some(isSectionGlobal) ||
                              updated.sections.some(isSectionGlobal);
      const reenabled = !cached.enabled && updated.enabled;
      const equal = !hadOrHasGlobals &&
                    !reenabled &&
                    styleSectionsEqual(updated, cached, {ignoreCode: true});
      Object.assign(cached, updated);
      if (equal) {
        updateFiltersCache(cached);
      } else {
        cachedStyles.filters.clear();
      }
      cachedStyles.needTransitionPatch.delete(id);
      return;
    } else {
      added = updated;
    }
  }

  if (added) {
    if (!cached) {
      cachedStyles.list.push(added);
      cachedStyles.byId.set(added.id, added);
      cachedStyles.filters.clear();
      cachedStyles.needTransitionPatch.delete(id);
    }
    return;
  }

  if (deletedId !== undefined) {
    if (cached) {
      const cachedIndex = cachedStyles.list.indexOf(cached);
      cachedStyles.list.splice(cachedIndex, 1);
      cachedStyles.byId.delete(deletedId);
      for (const {styles} of cachedStyles.filters.values()) {
        if (Array.isArray(styles)) {
          const index = styles.findIndex(({id}) => id === deletedId);
          if (index >= 0) styles.splice(index, 1);
        } else if (deletedId in styles) {
          delete styles[deletedId];
          styles.length--;
        }
      }
      cachedStyles.needTransitionPatch.delete(id);
      return;
    }
  }

  cachedStyles.list = null;
  cachedStyles.filters.clear();
  cachedStyles.needTransitionPatch.clear(id);
}


function updateFiltersCache(style) {
  const {id} = style;
  for (const [key, {styles}] of cachedStyles.filters.entries()) {
    if (Array.isArray(styles)) {
      const index = styles.findIndex(style => style.id === id);
      if (index >= 0) styles[index] = Object.assign({}, style);
      continue;
    }
    if (id in styles) {
      const [, , matchUrl, , , strictRegexp] = key.split('\t');
      if (!style.enabled) {
        delete styles[id];
        styles.length--;
        continue;
      }
      const matchUrlBase = matchUrl && matchUrl.includes('#') && matchUrl.split('#', 1)[0];
      const sections = getApplicableSections({
        style,
        matchUrl,
        matchUrlBase,
        strictRegexp,
        skipUrlCheck: true,
        omitCode: false
      });
      if (sections.length) {
        styles[id] = sections;
      } else {
        delete styles[id];
        styles.length--;
      }
    }
  }
}


function cleanupCachedFilters({force = false} = {}) {
  if (!force) {
    debounce(cleanupCachedFilters, 1000, {force: true});
    return;
  }
  const size = cachedStyles.filters.size;
  const oldestHit = cachedStyles.filters.values().next().value.lastHit;
  const now = Date.now();
  const timeSpan = now - oldestHit;
  const recencyWeight = 5 / size;
  const hitWeight = 1 / 4; // we make ~4 hits per URL
  const lastHitWeight = 10;
  // delete the oldest 10%
  [...cachedStyles.filters.entries()]
    .map(([id, v], index) => ({
      id,
      weight:
        index * recencyWeight +
        v.hits * hitWeight +
        (v.lastHit - oldestHit) / timeSpan * lastHitWeight,
    }))
    .sort((a, b) => a.weight - b.weight)
    .slice(0, size / 10 + 1)
    .forEach(({id}) => cachedStyles.filters.delete(id));
}


function getDomains(url) {
  let d = /.*?:\/*([^/:]+)|$/.exec(url)[1];
  if (!d || url.startsWith('file:')) {
    return [];
  }
  const domains = [d];
  while (d.indexOf('.') !== -1) {
    d = d.substring(d.indexOf('.') + 1);
    domains.push(d);
  }
  return domains;
}


function normalizeStyleSections({sections}) {
  // retain known properties in an arbitrarily predefined order
  return (sections || []).map(section => ({
    code: section.code || '',
    urls: section.urls || [],
    urlPrefixes: section.urlPrefixes || [],
    domains: section.domains || [],
    regexps: section.regexps || [],
  }));
}


function calcStyleDigest(style) {
  const jsonString = style.usercssData ?
    style.sourceCode : JSON.stringify(normalizeStyleSections(style));
  const text = new TextEncoder('utf-8').encode(jsonString);
  return crypto.subtle.digest('SHA-1', text).then(hex);

  function hex(buffer) {
    const parts = [];
    const PAD8 = '00000000';
    const view = new DataView(buffer);
    for (let i = 0; i < view.byteLength; i += 4) {
      parts.push((PAD8 + view.getUint32(i).toString(16)).slice(-8));
    }
    return parts.join('');
  }
}


function handleCssTransitionBug({tabId, frameId, url, styles}) {
  for (let id in styles) {
    id |= 0;
    if (!id) {
      continue;
    }
    let need = cachedStyles.needTransitionPatch.get(id);
    if (need === false) {
      continue;
    }
    if (need !== true) {
      need = styles[id].some(sectionContainsTransitions);
      cachedStyles.needTransitionPatch.set(id, need);
      if (!need) {
        continue;
      }
    }
    if (FIREFOX && !url.startsWith(URLS.ownOrigin)) {
      patchFirefox();
    } else {
      styles.needTransitionPatch = true;
    }
    break;
  }

  function patchFirefox() {
    const options = {
      frameId,
      code: CSS_TRANSITION_SUPPRESSOR,
      matchAboutBlank: true,
    };
    if (FIREFOX >= 53) {
      options.cssOrigin = 'user';
    }
    browser.tabs.insertCSS(tabId, Object.assign(options, {
      runAt: 'document_start',
    })).then(() => setTimeout(() => {
      browser.tabs.removeCSS(tabId, options).catch(ignoreChromeError);
    })).catch(ignoreChromeError);
  }

  function sectionContainsTransitions(section) {
    let code = section.code;
    const firstTransition = code.indexOf('transition');
    if (firstTransition < 0) {
      return false;
    }
    const firstCmt = code.indexOf('/*');
    // check the part before the first comment
    if (firstCmt < 0 || firstTransition < firstCmt) {
      if (quickCheckAround(code, firstTransition)) {
        return true;
      } else if (firstCmt < 0) {
        return false;
      }
    }
    // check the rest
    const lastCmt = code.lastIndexOf('*/');
    if (lastCmt < firstCmt) {
      // the comment is unclosed and we already checked the preceding part
      return false;
    }
    let mid = code.slice(firstCmt, lastCmt + 2);
    mid = mid.indexOf('*/') === mid.length - 2 ? '' : mid.replace(RX_CSS_COMMENTS, '');
    code = mid + code.slice(lastCmt + 2);
    return quickCheckAround(code) || RX_CSS_TRANSITION_DETECTOR.test(code);
  }

  function quickCheckAround(code, pos = code.indexOf('transition')) {
    return RX_CSS_TRANSITION_DETECTOR.test(code.substr(Math.max(0, pos - 10), 50));
  }
}


/*
  According to CSS4 @document specification the entire URL must match.
  Stylish-for-Chrome implemented it incorrectly since the very beginning.
  We'll detect styles that abuse the bug by finding the sections that
  would have been applied by Stylish but not by us as we follow the spec.
  Additionally we'll check for invalid regexps.
*/
function detectSloppyRegexps({matchUrl, ids}) {
  const results = [];
  for (const id of ids) {
    const style = cachedStyles.byId.get(id);
    if (!style) continue;
    // make sure all regexps are compiled
    const rxCache = cachedStyles.regexps;
    let hasRegExp = false;
    for (const section of style.sections) {
      for (const regexp of section.regexps) {
        hasRegExp = true;
        for (let pass = 1; pass <= 2; pass++) {
          const cacheKey = pass === 1 ? regexp : SLOPPY_REGEXP_PREFIX + regexp;
          if (!rxCache.has(cacheKey)) {
            // according to CSS4 @document specification the entire URL must match
            const anchored = pass === 1 ? '^(?:' + regexp + ')$' : '^' + regexp + '$';
            // create in the bg context to avoid leaking of "dead objects"
            const rx = tryRegExp(anchored);
            rxCache.set(cacheKey, rx || false);
          }
        }
      }
    }
    if (!hasRegExp) continue;
    const applied = getApplicableSections({style, matchUrl, omitCode: false});
    const wannabe = getApplicableSections({style, matchUrl, omitCode: false, strictRegexp: false});
    if (wannabe.length && wannabe[0] !== '') {
      results.push({
        id,
        applied,
        skipped: wannabe.length - applied.length,
        hasInvalidRegexps: wannabe.some(({regexps}) => regexps.some(rx => !rxCache.has(rx))),
      });
    }
  }
  return results;
}