[popup] Popup fixes and TS conversion

- convert Popup to TypeScript
  - move imports directly to popup.ts
  - remove groupEnd arguments which are not allowed
  - add some typing fixes
  - allow ES module interop and synthetic imports in tsconfig
  - remove splitChunks which is breaking output currently
- replace non-maintained pusher.color.js with tinycolor
- remove unused code
- do not display color name and hex3 when there is no exact match: Fixes #192

package.json

@@ -42,8 +42,8 @@
     "webpack-cli": "^4.9.2",
     "webpack-merge": "^5.8.0"
   },
+  "packageManager": "[email protected]",
   "dependencies": {
-    "color": "^3.2.1"
-  },
-  "packageManager": "[email protected]"
+    "@ctrl/tinycolor": "^3.4.1"
+  }
 }

public/button-about.html

@@ -69,10 +69,10 @@ <h3>Eye Dropper is using these awesome libraries</h3>
             <a
                 class="ed-external link"
                 href="#"
-                data-url="https://bitbucket.org/bcronin/pusher.color.git"
-                >pusher.color.js</a
+                data-url="https://github.com/scttcper/tinycolor"
+                >tinycolor</a
             >
-            by PusherTech
+            by Scott Cooper
         </li>
         <li>
             <a

public/popup.html

@@ -10,8 +10,6 @@
         <link type="text/css" rel="stylesheet" href="/inc/color-picker/color-picker.css" />
         <link rel="stylesheet" href="/css/popup.css" />
 
-        <script src="/inc/pusher.color.min.js"></script>
-        <script src="/inc/msc/msc-script.js"></script>
         <script src="/js/popup.js" async></script>
     </head>
 

src/clipboard.ts

@@ -1,6 +1,3 @@
-import { ColorModel, RgbNotation } from './color'
-import type Color from 'color'
-
 const copyToClipboard = async (text: string) => {
     try {
         await navigator.clipboard.writeText(text)
@@ -9,20 +6,4 @@ const copyToClipboard = async (text: string) => {
     }
 }
 
-const clipColor = ({
-    color,
-    model,
-    format,
-}: {
-    color: Color
-    model: ColorModel
-    format: RgbNotation
-}) => {
-    if (model == ColorModel.RGB) {
-        const prefix = format === RgbNotation.HexadecimalNoGrid ? '' : '#'
-        const colorToClip = `${prefix}${color.rgbhex}`
-        copyToClipboard(colorToClip)
-    }
-}
-
-export { copyToClipboard, clipColor }
+export { copyToClipboard }

src/ed-color.ts

@@ -0,0 +1,16 @@
+import { TinyColor } from '@ctrl/tinycolor'
+
+export class EdColor extends TinyColor {
+    toHex3String(): string | false {
+        const hex = this.toHex(true)
+        return hex.length === 3 ? '#' + hex : false
+    }
+
+    toHslString(): string {
+        return super.toHslString().replace(/\s/g, "")
+    }
+
+    toRgbString(): string {
+        return super.toRgbString().replace(/\s/g, "")
+    }
+}

src/popup.js → src/popup.ts

@@ -1,3 +1,7 @@
+import { EdColor } from './ed-color'
+import { mscConfirm, mscPrompt } from 'medium-style-confirm'
+import type CP from '../public/inc/color-picker/color-picker.js'
+
 const NEED_BG_VERSION = 18 // minimum version of bg script we need
 
 let bgPage = null
@@ -50,7 +54,7 @@ function init() {
         gotBgPage(backgroundPage)
     })
 
-    console.groupEnd('popup init')
+    console.groupEnd()
 
     sec_content = document.getElementById('content')
     sec_color_boxes = document.getElementById('color-boxes')
@@ -59,17 +63,6 @@ function init() {
     badge.style.display = 'none'
 }
 
