adds live page preview on hover :)

package.json

@@ -16,11 +16,13 @@
     },
     "license": "MIT",
     "dependencies": {
+        "@popperjs/core": "^2.4.0",
         "chrono-node": "^1.4.2",
         "dateformat": "^3.0.3",
         "react": "^16.12.0",
         "react-dom": "^16.12.0",
         "react-hotkeys": "^2.0.0",
+        "react-popper-tooltip": "^2.11.1",
         "react-redux": "^7.1.3",
         "redux": "^4.0.5",
         "styled-components": "^5.0.0",

src/manifest.json

@@ -41,6 +41,7 @@
                 "inc-dec-value.js",
                 "dispatcher.js",
                 "block-manipulation.js",
+                "live-preview.js",
                 "custom-css.js",
                 "fuzzy_date.js",
                 "create-block-demo.js"

src/ts/components/Tooltip.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import TooltipTrigger, {ChildrenArg, TooltipArg} from 'react-popper-tooltip'
+import styled from 'styled-components'
+
+type Props = {
+    children: any
+    tooltip?: string
+}
+const StyledTooltipContent = styled('div')`
+    max-width: 140px;
+    background-color: #111;
+    color: white;
+    padding: 10px;
+`
+function renderTooltipContent(tooltip: string) {
+    return ({tooltipRef, getTooltipProps}: TooltipArg) => (
+        <StyledTooltipContent
+            {...getTooltipProps({
+                ref: tooltipRef,
+                className: 'tooltip-container',
+            })}
+        >
+            {tooltip}
+        </StyledTooltipContent>
+    )
+}
+function renderTooltipTrigger(children: any) {
+    return ({getTriggerProps, triggerRef}: ChildrenArg) => (
+        <span
+            {...getTriggerProps({
+                ref: triggerRef,
+                className: 'trigger',
+            })}
+        >
+            {children}
+        </span>
+    )
+}
+
+const Tooltip = ({children, tooltip, ...props}: Props) => {
+    if (!tooltip) {
+        return children
+    }
+    return (
+        <TooltipTrigger {...props} tooltip={renderTooltipContent(tooltip)}>
+            {renderTooltipTrigger(children)}
+        </TooltipTrigger>
+    )
+}
+
+export default Tooltip

src/ts/components/WarningIcon.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import Tooltip from './Tooltip'
+
+type WarningIconProps = {
+    warning?: string
+}
+const IconWrap = styled('div')`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 20px;
+    background-color: rgba(255, 165, 0, 0.1);
+    width: 20px;
+    border-radius: 4px;
+
+    &:hover {
+        background-color: rgba(255, 165, 0, 0.25);
+    }
+`
+
+const WarningIconSvg = (props: {fill: string}) => {
+    return (
+        <svg width={'12px'} viewBox="0 0 640 640" {...props}>
+            <title />
+            <path d="M93.76 546.24C33.487 487.969-3.932 406.389-3.932 316.067c0-176.731 143.269-320 320-320 90.321 0 171.902 37.42 230.086 97.602l.086.09c55.578 57.487 89.828 135.897 89.828 222.307 0 176.731-143.269 320-320 320-86.41 0-164.821-34.249-222.398-89.914l.09.086zM288 160v192h64V160h-64zm0 256v64h64v-64h-64z" />
+        </svg>
+    )
+}
+export const WarningIcon = (props: WarningIconProps) => {
+    if (!props.warning) {
+        return null
+    }
+    return (
+        <Tooltip tooltip={props.warning}>
+            <IconWrap>
+                <WarningIconSvg fill="orange" />
+            </IconWrap>
+        </Tooltip>
+    )
+}

src/ts/containers/Settings/Home.tsx

@@ -6,6 +6,7 @@ import {setFeatureId} from '../../background/store/settings/actions'
 import {Feature} from '../../utils/settings'
 
 import {Checkbox} from '../../components/Checkbox'
+import {WarningIcon} from '../../components/WarningIcon'
 
 type HomeProps = {features: Feature[]}
 export const Home = ({features}: HomeProps) => {
@@ -33,6 +34,7 @@ export const Home = ({features}: HomeProps) => {
                 <span className="title">{feature.name}</span>
                 <span style={{color: '#a7b6c2'}}>]]</span>
             </FeatureName>
+            <WarningIcon warning={feature.warning} />
         </FeatureNameContainer>
     )
 
@@ -100,10 +102,11 @@ const FeatureListElement = styled('li')`
         }
     }
 `
-
-const FeatureName = styled('div')`
+const FeatureName = styled('span')`
     color: #137cbd;
+    padding: 0 0 0 2px;
     font-size: 17px;
+    margin-right: 8px;
 `
 
 const FeatureNameContainer = styled('div')`

src/ts/contentScripts/custom-css/index.tsx

@@ -7,16 +7,16 @@ export const config: Feature = {
     settings: [{type: 'large_string', id: 'css'}],
 }
 
-Settings.isActive('custom-css').then(active => {
+Settings.isActive(config.id).then(active => {
     if (active) {
-        Settings.get('custom-css', 'css').then((value: string) => {
+        Settings.get(config.id, 'css').then((value: string) => {
             setCss(value)
         })
     }
 })
 
 browser.runtime.onMessage.addListener(async message => {
-    if (message?.featureId === 'custom-css') {
+    if (message?.featureId === config.id) {
         setCss(message.value)
     }
 })

src/ts/contentScripts/features.ts

@@ -4,6 +4,7 @@ import {config as incDec} from './inc-dec-value/index'
 import {config as customCss} from './custom-css/index'
 import {config as srs} from './srs/index'
 import {config as blockManipulation} from './block-manipulation'
+import {config as livePreview} from './live-preview'
 import {config as estimate} from './estimates/index'
 import {config as navigation} from './navigation/index'
 import {filterAsync, mapAsync} from '../utils/async'
@@ -16,6 +17,7 @@ export const Features = {
         estimate,
         customCss,
         navigation,
+        livePreview,
     ]),
 
     isActive: Settings.isActive,