Auto-complete special tokens

Author: Guillaume Chau

src/devtools/App.vue

@@ -2,6 +2,9 @@
 
 <template>
 <div id="app" :class="{ app: true, dark: isDark }">
+  <datalist id="special-tokens">
+    <option v-for="(value, key) of specialTokens" :key="key" :value="value | specialTokenValue"></option>
+  </datalist>
   <div class="header">
     <img class="logo" src="./assets/logo.png" alt="Vue">
     <span class="message-container">
@@ -47,6 +50,7 @@
 import ComponentsTab from './views/components/ComponentsTab.vue'
 import EventsTab from './views/events/EventsTab.vue'
 import VuexTab from './views/vuex/VuexTab.vue'
+import { SPECIAL_TOKENS } from '../util'
 
 import { mapState } from 'vuex'
 
@@ -64,11 +68,16 @@ export default {
     vuex: VuexTab,
     events: EventsTab
   },
-  computed: mapState({
-    message: state => state.message,
-    tab: state => state.tab,
-    newEventCount: state => state.events.newEventCount
-  }),
+  computed: {
+    ...mapState({
+      message: state => state.message,
+      tab: state => state.tab,
+      newEventCount: state => state.events.newEventCount
+    }),
+    specialTokens () {
+      return SPECIAL_TOKENS
+    }
+  },
   methods: {
     switchTab (tab) {
       bridge.send('switch-tab', tab)
@@ -104,6 +113,9 @@ export default {
     tab () {
       this.$nextTick(this.updateActiveBar)
     }
+  },
+  filters: {
+    specialTokenValue: value => JSON.stringify(value)
   }
 }
 </script>

src/devtools/components/DataField.vue

@@ -23,6 +23,7 @@
           ref="editInput"
           class="edit-input"
           v-model="editedValue"
+          list="special-tokens"
           @keyup.esc="cancelEdit"
           @keyup.enter="submitEdit"
         >

src/util.js

@@ -39,6 +39,12 @@ export const UNDEFINED = '__vue_devtool_undefined__'
 export const INFINITY = '__vue_devtool_infinity__'
 export const NAN = '__vue_devtool_nan__'
 
+export const SPECIAL_TOKENS = {
+  UNDEFINED,
+  INFINITY,
+  NAN
+}
+
 export function stringify (data) {
   return CircularJSON.stringify(data, replacer)
 }