feat(ui): git FileDiff auto-refresh on page focus

Author: Guillaume Chau

packages/@vue/cli-ui/src/components/FileDiffView.vue

@@ -64,10 +64,12 @@
       </template>
     </div>
 
-    <VueLoadingIndicator
-      v-if="loading"
-      class="overlay"
-    />
+    <transition name="vue-ui-fade">
+      <VueLoadingIndicator
+        v-if="loading"
+        class="overlay"
+      />
+    </transition>
 
     <VueModal
       v-if="showCommitModal"
@@ -108,10 +110,16 @@
 </template>
 
 <script>
+import PageVisibility from '../mixins/PageVisibility'
+
 import FILE_DIFFS from '../graphql/fileDiffs.gql'
 import GIT_COMMIT from '../graphql/gitCommit.gql'
 
 export default {
+  mixins: [
+    PageVisibility
+  ],
+
   data () {
     return {
       fileDiffs: [],
@@ -151,6 +159,14 @@ export default {
     }
   },
 
+  watch: {
+    documentFocus (value) {
+      if (value) {
+        this.refresh()
+      }
+    }
+  },
+
   methods: {
     setCollapsedToAll (value) {
       const map = {}
@@ -180,6 +196,8 @@ export default {
             message: this.commitMessage
           }
         })
+        this.showCommitModal = false
+        this.refresh()
         this.$emit('continue')
       } catch (e) {
         console.error(e)

packages/@vue/cli-ui/src/mixins/PageVisibility.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+
+const vm = new Vue({
+  data: {
+    documentVisible: !document.hidden,
+    documentFocus: document.hasFocus()
+  }
+})
+
+document.addEventListener('visibilitychange', () => {
+  vm.documentVisible = !document.hidden
+}, false)
+
+window.addEventListener('focus', () => {
+  vm.documentFocus = true
+})
+
+window.addEventListener('blur', () => {
+  vm.documentFocus = false
+})
+
+// @vue/component
+export default {
+  computed: {
+    documentVisible () {
+      return vm.documentVisible
+    },
+
+    documentFocus () {
+      return vm.documentFocus
+    }
+  }
+}