feat: add a switch for debug mode

DimensionDev · Sep 23, 2019 · 310f00b · 310f00b
1 parent 79f40d6
commit 310f00b
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 27 deletions.
diff --git a/src/components/shared-settings/debugMode.ts b/src/components/shared-settings/debugMode.ts
@@ -0,0 +1,19 @@
+import { ValueRef } from '@holoflows/kit/es/util/ValueRef'
+import { MessageCenter } from '../../utils/messages'
+export const debugModeSetting = new ValueRef(false)
+update()
+
+debugModeSetting.addListener(newVal => {
+    MessageCenter.emit('settingsUpdated', undefined)
+    browser.storage.local.set({
+        debugMode: newVal,
+    })
+})
+
+MessageCenter.on('settingsUpdated', update)
+
+function update() {
+    if (typeof browser === 'object') {
+        browser.storage.local.get().then(value => (debugModeSetting.value = !!value.debugMode))
+    }
+}
diff --git a/src/extension/options-page/Developer.tsx b/src/extension/options-page/Developer.tsx
@@ -1,10 +1,18 @@
-import React from 'react'
-import { TextField, Button } from '@material-ui/core'
+import {
+    TextField,
+    Button,
+    ListItem,
+    List,
+    ListSubheader,
+    ListItemText,
+    ListItemSecondaryAction,
+} from '@material-ui/core'
 import { PersonIdentifier, Identifier } from '../../database/type'
 import { deconstructPayload } from '../../utils/type-transform/Payload'
 import Services from '../service'
 import { useCurrentIdentity } from '../../components/DataSource/useActivatedUI'
 import { Person } from '../../database'
+import React from 'react'
 
 async function swallowGoo(me: Person | null) {
     const boxElem = document.querySelector('#raw-box') as HTMLTextAreaElement
@@ -48,23 +56,28 @@ async function assimilateGoo(content: string, me: Person | null): Promise<string
 const DevPage = () => {
     const me = useCurrentIdentity(false)
     return (
-        <main className="container">
-            <TextField
-                id="raw-box"
-                label="Magic box"
-                style={{ margin: 8 }}
-                placeholder="🔒abc🔒|foo.bar/arisu or 🎼2/4|xyz:||foo.bar/arisu"
-                helperText="Enter prove/message string here"
-                fullWidth
-                margin="normal"
-                InputLabelProps={{
-                    shrink: true,
-                }}
-            />
-            <Button variant="contained" onClick={() => swallowGoo(me)}>
-                Assimilate
-            </Button>
-        </main>
+        <List subheader={<ListSubheader>Developer Settings</ListSubheader>}>
+            <ListItem>
+                <ListItemText
+                    primary={
+                        <TextField
+                            id="raw-box"
+                            label="Enter prove message or encrypted payload here"
+                            placeholder="🔒abc🔒|example.com/username or 🎼3/4|xyz:||example.com/username"
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true,
+                            }}
+                        />
+                    }
+                />
+                <ListItemSecondaryAction>
+                    <Button variant="contained" onClick={() => swallowGoo(me)}>
+                        Assimilate
+                    </Button>
+                </ListItemSecondaryAction>
+            </ListItem>
+        </List>
     )
 }
 

diff --git a/src/extension/popup-page/index.tsx b/src/extension/popup-page/index.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
 
 import { ThemeProvider } from '@material-ui/styles'
 import { MaskbookLightTheme } from '../../utils/theme'
-import { makeStyles, useTheme } from '@material-ui/core/styles'
-import { Button } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import { Button, ListItem, ListItemText, ListItemSecondaryAction, Switch, List } from '@material-ui/core'
 import '../../setup.ui'
 import { SSRRenderer } from '../../utils/SSRRenderer'
+import { useValueRef } from '../../utils/hooks/useValueRef'
+import { debugModeSetting } from '../../components/shared-settings/debugMode'
 
 const useStyles = makeStyles(theme => ({
     button: {
@@ -19,8 +20,8 @@ const useStyles = makeStyles(theme => ({
     },
     logo: {
         width: 'auto',
-        height: '54px',
-        margin: '0 1rem -10px',
+        height: '32px',
+        margin: '20px auto',
     },
     input: {
         display: 'none',
@@ -30,20 +31,42 @@ const useStyles = makeStyles(theme => ({
 SSRRenderer(<Popup />)
 export function Popup() {
     const classes = useStyles()
-    const theme = useTheme()
+    const debugOn = useValueRef(debugModeSetting)
 
     return (
         <ThemeProvider theme={MaskbookLightTheme}>
-            <style>{'body {overflow-x: hidden; margin: 0 auto;}'}</style>
+            <style>{`
+    body {
+        overflow-x: hidden;
+        margin: 0 auto;
+        min-width: 30em;
+    }`}</style>
             <main className={classes.container}>
-                <img className={classes.logo} src="https://maskbook.com/img/maskbook--logotype-blue.png" />
+                <img className={classes.logo} src="https://dimensiondev.github.io/Maskbook-VI/MB--Text--Blue.svg" />
                 <Button
                     variant="contained"
                     color="primary"
                     className={classes.button}
                     onClick={e => browser.runtime.openOptionsPage()}>
                     Options
                 </Button>
+                <List>
+                    <ListItem>
+                        <ListItemText
+                            id="settings-debug"
+                            primary="Enable debug mode"
+                            secondary="Enable this will display additional information on the Maskbook UI to help debugging"
+                        />
+                        <ListItemSecondaryAction>
+                            <Switch
+                                inputProps={{ 'aria-labelledby': 'settings-debug' }}
+                                edge="end"
+                                checked={debugOn}
+                                onChange={(e, newValue) => (debugModeSetting.value = newValue)}
+                            />
+                        </ListItemSecondaryAction>
+                    </ListItem>
+                </List>
             </main>
         </ThemeProvider>
     )

diff --git a/src/utils/messages.ts b/src/utils/messages.ts
@@ -4,6 +4,7 @@ import Serialization from './type-transform/Serialization'
 
 interface UIEvent {
     closeActiveTab: undefined
+    settingsUpdated: undefined
 }
 interface KeyStoreEvent {
     newPerson: Person