feat: welcome slideshow

Author: Akryum

packages/app-frontend/src/assets/devtools-logo.svg

@@ -3,8 +3,9 @@ import AppHeader from './header/AppHeader.vue'
 import AppConnecting from './connection/AppConnecting.vue'
 import AppDisconnected from './connection/AppDisconnected.vue'
 import ErrorOverlay from './error/ErrorOverlay.vue'
+import WelcomeSlideshow from './welcome/WelcomeSlideshow.vue'
 
-import { onMounted, defineComponent } from '@vue/composition-api'
+import { onMounted, defineComponent, ref, watch } from '@vue/composition-api'
 import {
   isChrome,
   setStorage,
@@ -19,6 +20,7 @@ import { useAppConnection } from './connection'
 const chromeTheme = isChrome ? chrome.devtools.panels.themeName : undefined
 
 const STORAGE_PREVIOUS_SESSION_THEME = 'previous-session-theme'
+const STORAGE_WELCOME_HIDDEN = 'welcome-hidden'
 
 export default defineComponent({
   name: 'App',
@@ -28,6 +30,7 @@ export default defineComponent({
     AppConnecting,
     AppDisconnected,
     ErrorOverlay,
+    WelcomeSlideshow,
   },
 
   setup () {
@@ -67,9 +70,15 @@ export default defineComponent({
       }
     })
 
+    const welcomeHidden = ref<boolean>(getStorage(STORAGE_WELCOME_HIDDEN))
+    watch(welcomeHidden, (value) => {
+      setStorage(STORAGE_WELCOME_HIDDEN, value)
+    })
+
     return {
       isConnected,
       isInitializing,
+      welcomeHidden,
     }
   },
 })
@@ -101,5 +110,11 @@ export default defineComponent({
     <portal-target name="root" />
 
     <ErrorOverlay />
+
+    <WelcomeSlideshow
+      v-if="!welcomeHidden"
+      class="absolute inset-0 z-100"
+      @hide="welcomeHidden = true"
+    />
   </div>
 </template>

packages/app-frontend/src/assets/welcome/app-selector.png

@@ -0,0 +1,267 @@
+<script lang="ts">
+import { defineComponent, ref, watch } from '@vue/composition-api'
+
+export default defineComponent({
+  emits: [
+    'hide',
+  ],
+
+  setup () {
+    const step = ref(0)
+    const content = ref<HTMLDivElement>()
+
+    watch(step, () => {
+      content.value.scrollTop = 0
+    })
+
+    return {
+      step,
+      stepMax: 10,
+      content,
+    }
+  },
+})
+</script>
+
+<template>
+  <div class="bg-white/50 dark:bg-black/50 p-4 flex items-center justify-center">
+    <div class="bg-white dark:bg-black rounded-lg shadow-lg border border-gray-200 dark:border-gray-800 h-full w-[620px] max-w-full flex flex-col">
+      <div
+        ref="content"
+        class="flex-1 overflow-auto p-4"
+      >
+        <template v-if="step === 0">
+          <img
+            src="~@front/assets/devtools-logo.svg"
+            alt="Devtools logo"
+            class="logo max-h-[160px]"
+          >
+          <h1 class="text-green-500 text-2xl text-center mt-8">
+            Welcome to the Vue devtools!
+          </h1>
+        </template>
+
+        <template v-if="step === 1">
+          <h2>Let's have little tour</h2>
+
+          <p>
+            The devtools were entirely rewritten with the release of Vue 3.
+          </p>
+
+          <p>
+            Its new architecture allow better support of different versions of Vue and also integration of third-party libraries (more on that later!).
+          </p>
+
+          <p>
+            It's packed with changes big and small so here is an overview of what's new!
+          </p>
+        </template>
+
+        <template v-if="step === 2">
+          <img
+            src="~@front/assets/welcome/main-tabs.png"
+            alt="Main tabs"
+            class="max-h-[120px]"
+          >
+
+          <p>
+            You might notice that the navigation is different. The devtools now has to main tabs:
+          </p>
+
+          <ul>
+            <li>the <b>Inspector</b> to display debuging information in a structured way (for example inspecting a component),</li>
+            <li>the <b>Timeline</b> to track different kinds of data over time such as events.</li>
+          </ul>
+        </template>
+
+        <template v-if="step === 3">
+          <h2>The Inspector</h2>
+
+          <p>
+            Here you can select components and inspect their state.
+          </p>
+
+          <img
+            src="~@front/assets/welcome/components.png"
+            alt="Components inspector"
+          >
+        </template>
+
+        <template v-if="step === 4">
+          <p>
+            To acess settings, use the new "3 dots" menu in the top right corner.
+          </p>
+
+          <img
+            src="~@front/assets/welcome/components-menu.png"
+            alt="Components menu"
+            class="max-h-[270px]"
+          >
+        </template>
+
+        <template v-if="step === 5">
+          <p>
+            Vue plugins and libraries can now integrate with the devtools via its <a
+              href="https://devtools.vuejs.org/plugin/plugins-guide.html"
+              target="_blank"
+            >Plugin API</a>.
+          </p>
+
+          <p>
+            For example, they can add their own custom inspectors:
+          </p>
+
+          <img
+            src="~@front/assets/welcome/inspector-pinia2.png"
+            alt="Pinia inspector"
+          >
+        </template>
+
+        <template v-if="step === 6">
+          <h2>The Timeline</h2>
+
+          <p>
+            Here you can see the events coming from your application in real time. It includes mouse and keyboard events, component events, performance flamecharts...
+          </p>
+
+          <img
+            src="~@front/assets/welcome/timeline.png"
+            alt="Timeline"
+          >
+        </template>
+
+        <template v-if="step === 7">
+          <p>
+            You can zoom and pan the timeline, and click on events to see more information.
+          </p>
+
+          <img
+            src="~@front/assets/welcome/timeline-perf2.png"
+            alt="Timeline"
+          >
+        </template>
+
+        <template v-if="step === 8">
+          <p>
+            Using the <a
+              href="https://devtools.vuejs.org/plugin/plugins-guide.html"
+              target="_blank"
+            >Devtools Plugin API</a>, third-party libraries can also add layers and events in the Timline.
+          </p>
+
+          <img
+            src="~@front/assets/welcome/timeline-pinia.png"
+            alt="Timeline pinia"
+          >
+        </template>
+
+        <template v-if="step === 9">
+          <p>
+            On the left side of the top-bar, you can find a new App Selector. The devtools are now scoped to a specific selected app and can even inspect apps inside iframes!
+          </p>
+
+          <img
+            src="~@front/assets/welcome/app-selector.png"
+            alt="App selector"
+            class="max-h-[280px]"
+          >
+        </template>
+
+        <template v-if="step === 10">
+          <img
+            src="~@front/assets/devtools-logo.svg"
+            alt="Devtools logo"
+            class="logo max-h-[100px]"
+          >
+
+          <h2 class="text-center mb-8">
+            That's it!
+          </h2>
+
+          <p>
+            We hope you will enjoy the new Vue devtools.
+          </p>
+
+          <p>
+            In case something doesn't work in your project, you can use the <a
+              href="https://devtools.vuejs.org/guide/faq.html#something-is-broken-in-the-new-devtools"
+              target="_blank"
+            >Legacy version</a> and <a
+              href="https://new-issue.vuejs.org/?repo=vuejs/vue-devtools"
+              target="_blank"
+            >report an issue</a>.
+          </p>
+        </template>
+      </div>
+
+      <div class="flex-none flex items-center space-x-4 p-4 relative">
+        <div class="absolute top-0 left-0 w-full">
+          <div
+            class="h-[2px] bg-green-500 transition-all duration-500 ease-out"
+            :style="{
+              width: `${step / stepMax * 100}%`
+            }"
+          />
+        </div>
+
+        <VueButton
+          class="flat"
+          @click="$emit('hide')"
+        >
+          Skip
+        </VueButton>
+        <div class="flex-1" />
+        <VueButton
+          :disabled="step === 0"
+          @click="step--"
+        >
+          Previous
+        </VueButton>
+        <VueButton
+          v-if="step < stepMax"
+          class="primary w-20"
+          @click="step++"
+        >
+          Next
+        </VueButton>
+        <VueButton
+          v-else
+          class="primary w-20"
+          @click="$emit('hide')"
+        >
+          Continue
+        </VueButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+p {
+  @apply my-2;
+}
+
+img {
+  @apply mx-auto my-4 max-w-full;
+
+  &:first-child {
+    @apply mt-0;
+  }
+
+  &:not(.logo) {
+    @apply border border-gray-200 dark:border-gray-800 rounded-md;
+  }
+}
+
+li {
+  @apply list-disc ml-6;
+}
+
+h2 {
+  @apply text-green-500 text-lg;
+}
+
+a {
+  @apply text-green-500;
+}
+</style>