From fab8bff57ce224984e2ac2278ad9ccfa8387af23 Mon Sep 17 00:00:00 2001
From: Alex Proujansky <aprouja1@gmail.com>
Date: Sun, 23 Sep 2018 12:53:08 -0400
Subject: [PATCH 1/3] Add Milliseconds Option

---
 src/devtools/filters.js                         |  5 +++--
 src/devtools/index.js                           |  6 +-----
 src/devtools/views/events/EventsHistory.vue     |  2 +-
 src/devtools/views/perf/FramerateGraph.vue      |  4 +---
 .../views/perf/FramerateMarkerInspector.vue     |  2 +-
 src/devtools/views/router/RouterHistory.vue     |  2 +-
 .../views/settings/GlobalPreferences.vue        | 17 +++++++++++++++++
 src/devtools/views/vuex/VuexHistory.vue         | 11 ++---------
 src/shared-data.js                              |  1 +
 9 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/devtools/filters.js b/src/devtools/filters.js
index cf7137217..08f976e53 100644
--- a/src/devtools/filters.js
+++ b/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() : ''}`
 }
diff --git a/src/devtools/index.js b/src/devtools/index.js
index 3d764fbad..28e69e47c 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -10,6 +10,7 @@ import SharedData, { init as initSharedData, destroy as destroySharedData } from
 import storage from './storage'
 import VuexResolve from './views/vuex/resolve'
 
+// register filters
 for (const key in filters) {
   Vue.filter(key, filters[key])
 }
@@ -183,11 +184,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')
     })
diff --git a/src/devtools/views/events/EventsHistory.vue b/src/devtools/views/events/EventsHistory.vue
index ec90904f4..7e9f51ce3 100644
--- a/src/devtools/views/events/EventsHistory.vue
+++ b/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>
     </recycle-list>
diff --git a/src/devtools/views/perf/FramerateGraph.vue b/src/devtools/views/perf/FramerateGraph.vue
index 70a0ffa02..e6c0c2682 100644
--- a/src/devtools/views/perf/FramerateGraph.vue
+++ b/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>
       `
     },
 
diff --git a/src/devtools/views/perf/FramerateMarkerInspector.vue b/src/devtools/views/perf/FramerateMarkerInspector.vue
index be48e9a88..4f200d00b 100644
--- a/src/devtools/views/perf/FramerateMarkerInspector.vue
+++ b/src/devtools/views/perf/FramerateMarkerInspector.vue
@@ -32,7 +32,7 @@
             @click="selectedEntry = entry"
           >
             <div class="label">{{ entry.label }}</div>
-            <div class="time">{{ entry.timestamp | formatTime }}</div>
+            <div class="time">{{ entry.timestamp | formatTime($shared.timeFormat) }}</div>
           </div>
         </div>
       </div>
diff --git a/src/devtools/views/router/RouterHistory.vue b/src/devtools/views/router/RouterHistory.vue
index 7740a32ab..1be863ab8 100644
--- a/src/devtools/views/router/RouterHistory.vue
+++ b/src/devtools/views/router/RouterHistory.vue
@@ -57,7 +57,7 @@
           @click="inspect(filteredRoutes.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"
diff --git a/src/devtools/views/settings/GlobalPreferences.vue b/src/devtools/views/settings/GlobalPreferences.vue
index e551e0b15..19667d3a6 100644
--- a/src/devtools/views/settings/GlobalPreferences.vue
+++ b/src/devtools/views/settings/GlobalPreferences.vue
@@ -58,5 +58,22 @@
         />
       </VueGroup>
     </VueFormField>
+
+    <VueFormField title="Time Format">
+      <VueGroup
+        :value="$shared.timeFormat"
+        class="extend"
+        @input="$shared.timeFormat = $event"
+      >
+        <VueGroupButton
+          value="default"
+          label="Default"
+        />
+        <VueGroupButton
+          value="ms"
+          label="Include ms"
+        />
+      </VueGroup>
+    </VueFormField>
   </div>
 </template>
diff --git a/src/devtools/views/vuex/VuexHistory.vue b/src/devtools/views/vuex/VuexHistory.vue
index b9bea2cc5..af61e31e4 100644
--- a/src/devtools/views/vuex/VuexHistory.vue
+++ b/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"
@@ -140,7 +140,7 @@
             v-tooltip="entry.timestamp"
             class="time"
           >
-            {{ entry.timestamp | formatTime }}
+            {{ entry.timestamp | formatTime($shared.timeFormat) }}
           </span>
           <span
             v-if="isActive(index, entry)"
@@ -176,13 +176,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 }) {
diff --git a/src/shared-data.js b/src/shared-data.js
index 0ad794f23..8acf44db1 100644
--- a/src/shared-data.js
+++ b/src/shared-data.js
@@ -4,6 +4,7 @@ const internalSharedData = {
   classifyComponents: true,
   theme: 'auto',
   displayDensity: 'low',
+  timeFormat: 'default',
   recordVuex: true,
   cacheVuexSnapshotsEvery: 50,
   cacheVuexSnapshotsLimit: 10,

From ea7f6acecca6de04550afad9f43be39aebd67380 Mon Sep 17 00:00:00 2001
From: Alex Proujansky <aproujansky@horizonmedia.com>
Date: Mon, 24 Sep 2018 10:27:01 -0400
Subject: [PATCH 2/3] Persist timeFormat changes

---
 src/shared-data.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/shared-data.js b/src/shared-data.js
index 8acf44db1..69db62cc9 100644
--- a/src/shared-data.js
+++ b/src/shared-data.js
@@ -16,7 +16,8 @@ const persisted = [
   'classifyComponents',
   'theme',
   'displayDensity',
-  'recordVuex'
+  'recordVuex',
+  'timeFormat'
 ]
 
 // ---- INTERNALS ---- //

From 9da73ebf68f0f4a39153c3b900870fc3e254fe05 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Thu, 27 Jun 2019 00:28:44 +0200
Subject: [PATCH 3/3] refator: use a switch

---
 .../views/settings/GlobalPreferences.vue      | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/devtools/views/settings/GlobalPreferences.vue b/src/devtools/views/settings/GlobalPreferences.vue
index d947d52df..8c791a357 100644
--- a/src/devtools/views/settings/GlobalPreferences.vue
+++ b/src/devtools/views/settings/GlobalPreferences.vue
@@ -64,22 +64,6 @@
       </VueGroup>
     </VueFormField>
 
-    <VueFormField title="Time Format">
-      <VueGroup
-        v-model="$shared.timeFormat"
-        class="extend"
-      >
-        <VueGroupButton
-          value="default"
-          label="Default"
-        />
-        <VueGroupButton
-          value="ms"
-          label="Include ms"
-        />
-      </VueGroup>
-    </VueFormField>
-
     <VueFormField
       title="Editable props"
     >
@@ -95,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