stylus/backup/fileSaveLoad.js

/* global messageBox, handleUpdate */
'use strict';

const STYLISH_DUMP_FILE_EXT = '.txt';
const STYLUS_BACKUP_FILE_EXT = '.json';


function importFromFile({fileTypeFilter, file} = {}) {
  return new Promise(resolve => {
    const fileInput = document.createElement('input');
    if (file) {
      readFile();
      return;
    }
    fileInput.style.display = 'none';
    fileInput.type = 'file';
    fileInput.accept = fileTypeFilter || STYLISH_DUMP_FILE_EXT;
    fileInput.acceptCharset = 'utf-8';

    document.body.appendChild(fileInput);
    fileInput.initialValue = fileInput.value;
    fileInput.onchange = readFile;
    fileInput.click();

    function readFile() {
      if (file || fileInput.value !== fileInput.initialValue) {
        file = file || fileInput.files[0];
        if (file.size > 100e6) {
          console.warn("100MB backup? I don't believe you.");
          importFromString('').then(resolve);
          return;
        }
        document.body.style.cursor = 'wait';
        const fReader = new FileReader();
        fReader.onloadend = event => {
          fileInput.remove();
          importFromString(event.target.result).then(numStyles => {
            document.body.style.cursor = '';
            resolve(numStyles);
          });
        };
        fReader.readAsText(file, 'utf-8');
      }
    }
  });
}


function importFromString(jsonString) {
  if (!BG) {
    onBackgroundReady().then(() => importFromString(jsonString));
    return;
  }
  const json = BG.tryJSONparse(jsonString) || []; // create object in background context
  if (typeof json.slice != 'function') {
    json.length = 0;
  }
  const oldStyles = json.length && BG.deepCopy(BG.cachedStyles.list || []);
  const oldStylesByName = json.length && new Map(
    oldStyles.map(style => [style.name.trim(), style]));
  const stats = {
    added: {names: [], ids: [], legend: 'added'},
    unchanged: {names: [], ids: [], legend: 'identical skipped'},
    metaAndCode: {names: [], ids: [], legend: 'updated both meta info and code'},
    metaOnly: {names: [], ids: [], legend: 'updated meta info'},
    codeOnly: {names: [], ids: [], legend: 'updated code'},
    invalid: {names: [], legend: 'invalid skipped'},
  };
  let index = 0;
  let lastRenderTime = performance.now();
  const renderQueue = [];
  const RENDER_NAP_TIME_MAX = 1000; // ms
  const RENDER_QUEUE_MAX = 50; // number of styles
  return new Promise(proceed);

  function proceed(resolve) {
    while (index < json.length) {
      const item = json[index++];
      if (!item || !item.name || !item.name.trim() || typeof item != 'object'
      || (item.sections && typeof item.sections.slice != 'function')) {
        stats.invalid.names.push(`#${index}: ${limitString(item && item.name || '')}`);
        continue;
      }
      item.name = item.name.trim();
      const byId = BG.cachedStyles.byId.get(item.id);
      const byName = oldStylesByName.get(item.name);
      const oldStyle = byId && byId.name.trim() == item.name || !byName ? byId : byName;
      if (oldStyle == byName && byName) {
        item.id = byName.id;
      }
      const oldStyleKeys = oldStyle && Object.keys(oldStyle);
      const metaEqual = oldStyleKeys &&
        oldStyleKeys.length == Object.keys(item).length &&
        oldStyleKeys.every(k => k == 'sections' || oldStyle[k] === item[k]);
      const codeEqual = oldStyle && BG.styleSectionsEqual(oldStyle, item);
      if (metaEqual && codeEqual) {
        stats.unchanged.names.push(oldStyle.name);
        stats.unchanged.ids.push(oldStyle.id);
        continue;
      }
      // using saveStyle directly since json was parsed in background page context
      BG.saveStyle(Object.assign(item, {
        reason: 'import',
        notify: false,
      })).then(style => {
        renderQueue.push(style);
        if (performance.now() - lastRenderTime > RENDER_NAP_TIME_MAX
        || renderQueue.length > RENDER_QUEUE_MAX) {
          renderQueue.forEach(style => handleUpdate(style, {reason: 'import'}));
          setTimeout(scrollElementIntoView, 0, $('#style-' + renderQueue.pop().id));
          renderQueue.length = 0;
          lastRenderTime = performance.now();
        }
        setTimeout(proceed, 0, resolve);
        if (!oldStyle) {
          stats.added.names.push(style.name);
          stats.added.ids.push(style.id);
          return;
        }
        if (!metaEqual && !codeEqual) {
          stats.metaAndCode.names.push(reportNameChange(oldStyle, style));
          stats.metaAndCode.ids.push(style.id);
          return;
        }
        if (!codeEqual) {
          stats.codeOnly.names.push(style.name);
          stats.codeOnly.ids.push(style.id);
          return;
        }
        stats.metaOnly.names.push(reportNameChange(oldStyle, style));
        stats.metaOnly.ids.push(style.id);
      });
      return;
    }
    renderQueue.forEach(style => handleUpdate(style, {reason: 'import'}));
    renderQueue.length = 0;
    done(resolve);
  }

  function done(resolve) {
    const numChanged = stats.metaAndCode.names.length +
      stats.metaOnly.names.length +
      stats.codeOnly.names.length +
      stats.added.names.length;
    Promise.resolve(numChanged && BG.refreshAllTabs()).then(() => {
      const listNames = kind => {
        const {ids, names} = stats[kind];
        return ids
          ? names.map((name, i) => `<div data-id="${ids[i]}">${name}</div>`)
          : names.map(name => `<div>${name}</div>`);
      };
      const report = Object.keys(stats)
        .filter(kind => stats[kind].names.length)
        .map(kind =>
          `<details data-id="${kind}">
            <summary><b>${stats[kind].names.length} ${stats[kind].legend}</b></summary>
            <small>${listNames(kind).join('')}</small>
          </details>`)
        .join('');
      scrollTo(0, 0);
      messageBox({
        title: 'Finished importing styles',
        contents: report || 'Nothing was changed.',
        buttons: [t('confirmOK'), numChanged && t('undo')],
        onshow:  bindClick,
      }).then(({button, enter, esc}) => {
        if (button == 1) {
          undo();
        }
      });
      resolve(numChanged);
    });
  }

  function undo() {
    const oldStylesById = new Map(oldStyles.map(style => [style.id, style]));
    const newIds = [
      ...stats.metaAndCode.ids,
      ...stats.metaOnly.ids,
      ...stats.codeOnly.ids,
      ...stats.added.ids,
    ];
    index = 0;
    return new Promise(undoNextId)
      .then(BG.refreshAllTabs)
      .then(() => messageBox({
        title: 'Import has been undone',
        contents: newIds.length + ' styles were reverted.',
        buttons: [t('confirmOK')],
      }));
    function undoNextId(resolve) {
      if (index == newIds.length) {
        resolve();
        return;
      }
      const id = newIds[index++];
      deleteStyleSafe({id, notify: false}).then(id => {
        const oldStyle = oldStylesById.get(id);
        if (oldStyle) {
          saveStyleSafe(Object.assign(oldStyle, {
            reason: 'import',
            notify: false,
          })).then(() =>
            setTimeout(undoNextId, 0, resolve));
        } else {
          setTimeout(undoNextId, 0, resolve);
        }
      });
    }
  }

  function bindClick(box) {
    const highlightElement = event => {
      const styleElement = $('#style-' + event.target.dataset.id);
      if (styleElement) {
        scrollElementIntoView(styleElement);
        animateElement(styleElement, {className: 'highlight'});
      }
    };
    for (const block of $$('details')) {
      if (block.dataset.id != 'invalid') {
        block.style.cursor = 'pointer';
        block.onclick = highlightElement;
      }
    }
  }

  function limitString(s, limit = 100) {
    return s.length <= limit ? s : s.substr(0, limit) + '...';
  }

  function reportNameChange(oldStyle, newStyle) {
    return newStyle.name != oldStyle.name
      ? oldStyle.name + ' —> ' + newStyle.name
      : oldStyle.name;
  }
}


