Added threads expand feature

README.md

@@ -5,10 +5,12 @@ images preview to dou.ua
 
 ## Features
 
-* WYSIWYG editor for comments
-* Code highlight in comments (only if code was inserted using WYSIWYG editor)
-* Image previews below comment's text (if comment contains link to image)
-* Embedded YT videos (if comment contains link to video)
+* Adds WYSIWYG editor for comments
+* Highlights code in comments (only if code was inserted using WYSIWYG editor)
+* Adds image previews below comment's text (if comment contains link to image)
+* Embeds YT videos (if comment contains link to video)
+* Image previews and embedded video can be switched off, if you don't like them
+* Expands all threads (can be switched off)
 
 ## Installation
 

gulpfile.js

@@ -64,7 +64,7 @@ gulp.task('watch-scss', () => gulp.watch(scssSrc, ['scss']));
  * Build js files using babel. Webpack is used together with vinyl-named to do imports but keep result each entry point
  * in separated files (content script, background script)
  */
-const jsSrc = ['src/content.js', 'src/background.js', 'src/popup.js'];
+const jsSrc = ['src/content.js', 'src/background.js', 'src/popup.js', 'src/profiling.js'];
 const depsSrc = ['src/utils/**/*.js', 'src/config/**/*.js', 'node_modules/**/*.js'];
 gulp.task('js', () =>
   gulp.src(jsSrc)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dou-enhancer",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Chrome extension that adds WYSIWYG editor (and more!) to dou.ua",
   "main": ".eslintrc.js",
   "scripts": {

src/config/extension-defaults.js

@@ -2,5 +2,6 @@
  * Default extension config (will be stored via chrome.storage.sync)
  */
 export default {
-  mediaPreviewSize: 'small'
+  mediaPreviewSize: 'small',
+  expandThreads: true
 };

src/content.js

@@ -10,6 +10,7 @@ import highlightCode from './utils/highlight-code';
 import injectAgent from './utils/agent';
 import createPreprocessor from './utils/paste-preprocessor'
 import profiler from './utils/profiler';
+import expandThreads from './utils/expand-threads';
 
 /**
  * Main function which initializes editor
@@ -258,13 +259,24 @@ const fn = function () {
      * Highlight all code
      */
     highlightCode();
+    /**
+     * Expand all threads
+     */
+    if (config.expandThreads) {
+      expandThreads();
+    }
 
     /**
      * When comment list changes - update previews and code highlighting
+     * TODO: Try to modify comments manager to know exactly when new comments arrive. Mutation observer is not the best
+     * tool for what we need
      */
     commentsMutationCallbacks.push(function () {
       addImagePreviews(config.mediaPreviewSize);
       highlightCode();
+      if (config.expandThreads) {
+        expandThreads();
+      }
     });
 
     /**
@@ -282,6 +294,9 @@ const fn = function () {
 
           addImagePreviews(config.mediaPreviewSize);
           highlightCode();
+          if (config.expandThreads) {
+            expandThreads();
+          }
         });
       }
     });

src/popup.js

@@ -8,12 +8,37 @@ import debounce from "./utils/debounce";
 const fn = function () {
   const alerts = new Alerts('#configAlerts');
 
+  const updateLSCounter = function () {
+    const localStorageCounter = document.getElementById('localStorageCounter');
+    chrome.storage.local.getBytesInUse((bytesInUse) => {
+      if (chrome.runtime.lastError) {
+        alerts.failure('Can not get used bytes: ' + chrome.runtime.lastError.message);
+        return;
+      }
+
+      localStorageCounter.innerText = `${bytesInUse} / 5242880 bytes`;
+    });
+  };
+
+  const updateSSCounter = function () {
+    const syncStorageCounter = document.getElementById('syncStorageCounter');
+    chrome.storage.sync.getBytesInUse((bytesInUse) => {
+      if (chrome.runtime.lastError) {
+        alerts.failure('Can not get used bytes: ' + chrome.runtime.lastError.message);
+        return;
+      }
+
+      syncStorageCounter.innerText = `${bytesInUse} / 102400 bytes`;
+    });
+  };
+
   const saveChanges = debounce(function (config) {
     chrome.storage.sync.set(config, () => {
       if (chrome.runtime.lastError) {
         alerts.failure('Can not store settings in synced storage: ' + chrome.runtime.lastError.message);
       } else {
         alerts.success('Saved!');
+        updateSSCounter();
       }
     });
   }, 500);
@@ -39,70 +64,63 @@ const fn = function () {
       saveChanges(config);
     };
 
+    const expandThreadsCheckbox = document.getElementById("expandThreads");
+    expandThreadsCheckbox.checked = config.expandThreads;
+    expandThreadsCheckbox.onchange = function () {
+      config.expandThreads = this.checked;
+      saveChanges(config);
+    };
+
+    const devOptsExpander = document.getElementById('devOptionsExpander');
+    devOptsExpander.onclick = function () {
+      devOptsExpander.classList.toggle('expanded');
+      const devOpts = document.getElementById('devOptions');
+      devOpts.classList.toggle('hidden')
+    };
+
     const profilerCheckbox = document.getElementById("profiler");
     profilerCheckbox.checked = config.profiler;
     profilerCheckbox.onchange = function () {
       config.profiler = this.checked;
       if (this.checked) {
-        alerts.warning('You enabled profiler. This could impact site perfomance. Disable profiler if you enabled it by mistake.', {
+        alerts.warning('You enabled profiler. This could impact site performance. Disable profiler if you enabled it by mistake.', {
           timeout: 10000
         })
       }
       saveChanges(config);
     };
 
+    updateLSCounter();
+    updateSSCounter();
+
     const clearLocalStorageButton = document.getElementById("clearLocalStorage");
-    const storageCounter = clearLocalStorageButton.querySelector('span');
-    if (storageCounter) {
-      chrome.storage.local.getBytesInUse((bytesInUse) => {
+    clearLocalStorageButton.onclick = function () {
+      chrome.storage.local.clear(() => {
         if (chrome.runtime.lastError) {
-          alerts.failure('Can not get used bytes: ' + chrome.runtime.lastError.message);
-          return;
-        }
-
-        if (bytesInUse > 0) {
-          storageCounter.innerText = `(${bytesInUse} / 5242880 bytes)`;
+          alerts.failure('Can not clear storage: ' + chrome.runtime.lastError.message);
+        } else {
+          alerts.success('Cleared');
+          updateLSCounter();
         }
       });
-    }
-    clearLocalStorageButton.onclick = function () {
-      chrome.storage.local.clear(() =>{
+    };
+
+    const clearSyncStorageButton = document.getElementById("clearSyncStorage");
+    clearSyncStorageButton.onclick = function () {
+      chrome.storage.sync.clear(() => {
         if (chrome.runtime.lastError) {
-          alerts.failure('Can not store clear: ' + chrome.runtime.lastError.message);
+          alerts.failure('Can not clear storage: ' + chrome.runtime.lastError.message);
         } else {
           alerts.success('Cleared');
-          if (storageCounter) {
-            storageCounter.innerText = '';
-          }
+          updateSSCounter();
         }
       });
     };
 
     const dumpLocalStorageButton = document.getElementById("dumpLocalStorage");
     dumpLocalStorageButton.onclick = function () {
-      chrome.storage.local.get('profilerStats', (stats) => {
-        if (chrome.runtime.lastError) {
-          alerts.failure('Can not get data: ' + chrome.runtime.lastError.message);
-          return;
-        }
-
-        /* global hljs */
-        hljs.configure({
-          tabReplace: '  ',
-        });
-
-        const statsContainer = document.getElementById("profilerStats");
-        let pre = statsContainer.querySelector('pre');
-        if (pre) {
-          pre.remove();
-        }
-        pre = document.createElement("pre");
-        const code = document.createElement("code");
-        code.classList.add('language-json');
-        code.innerText = JSON.stringify(stats.profilerStats, null, 2);
-        pre.appendChild(code);
-        statsContainer.appendChild(pre);
-        hljs.highlightBlock(code);
+      chrome.windows.create({
+        url: 'profiling.html'
       });
     };
   });

