feat(ui): debug window

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <v-app :dark="dark">
-    <div v-if="$route.meta.requiresAuth && auth !== undefined">
+    <div v-if="$route.meta.requiresAuth && auth !== undefined && !hideTopbar">
       <v-navigation-drawer
         clipped-left
         :mini-variant="mini"
@@ -239,6 +239,7 @@ export default {
       drawer: false,
       mini: false,
       topbar: [],
+      hideTopbar: false,
       title: '',
       snackbar: false,
       snackbarText: '',
@@ -515,6 +516,12 @@ export default {
       this.toggleDrawer()
     }
 
+    const hash = window.location.hash.substr(1)
+
+    if (hash === 'no-topbar') {
+      this.hideTopbar = true
+    }
+
     this.dark = this.settings.load('dark', false)
     this.changeThemeColor()
 

src/components/Debug.vue

@@ -9,6 +9,14 @@
           >Stop</v-btn
         >
         <v-btn color="blue darken-1" text @click="debug = []">Clear</v-btn>
+
+        <v-btn
+          v-if="!hideTopbar"
+          color="yellow darken-1"
+          text
+          @click="newWindow"
+          >Open in window</v-btn
+        >
       </v-col>
 
       <v-col cols="12">
@@ -42,19 +50,37 @@ export default {
   data () {
     return {
       debug: [],
-      debugActive: false
+      debugActive: true,
+      hideTopbar: false
     }
   },
   methods: {
     ...mapMutations(['showSnackbar']),
     toggleDebug (v) {
       this.debugActive = v
       this.showSnackbar('Debug ' + (v ? 'activated' : 'disabled'))
+    },
+    newWindow () {
+      const newwindow = window.open(
+        window.location.href + '#no-topbar',
+        'DEBUG',
+        'height=800,width=600,status=no,toolbar:no,scrollbars:no,menubar:no' // check https://www.w3schools.com/jsref/met_win_open.asp for all available specs
+      )
+      if (window.focus) {
+        newwindow.focus()
+      }
     }
   },
   mounted () {
     // init socket events
     const self = this
+
+    const hash = window.location.hash.substr(1)
+
+    if (hash === 'no-topbar') {
+      this.hideTopbar = true
+    }
+
     this.socket.on(socketEvents.debug, data => {
       if (self.debugActive) {
         data = ansiUp.ansi_to_html(data)