-/**
- * Workaround around wrong output from color library
- *
- * FIXME: fix directly in library later
- *
- */
-function hslFixed(hsl_html) {
-    const parts = hsl_html.split(/[,)]/)
-    return `${parts[0]},${parts[1]}%,${parts[2]}%)`
-}
-
 function initPlus() {
     let colors_palette_change = document.getElementById('colors-palette-change')
 
@@ -97,7 +90,9 @@ function initPlus() {
  * Init links on tabs
  */
 function initTabs() {
-    for (let n of document.getElementsByClassName('ed-tab')) {
+    const tabs = document.getElementsByClassName('ed-tab') as HTMLCollectionOf<HTMLElement>
+
+    for (let n of tabs) {
         n.onclick = () => {
             switchTab(n.id)
         }
@@ -160,7 +155,7 @@ function gotBgPage(backgroundPage) {
         bgPageReady()
     }
 
-    console.groupEnd('popup init phase 2')
+    console.groupEnd()
 }
 
 function bgPageReady() {
@@ -300,7 +295,9 @@ function drawColorHistory() {
     let instructions_el = document.getElementById('colors-history-instructions')
     let toolbar_el = document.getElementById('colors-history-toolbar')
 
-    let history_tool_noempty_els = document.getElementsByClassName('eb-history-tool-noempty')
+    const history_tool_noempty_els = document.getElementsByClassName(
+        'eb-history-tool-noempty',
+    ) as HTMLCollectionOf<HTMLElement>
 
     // first load history from palette and assemble html
     let html = ''
@@ -311,7 +308,10 @@ function drawColorHistory() {
     history_el.innerHTML = html
 
     // attach javascript onmouseover and onclick events
-    for (let n of document.getElementsByClassName('colors-history-square')) {
+    const squares = document.getElementsByClassName(
+        'colors-history-square',
+    ) as HTMLCollectionOf<HTMLElement>
+    for (let n of squares) {
         n.onmouseover = () => {
             colorBox('new', n.dataset.color)
         }
@@ -325,12 +325,12 @@ function drawColorHistory() {
 
     if (palette.colors.length > 0) {
         instructions_el.innerHTML = 'Hover over squares to preview.'
-        for (n of history_tool_noempty_els) {
+        for (let n of history_tool_noempty_els) {
             n.style.display = ''
         }
     } else {
         instructions_el.innerHTML = 'History is empty, try to pick some colors first.'
-        for (n of history_tool_noempty_els) {
+        for (let n of history_tool_noempty_els) {
             n.style.display = 'none'
         }
     }
@@ -406,7 +406,8 @@ function drawColorPalettes() {
     sec_color_palette.innerHTML = palettes
 
     // Support for palette click
-    for (let n of document.getElementsByClassName('ed-palette')) {
+    const paletes = document.getElementsByClassName('ed-palette') as HTMLCollectionOf<HTMLElement>
+    for (let n of paletes) {
         n.onclick = () => {
             let palette = n.dataset.palette
             console.info(`Asked to switch to palette ${palette}`)
@@ -417,7 +418,10 @@ function drawColorPalettes() {
     }
 
     // Support for palete destroy click
-    for (let n of document.getElementsByClassName('ed-palette-destroy')) {
+    const palette_destroys = document.getElementsByClassName(
+        'ed-palette-destroy',
+    ) as HTMLCollectionOf<HTMLElement>
+    for (let n of palette_destroys) {
         n.onclick = () => {
             let palette = n.dataset.palette
             console.info(`Asked to destroy palette ${palette}`)
@@ -474,14 +478,13 @@ function exportHistory() {
             ).slice(-2)}`
 
             csv += `"${color.h}","${datestring}","${bgPage.bg.color_sources[color.s]}"`
-            // FIXME: add name ,"${color.n}"
 
-            color = pusher.color(color.h)
+            color = new EdColor(color.h)
             let formats = [
-                color.hex3(),
-                hslFixed(color.html('hsl')),
-                color.html('rgb'),
-                color.html('keyword'),
+                color.toHex3String(),
+                color.toHslString(),
+                color.toRgbString(),
+                color.toName(),
             ]
             for (let format of formats) {
                 csv += `,"${format}"`
@@ -502,12 +505,12 @@ function exportHistory() {
 
             csv += `"${color.h}"`
 
-            color = pusher.color(color.h)
+            color = new EdColor(color.h)
             let formats = [
-                color.hex3(),
-                hslFixed(color.html('hsl')),
-                color.html('rgb'),
-                color.html('keyword'),
+                color.toHex3String(),
+                color.toHslString(),
+                color.toRgbString(),
+                color.toName(),
             ]
             for (let format of formats) {
                 csv += `,"${format}"`
@@ -520,7 +523,7 @@ function exportHistory() {
 
     console.group('csvExport')
     console.log(csv)
-    console.groupEnd('csvExport')
+    console.groupEnd()
 
     let link = document.createElement('a')
     link.setAttribute('href', data)
@@ -573,7 +576,10 @@ function switchTab(tabId) {
 function loadTab(tabId) {
     console.group('tabSwitch')
     let content_found = false
-    for (let n of document.getElementsByClassName('content-page')) {
+    const content_pages = document.getElementsByClassName(
+        'content-page',
+    ) as HTMLCollectionOf<HTMLElement>
+    for (let n of content_pages) {
         console.info(`found tab content ${n.id}`)
         if (n.id === `${tabId}-content`) {
             n.style.display = 'block'
@@ -599,7 +605,7 @@ function loadTab(tabId) {
                     loadColorPicker()
                 }
             } else {
-                console.error(`Error loading ${tab.id} content through AJAX: ${request.status}`)
+                console.error(`Error loading ${tabId} content through AJAX: ${request.status}`)
             }
         }
 
@@ -610,28 +616,32 @@ function loadTab(tabId) {
             showColorPicker()
         }
     }
-    console.groupEnd('tabSwitch')
+    console.groupEnd()
 }
 
 function colorBox(type, color) {
     if (boxes[type]) {
-        color = pusher.color(color)
+        color = new EdColor(color)
 
         let formats = [
-            color.hex6(),
-            color.hex3(),
-            color.html('keyword'),
-            hslFixed(color.html('hsl')),
-            color.html('rgb'),
+            color.toHexString(),
+            color.toHex3String(),
+            color.toName(),
+            color.toHslString(),
+            color.toRgbString(),
         ]
 
         let html = ''
         for (let value of formats) {
-            html += `<span class="mr1 bg-white br1 ph1 mb1 dib"><code>${value}</code></span>`
+            if (value) {
+                html += `<span class="mr1 bg-white br1 ph1 mb1 dib"><code>${value}</code></span>`
+            } else {
+                html += `<span class="mr1 br1 ph1 mb1 dib">&nbsp;&nbsp;&nbsp;&nbsp;</span>`
+            }
         }
         boxes[type].innerHTML = html
 
-        boxes[type].style = `background: ${color.hex6()}`
+        boxes[type].style = `background: ${color.toHexString()}`
     }
 }
 
@@ -680,7 +690,7 @@ function showColorPicker() {
 
     // we need to update picker also when playing with input field
     // we need try/catch because when hand editing input field, color can be
-    // invalid and pusher library can't handle wrong syntax
+    // invalid and color library can't handle wrong syntax
     function update_from_input() {
         try {
             let color = cpicker.target.value.toLowerCase()

tsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "module": "commonjs",
     "target": "es6",
     "noImplicitAny": false,

webpack/webpack.common.js

@@ -17,12 +17,6 @@ module.exports = {
         path: path.join(__dirname, '../dist/js'),
         filename: '[name].js',
     },
-    optimization: {
-        splitChunks: {
-            name: 'vendor',
-            chunks: 'initial',
-        },
-    },
     module: {
         rules: [
             {