src/profiling.js

@@ -0,0 +1,36 @@
+import Alerts from './utils/alerts';
+
+const fn = function () {
+  const alerts = new Alerts('#alerts');
+  /* global chrome */
+  chrome.storage.local.get('profilerStats', (stats) => {
+    if (chrome.runtime.lastError) {
+      alerts.failure('Can not get data: ' + chrome.runtime.lastError.message);
+      return;
+    }
+
+    const statsContainer = document.getElementById("profilerStats");
+    let pre = statsContainer.querySelector('pre');
+    if (pre) {
+      pre.remove();
+    }
+    pre = document.createElement("pre");
+    const code = document.createElement("code");
+    code.classList.add('language-json');
+    code.innerText = JSON.stringify(stats.profilerStats, null, 2);
+    pre.appendChild(code);
+    statsContainer.appendChild(pre);
+    /* global hljs */
+    hljs.configure({
+      tabReplace: '  ',
+    });
+    hljs.highlightBlock(code);
+  });
+};
+
+if (["complete", "interactive"].indexOf(document.readyState) > -1) {
+  fn();
+}
+else {
+  document.addEventListener("DOMContentLoaded", fn);
+}

src/static/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "DOU enhancer",
   "description": "Chrome extension that adds WYSIWYG editor (and more!) to dou.ua",
