feat: Add Milliseconds Display Preference and Remove Duplicate Filter… (vuejs#782)

* Add Milliseconds Option

* Persist timeFormat changes

* refator: use a switch


Co-authored-by: Alex Proujansky <aproujansky@horizonmedia.com>
Co-authored-by: Guillaume Chau <alphadelta.fg@gmail.com>

Author: 3 people

src/devtools/filters.js

@@ -1,3 +1,4 @@
-export function formatTime (timestamp) {
-  return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0]
+export function formatTime (timestamp, format) {
+  const date = new Date(timestamp)
+  return `${date.toString().match(/\d\d:\d\d:\d\d/)[0]}${format === 'ms' ? '.' + date.getMilliseconds() : ''}`
 }

src/devtools/index.js

@@ -10,6 +10,7 @@ import SharedData, { init as initSharedData, destroy as destroySharedData } from
 import { init as initStorage } from 'src/storage'
 import VuexResolve from './views/vuex/resolve'
 
+// register filters
 for (const key in filters) {
   Vue.filter(key, filters[key])
 }
@@ -191,11 +192,6 @@ function initApp (shell) {
       store.commit('routes/CHANGED', parse(payload))
     })
 
-    // register filters
-    Vue.filter('formatTime', function (timestamp) {
-      return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0]
-    })
-
     bridge.on('events:reset', () => {
       store.commit('events/RESET')
     })

src/devtools/views/events/EventsHistory.vue

@@ -68,7 +68,7 @@
             <span class="component-name">{{ displayComponentName(event.instanceName) }}</span>
             <span>&gt;</span>
           </span>
-          <span class="time">{{ event.timestamp | formatTime }}</span>
+          <span class="time">{{ event.timestamp | formatTime($shared.timeFormat) }}</span>
         </div>
       </template>
     </RecycleScroller>

src/devtools/views/perf/FramerateGraph.vue

@@ -69,8 +69,6 @@
 import { mapState, mapGetters } from 'vuex'
 import * as d3 from 'd3'
 import { FPS_MARKERS_PRECISION } from './module'
-import { formatTime } from 'filters'
-
 import SplitPane from 'components/SplitPane.vue'
 import FramerateMarkerInspector from './FramerateMarkerInspector.vue'
 
@@ -167,7 +165,7 @@ export default {
     getBarTootip (metric) {
       return `
       <div>${metric.value} frames per second</div>
-      <div style="color:#999;">${formatTime(metric.time)}</div>
+      <div style="color:#999;">${this.$options.filters.formatTime(metric.time, this.$shared.timeFormat)}</div>
       `
     },
 

src/devtools/views/perf/FramerateMarkerInspector.vue

@@ -35,7 +35,7 @@
               {{ entry.label }}
             </div>
             <div class="time">
-              {{ entry.timestamp | formatTime }}
+              {{ entry.timestamp | formatTime($shared.timeFormat) }}
             </div>
           </div>
         </div>

src/devtools/views/router/RouterHistory.vue

@@ -57,7 +57,7 @@
           @click="inspect(routeChanges.indexOf(route))"
         >
           <span class="route-name">{{ route.to.path }}</span>
-          <span class="time">{{ route.timestamp | formatTime }}</span>
+          <span class="time">{{ route.timestamp | formatTime($shared.timeFormat) }}</span>
           <span
             v-if="route.to.redirectedFrom"
             class="label redirect"

src/devtools/views/settings/GlobalPreferences.vue

@@ -79,6 +79,15 @@
       </template>
     </VueFormField>
 
+    <VueFormField title="Time Format">
+      <VueSwitch
+        :value="$shared.timeFormat === 'ms'"
+        @update="value => $shared.timeFormat = value ? 'ms' : 'default'"
+      >
+        Display milliseconds
+      </VueSwitch>
+    </VueFormField>
+
     <VueFormField title="Detected Vue message">
       <VueSwitch v-model="$shared.logDetected">
         Display in browser console

src/devtools/views/vuex/VuexHistory.vue

@@ -80,7 +80,7 @@
             </a>
           </span>
           <span class="time">
-            {{ lastCommit | formatTime }}
+            {{ lastCommit | formatTime($shared.timeFormat) }}
           </span>
           <span
             v-if="activeIndex === -1"
@@ -144,7 +144,7 @@
             v-tooltip="entry.timestamp"
             class="time"
           >
-            {{ entry.timestamp | formatTime }}
+            {{ entry.timestamp | formatTime($shared.timeFormat) }}
           </span>
           <span
             v-if="isActive(index, entry)"
@@ -180,13 +180,6 @@ export default {
     ActionHeader,
     ScrollPane
   },
-
-  filters: {
-    formatTime (timestamp) {
-      return (new Date(timestamp)).toString().match(/\d\d:\d\d:\d\d/)[0]
-    }
-  },
-
   mixins: [
     Keyboard({
       onKeyDown ({ key, modifiers }) {

src/shared-data.js

@@ -6,6 +6,7 @@ const internalSharedData = {
   componentNameStyle: 'class',
   theme: 'auto',
   displayDensity: 'low',
+  timeFormat: 'default',
   recordVuex: true,
   cacheVuexSnapshotsEvery: 50,
   cacheVuexSnapshotsLimit: 10,
@@ -25,7 +26,8 @@ const persisted = [
   'editableProps',
   'logDetected',
   'vuexNewBackend',
-  'vuexAutoload'
+  'vuexAutoload',
+  'timeFormat'
 ]
 
 // ---- INTERNALS ---- //