added ability to pick the style of highlighting

src/services/user_highlighter/user_highlighter.js

@@ -1,18 +1,40 @@
 import { hex2rgb } from '../color_convert/color_convert.js'
-const highlightStyle = (color) => {
+const highlightStyle = (prefs) => {
+  if (prefs === undefined) {
+    return
+  }
+  const {color, type} = prefs
+  console.log(arguments)
   if (typeof color !== 'string') return
   const rgb = hex2rgb(color)
+  const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`
   const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
   const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
-  return {
-    backgroundImage: [
-      'repeating-linear-gradient(-45deg,',
-      `${tintColor} ,`,
-      `${tintColor} 20px,`,
-      `${tintColor2} 20px,`,
-      `${tintColor2} 40px`
-    ].join(' '),
-    backgroundPosition: '0 0'
+  if (type === 'striped') {
+    return {
+      backgroundImage: [
+        'repeating-linear-gradient(-45deg,',
+        `${tintColor} ,`,
+        `${tintColor} 20px,`,
+        `${tintColor2} 20px,`,
+        `${tintColor2} 40px`
+      ].join(' '),
+      backgroundPosition: '0 0'
+    }
+  } else if (type === 'solid') {
+    return {
+      backgroundColor: tintColor2
+    }
+  } else if (type === 'side') {
+    return {
+      backgroundImage: [
+        'linear-gradient(to right,',
+        `${solidColor} ,`,
+        `${solidColor} 2px,`,
+        `transparent 6px`
+      ].join(' '),
+      backgroundPosition: '0 0'
+    }
   }
 }