#45: Ensure that the screen shot is loaded before the UI appears

.gitignore

@@ -5,3 +5,4 @@ npm-debug.log
 *.zip
 *.pem
 .DS_Store
+.idea

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Spongy",
   "author": "Diego Hernandez",
-  "version": "1.0.0",
+  "version": "1.0.1",
 
   "description": "A Google Chrome eyedropper for IBM Design Language's colors and grades.",
 
@@ -33,11 +33,11 @@
 
   "content_scripts": [{
     "matches": ["http://*/*", "https://*/*"],
-    "js": ["scripts/main.js"],
-    "css": ["styles/main.css"]
+    "js": ["scripts/main.js"]
   }],
 
   "web_accessible_resources": [
-    "fonts/*"
+    "fonts/*",
+    "styles/*"
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spongy",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Google Chrome eyedropper for IBM Design Language's colors and grades.",
   "license": "Apache-2.0",
   "main": "index.js",
@@ -21,13 +21,13 @@
     "eye dropper"
   ],
   "author": "Diego Hernandez <[email protected]>",
-  "license": "SEE LICENSE IN LICENSE.md",
   "bugs": {
     "url": "https://github.com/IBM-Design/spongy/issues"
   },
   "dependencies": {
     "d3-color": "^1.0.2",
-    "ibm-design-colors": "^2.0.3"
+    "ibm-design-colors": "^2.0.3",
+    "lodash": "^4.17.4"
   },
   "devDependencies": {
     "babel-core": "^6.18.2",

src/scripts/background.js

@@ -1,3 +1,5 @@
-import {sendScreenshot} from './utils/chrome';
+import { sendScreenshot, processExtensionMessage, stopApp } from './utils/chrome';
+import MessageType from './constants/MessageType';
 
-chrome.runtime.onMessage.addListener(sendScreenshot);
+chrome.runtime.onMessage.addListener(processExtensionMessage(MessageType.SCREENSHOT_REQUEST, sendScreenshot));
+chrome.runtime.onMessage.addListener(processExtensionMessage(MessageType.STOP_APP_REQUEST, stopApp));

src/scripts/components/App.js

@@ -1,49 +1,42 @@
 import * as IBMColors from '../../../node_modules/ibm-design-colors/source/colors';
+import { debounce } from 'lodash';
 import { createLoupe, updateLoupePixelColors, getMiddlePixelColor } from './Loupe';
 import { createColorBox, updateColorBox } from './ColorBox';
 import { createScreenshot, updateScreenshot, getColorData } from './Screenshot';
-import { createDiv, appendChildren } from '../utils/dom';
+import { createElement, createDiv, appendChildren } from '../utils/dom';
 import { addBrandColorsToArray } from '../utils/color';
-import { requestScreenshot, processExtensionMessage } from '../utils/chrome';
-import PLATFORMS from '../constants/platforms';
+import { requestScreenshot, processExtensionMessage, requestStopApp } from '../utils/chrome';
+import MessageType from '../constants/MessageType';
+import KeyCode from '../constants/KeyCode';
 
 function App(options = {}) {
   const SIZE = 5;
   const PREFIX = 'spongy-app';
   const APP = createDiv(PREFIX);
-  let isAppActive = false;
 
-  const ui = createDiv(`${PREFIX}-container`);
-  const loupe = createLoupe(SIZE, PREFIX);
-  const colorBox = createColorBox(PREFIX);
-  const screenshot = createScreenshot(PREFIX);
+  loadStyles();
+  requestScreenshot();
 
   // Set brand colors
   let brandColors = [];
   if (options.colors) {
     configure(options.colors);
   }
 
-  let requestScreenshotFunc;
+  chrome.runtime.onMessage.addListener(processExtensionMessage(MessageType.SCREENSHOT_DATA, getScreenshotData));
+  chrome.runtime.onMessage.addListener(processExtensionMessage(MessageType.STOP_APP, deactivate));
 
-  if (options.platform) {
-    switch (options.platform) {
-      case PLATFORMS.CHROME:
-      default: {
-        setDefault();
-      }
-    }
-  } else {
-    setDefault();
-  }
+  const ui = createDiv(`${PREFIX}-container`);
+  const loupe = createLoupe(SIZE, PREFIX);
+  const colorBox = createColorBox(PREFIX);
+  const screenshot = createScreenshot(PREFIX);
 
   /**
-   * Set default screenshot request and processing functions to Chrome.
+   * De-bounce refresh function so that it can be added and removed as event listener handlers.
+   *
+   * @type {function}
    */
-  function setDefault() {
-    requestScreenshotFunc = requestScreenshot;
-    chrome.runtime.onMessage.addListener(processExtensionMessage(getScreenshotData));
-  }
+  const deBounceRefresh = debounce(refresh, 50);
 
   /**
    * Function to configure brand color data of App.
@@ -59,6 +52,26 @@ function App(options = {}) {
     addBrandColorsToArray(brandColors, data);
   }
 
+  /**
+   * Load styles on to current page.
+   */
+  function loadStyles() {
+    const stylesUrl = chrome.extension.getURL('/styles/main.css');
+    const exitingStyles = document.querySelectorAll(`[href='${stylesUrl}'`);
+
+    // Check if there are already existing links that point to the styles URL. If there is none, load the styles.
+    if (exitingStyles.length === 0) {
+      // Create link element
+      const styles = createElement('link');
+      styles.href = stylesUrl;
+      styles.rel = 'stylesheet';
+
+      // Append link to head.
+      const head = document.querySelector('head');
+      head.appendChild(styles);
+    }
+  }
+
   /**
    * Handle getting screenshot data.
    *
@@ -73,36 +86,33 @@ function App(options = {}) {
       configure(IBMColors.palettes);
     }
 
-    if (!isAppActive) {
-      activate();
-    }
+    activate();
   }
 
   /**
-   * Request extension to send new screenshot data.
+   * Request extension to send new screen shot data.
    *
    * @callback
    */
   function refresh() {
     removeUI();
-    requestScreenshotFunc(appendUI);
+    setTimeout(requestScreenshot, 0);
   }
 
 
   /**
    * Activate application by adding event listeners and showing the UI.
    */
   function activate() {
-    document.addEventListener('mousemove', move);
-    document.addEventListener('click', readColor);
-    document.addEventListener('keyup', handleKeyCommand);
-    document.addEventListener('scroll', refresh);
-    window.addEventListener('resize', refresh);
-
-    isAppActive = true;
-    appendChildren(ui, loupe.element, colorBox.element);
-    appendChildren(APP, ui);
-    appendUI();
+    if (!document.body.contains(document.getElementById(PREFIX))) {
+      document.addEventListener('mousemove', move);
+      document.addEventListener('click', readColor);
+      document.addEventListener('keyup', handleKeyCommand);
+      document.addEventListener('scroll', deBounceRefresh);
+      window.addEventListener('resize', deBounceRefresh);
+
+      appendUI();
+    }
   }
 
 
@@ -113,10 +123,9 @@ function App(options = {}) {
     document.removeEventListener('mousemove', move);
     document.removeEventListener('click', readColor);
     document.removeEventListener('keyup', handleKeyCommand);
-    document.removeEventListener('scroll', refresh);
-    window.removeEventListener('resize', refresh);
+    document.removeEventListener('scroll', deBounceRefresh);
+    window.removeEventListener('resize', deBounceRefresh);
 
-    isAppActive = false;
     removeUI();
   }
 
@@ -125,6 +134,8 @@ function App(options = {}) {
    * Append main App element from document body.
    */
   function appendUI() {
+    appendChildren(ui, loupe.element, colorBox.element);
+    appendChildren(APP, ui);
     document.body.appendChild(APP);
   }
 
@@ -133,7 +144,7 @@ function App(options = {}) {
    * Remove main App element from document body.
    */
   function removeUI() {
-    if (document.getElementById(PREFIX)) {
+    if (document.body.contains(APP)) {
       document.body.removeChild(APP);
     }
   }
@@ -156,7 +167,7 @@ function App(options = {}) {
     const x = pageX - scrollLeft;
     const y = pageY - scrollTop;
 
-    // Get color data from document Screenshot area based on x and y coordinates.
+    // Get color data from document Screen shot area based on x and y coordinates.
     const colorData = getColorData(screenshot, x, y, SIZE);
 
     // Get height and width of main UI ui.
@@ -201,13 +212,12 @@ function App(options = {}) {
     event.preventDefault();
 
     switch (keyCode) {
-      // Deactivate extension with <esc> key
-      case 27: {
-        deactivate();
+      case KeyCode.ESC: {
+        requestStopApp();
         break;
       }
-      // Reload extension with <R> key
-      case 82: {
+
+      case KeyCode.R: {
         refresh();
         break;
       }

src/scripts/components/Loupe.js

@@ -66,7 +66,7 @@ function getMiddlePixelIndex(size) {
  * Color all of the pixels inside the Loupe.
  *
  * @param {object} loupe Loupe elements object.
- * @param {number[]} colorData Array of RGBA values for an area the size of the Loupe.
+ * @param {Uint8ClampedArray} colorData Array of RGBA values for an area the size of the Loupe.
  * @public
  */
 function updateLoupePixelColors(loupe, colorData) {

src/scripts/components/Screenshot.js

@@ -37,7 +37,6 @@ function width() {
   return window.innerWidth * window.devicePixelRatio;
 };
 
-
 /**
  * Update the canvas and the image the screenshot represents.
  *
@@ -54,7 +53,9 @@ function updateScreenshot(screenshot, imageData) {
   element.width = width();
   image.src = imageData;
 
-  context.drawImage(image, 0, 0);
+  image.addEventListener('load', () => {
+    context.drawImage(image, 0, 0);
+  });
 }
 
 

src/scripts/constants/KeyCode.js

@@ -0,0 +1,9 @@
+/**
+ * Keyboard event key code enumerable.
+ */
+const KeyCode = {
+  ESC: 27,
+  R: 82,
+};
+
+export default KeyCode;

src/scripts/constants/MessageType.js

@@ -0,0 +1,9 @@
+const MessageType = {
+  START_APP: 'START_APP',
+  STOP_APP_REQUEST: 'STOP_APP_REQUEST',
+  STOP_APP: 'STOP_APP',
+  SCREENSHOT_DATA: 'SCREENSHOT_DATA',
+  SCREENSHOT_REQUEST: 'SCREENSHOT_REQUEST',
+};
+
+export default MessageType;

src/scripts/main.js

@@ -1,4 +1,17 @@
 import * as IBMColors from '../../node_modules/ibm-design-colors/source/colors';
 import App from './components/App';
+import { processExtensionMessage } from './utils/chrome';
+import MessageType from './constants/MessageType';
 
-App().configure(IBMColors.palettes);
+let isAppRunning = false;
+
+chrome.runtime.onMessage.addListener(processExtensionMessage(MessageType.START_APP, () => {
+  if (!isAppRunning) {
+    App().configure(IBMColors.palettes);
+    isAppRunning = true;
+  }
+}));
+
+chrome.runtime.onMessage.addListener(processExtensionMessage(MessageType.STOP_APP, () => {
+  isAppRunning = false;
+}));

src/scripts/popup.js

@@ -1,4 +1,4 @@
-import {sendScreenshot} from './utils/chrome';
+import { startApp } from './utils/chrome';
 
 const osCommandKeys = document.querySelectorAll('[data-keyboard="command"]');
 const osIsMac = navigator.platform.includes('Mac');
@@ -7,4 +7,4 @@ for (const key of osCommandKeys) {
   key.textContent = osIsMac ? '⌘' : 'Ctrl';
 }
 
-sendScreenshot();
+startApp();