$('#file-all-styles').onclick = () => {
  getStylesSafe().then(styles => {
    const text = JSON.stringify(styles, null, '\t');
    const fileName = generateFileName();

    const url = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
    // for long URLs; https://github.com/schomery/stylish-chrome/issues/13#issuecomment-284582600
    fetch(url)
    .then(res => res.blob())
    .then(blob => {
      const a = document.createElement('a');
      a.setAttribute('download', fileName);
      a.setAttribute('href', URL.createObjectURL(blob));
      a.dispatchEvent(new MouseEvent('click'));
    });
  });

  function generateFileName() {
    const today = new Date();
    const dd = ('0' + today.getDate()).substr(-2);
    const mm = ('0' + (today.getMonth() + 1)).substr(-2);
    const yyyy = today.getFullYear();
    return `stylus-${mm}-${dd}-${yyyy}${STYLUS_BACKUP_FILE_EXT}`;
  }
};


$('#unfile-all-styles').onclick = () => {
  importFromFile({fileTypeFilter: STYLUS_BACKUP_FILE_EXT});
};

Object.assign(document.body, {
  ondragover(event) {
    const hasFiles = event.dataTransfer.types.includes('Files');
    event.dataTransfer.dropEffect = hasFiles || event.target.type == 'search' ? 'copy' : 'none';
    this.classList.toggle('dropzone', hasFiles);
    if (hasFiles) {
      event.preventDefault();
      clearTimeout(this.fadeoutTimer);
      this.classList.remove('fadeout');
    }
  },
  ondragend(event) {
    animateElement(this, {className: 'fadeout'}).then(() => {
      this.style.animationDuration = '';
      this.classList.remove('dropzone');
    });
  },
  ondragleave(event) {
    // Chrome sets screen coords to 0 on Escape key pressed or mouse out of document bounds
    if (!event.screenX && !event.screenX) {
      this.ondragend();
    }
  },
  ondrop(event) {
    this.ondragend();
    if (event.dataTransfer.files.length) {
      event.preventDefault();
      importFromFile({file: event.dataTransfer.files[0]});
    }
  },
});