feat: Add settings tab

src/devtools/App.vue

@@ -79,6 +79,17 @@
           >
             Events
           </VueGroupButton>
+          <VueGroupButton
+            v-tooltip="$t('App.settings.tooltip')"
+            :class="{
+              'icon-button': !$responsive.wide
+            }"
+            value="settings"
+            icon-left="settings_applications"
+            class="settings-tab flat"
+          >
+            Settings
+          </VueGroupButton>
         </VueGroup>
 
         <VueButton
@@ -138,6 +149,9 @@ export default {
             } else if (code === 'Digit3') {
               this.$router.push({ name: 'events' })
               return false
+            } else if (code === 'Digit4') {
+              this.$router.push({ name: 'settings' })
+              return false
             } else if (key === 'p' || code === 'KeyP') {
               // Prevent chrome devtools from opening the print modal
               return false

src/devtools/index.js

@@ -13,7 +13,7 @@ import storage from './storage'
 let panelShown = !isChrome
 let pendingAction = null
 
-const isDark = isChrome ? chrome.devtools.panels.themeName === 'dark' : false
+const chromeTheme = isChrome ? chrome.devtools.panels.themeName : undefined
 const isBeta = process.env.RELEASE_CHANNEL === 'beta'
 
 // Capture and log devtool errors when running as actual extension
@@ -96,7 +96,8 @@ function initApp (shell) {
       Vue,
       storage,
       persist: [
-        'classifyComponents'
+        'classifyComponents',
+        'theme'
       ]
     })
 
@@ -161,14 +162,13 @@ function initApp (shell) {
       store,
 
       data: {
-        isDark,
         isBeta
       },
 
       watch: {
-        isDark: {
+        '$shared.theme': {
           handler (value) {
-            if (value) {
+            if (value === 'dark' || (value === 'auto' && chromeTheme === 'dark')) {
               document.body.classList.add('vue-ui-dark-mode')
             } else {
               document.body.classList.remove('vue-ui-dark-mode')

src/devtools/locales/en.js

@@ -9,6 +9,9 @@ export default {
     refresh: {
       tooltip: '[[{{keys.ctrl}}]] + [[{{keys.alt}}]] + [[R]] Force Refresh'
     },
+    settings: {
+      tooltip: '[[{{keys.ctrl}}]] + [[4]] Switch to Settings'
+    },
     vuex: {
       tooltip: '[[{{keys.ctrl}}]] + [[2]] Switch to Vuex'
     }

src/devtools/router.js

@@ -4,6 +4,7 @@ import VueRouter from 'vue-router'
 import ComponentsTab from './views/components/ComponentsTab.vue'
 import VuexTab from './views/vuex/VuexTab.vue'
 import EventsTab from './views/events/EventsTab.vue'
+import SettingsTab from './views/settings/SettingsTab.vue'
 
 Vue.use(VueRouter)
 
@@ -27,6 +28,11 @@ const routes = [
     name: 'events',
     component: EventsTab
   },
+  {
+    path: '/settings',
+    name: 'settings',
+    component: SettingsTab
+  },
   {
     path: '*',
     redirect: '/'

src/devtools/views/settings/GlobalPreferences.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="global-preferences">
+    <VueFormField title="Component Name Format">
+      <VueGroup
+        :value="$shared.classifyComponents"
+        class="extend"
+        @input="$shared.classifyComponents = $event"
+      >
+        <VueGroupButton
+          :value="false"
+          label="kebab-case"
+        />
+        <VueGroupButton
+          :value="true"
+          label="PascalCase"
+        />
+      </VueGroup>
+    </VueFormField>
+
+    <VueFormField title="Theme">
+      <VueGroup
+        :value="$shared.theme"
+        class="extend"
+        @input="$shared.theme = $event"
+      >
+        <VueGroupButton
+          value="auto"
+          label="Auto"
+        />
+        <VueGroupButton
+          value="dark"
+          label="Dark"
+        />
+        <VueGroupButton
+          value="light"
+          label="Light"
+        />
+      </VueGroup>
+    </VueFormField>
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+.global-preferences
+  display flex
+  flex-wrap wrap
+  padding 1rem 1.5rem
+
+  > *
+    flex-basis 300px
+    margin 0 .5rem 1rem .5rem
+</style>-->

src/devtools/views/settings/SettingsTab.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="grid">
+    <GlobalPreferences />
+  </div>
+</template>
+
+<script>
+import GlobalPreferences from './GlobalPreferences.vue'
+import { mapState } from 'vuex'
+
+export default {
+  components: { GlobalPreferences },
+
+  computed: mapState('events', [
+    'enabled'
+  ])
+}
+</script>

src/shared-data.js

@@ -1,7 +1,8 @@
 // Initial state
 const internalSharedData = {
   openInEditorHost: '/',
-  classifyComponents: true
+  classifyComponents: true,
+  theme: 'auto'
 }
 
 // ---- INTERNALS ---- //