-  "version": "0.0.0.10",
+  "version": "0.0.0.11",
   "icons": {
     "128": "icon128.png"
   },

src/static/popup.html

@@ -16,14 +16,23 @@ <h2>Config</h2>
     Media preview size:
     <select id="mediaPreviewSize"></select>
   </p>
-  <h3>Profiler</h3>
-  <p>Do not enable profiler if you wasn't told to enable it by extension developer.</p>
+  <p>Expand threads: <input type="checkbox" id="expandThreads"></p>
+</div>
+<div id="devOptionsExpander" class="dev-options-expander"></div>
+<div id="devOptions" class="dev-options hidden">
+  <p>
+    Enable profiler: <input type="checkbox" id="profiler">
+  </p>
+  <p>
+    Local storage (profiling): <span id="localStorageCounter"></span>
+  </p>
   <p>
-    Enable: <input type="checkbox" id="profiler">
+    Sync storage (config): <span id="syncStorageCounter"></span>
   </p>
   <p>
-    <button type="button" id="clearLocalStorage">Clear profiling data <span></span></button>
-    <button type="button" id="dumpLocalStorage">View data</button>
+    <button type="button" id="dumpLocalStorage">View profiling data</button>
+    <button type="button" id="clearLocalStorage">Clear profiling data</button>
+    <button type="button" id="clearSyncStorage">Clear config</button>
   </p>
   <div class="stats" id="profilerStats"></div>
 </div>

src/static/profiling.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>DOU enhancer - profiling data</title>
+  <link rel="stylesheet" href="vendor/highlightjs/styles/monokai.css">
+</head>
+<body>
+<div id="alerts"></div>
+<div id="profilerStats"></div>
+<script type="text/javascript" src="vendor/highlightjs/highlight.pack.js"></script>
+<script type="text/javascript" src="js/profiling.js"></script>
+</body>
+</html>

src/style/popup.scss

@@ -43,3 +43,22 @@ h1, h2, h3, h4 {
     overflow: auto;
   }
 }
+
+.dev-options.hidden {
+  display: none;
+}
+
+.dev-options-expander {
+  color: #00b0e8;
+
+  &:before {
+    display: inline;
+    content: 'Show development options';
+    border-bottom: dashed #00b0e8;
+    cursor: pointer;
+  }
+
+  &.expanded:before {
+    content: 'Hide development options';
+  }
+}

src/utils/expand-threads.js

@@ -0,0 +1,14 @@
+import profiler from '../utils/profiler';
+
+/**
+ * Expands all threads by "clicking" on each expand link
+ */
+const expandThreads = function () {
+  profiler.start('expandThreads');
+  document.querySelectorAll('.expand-thread').forEach(thread => {
+    thread.click();
+  });
+  profiler.stop('expandThreads');
+};
+
+export default expandThreads;