[wip] Added a select to change targets

posva · posva · commit b0741bca82e9 · 2017-08-22T20:56:02.000+02:00
Recently added recursivity and broke things.
I'm not sure about what I should handle to make it work on the dev
shell. I haven't tried it yet in a real world scenario, namely in
storybook
diff --git a/shells/dev/iframe.html b/shells/dev/iframe.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>iframe</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <div id="shadow"></div>
+    <script src="build/hook.js"></script>
+    <script src="build/target.js"></script>
+  </body>
+</html>
diff --git a/shells/dev/simple-iframe.html b/shells/dev/simple-iframe.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>iframe</title>
+  </head>
+  <body>
+    <script src="https://unpkg.com/vue"></script>
+    <div id="app">
+      <h1>My value: {{ counter }}</h1>
+      <button @click="counter++">+</button>
+      <button @click="counter--">-</button>
+    </div>
+
+    <script>
+      new Vue({
+        el: '#app',
+        data: {
+          counter: 0
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/shells/dev/target.html b/shells/dev/target.html
@@ -7,6 +7,8 @@
   <body>
     <div id="app"></div>
     <div id="shadow"></div>
+    <iframe width="100%" height="400px" src="iframe.html"></iframe>
+    <iframe width="100%" height="400px" src="simple-iframe.html"></iframe>
     <script src="build/hook.js"></script>
     <script src="build/target.js"></script>
   </body>
diff --git a/src/backend/highlighter.js b/src/backend/highlighter.js
@@ -1,4 +1,5 @@
 import { inDoc } from '../util'
+import { getDocumentTarget } from './target-document'
 
 const overlay = document.createElement('div')
 overlay.style.backgroundColor = 'rgba(104, 182, 255, 0.35)'
@@ -26,7 +27,7 @@ export function highlight (instance) {
 
 export function unHighlight () {
   if (overlay.parentNode) {
-    document.body.removeChild(overlay)
+    getDocumentTarget().body.removeChild(overlay)
   }
 }
 
@@ -95,7 +96,7 @@ function getFragmentRect ({ _fragmentStart, _fragmentEnd }) {
  * @return {Rect}
  */
 
-const range = document.createRange()
+const range = getDocumentTarget().createRange()
 function getTextRect (node) {
   range.selectNode(node)
   return range.getBoundingClientRect()
@@ -112,7 +113,7 @@ function showOverlay ({ width = 0, height = 0, top = 0, left = 0 }) {
   overlay.style.height = ~~height + 'px'
   overlay.style.top = ~~top + 'px'
   overlay.style.left = ~~left + 'px'
-  document.body.appendChild(overlay)
+  getDocumentTarget().body.appendChild(overlay)
 }
 
 /**
diff --git a/src/backend/index.js b/src/backend/index.js
@@ -5,6 +5,7 @@ import { highlight, unHighlight, getInstanceRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 import { initEventsBackend } from './events'
 import { stringify, classify, camelize } from '../util'
+import { getDocumentTarget, setDocumentTarget, getAllTargets } from './target-document'
 import path from 'path'
 
 // Use a custom basename functions instead of the shimed version
@@ -76,6 +77,10 @@ function connect () {
     flush()
   })
 
+  bridge.on('change-target', (target) => {
+    setDocumentTarget(getAllTargets()[target])
+    scan()
+  })
   bridge.on('refresh', scan)
   bridge.on('enter-instance', id => highlight(instanceMap.get(id)))
   bridge.on('leave-instance', unHighlight)
@@ -106,7 +111,7 @@ function scan () {
   rootInstances.length = 0
   let inFragment = false
   let currentFragment = null
-  walk(document, function (node) {
+  walk(getDocumentTarget(), function (node) {
     if (inFragment) {
       if (node === currentFragment._fragmentEnd) {
         inFragment = false
diff --git a/src/backend/target-document.js b/src/backend/target-document.js
@@ -0,0 +1,21 @@
+let target = document
+// XXX test
+console.log('INIT IT BOY')
+
+export function setDocumentTarget (newTarget) {
+  target = newTarget
+}
+
+export function getDocumentTarget () {
+  return target
+}
+
+export function getAllTargets () {
+  const targets = [document]
+  return targets.concat(findTargetsInElement(document))
+}
+
+function findTargetsInElement (el) {
+  const iframes = [...el.getElementsByTagName('iframe')].map(i => i.contentDocument)
+  return iframes.concat(...iframes.map(findTargetsInElement))
+}
diff --git a/src/devtools/App.vue b/src/devtools/App.vue
@@ -5,9 +5,8 @@
   <div class="header">
     <img class="logo" src="./assets/logo.png" alt="Vue">
     <span class="message-container">
-      <transition name="slide-up">
-        <span class="message" :key="message">{{ message }}</span>
-      </transition>
+      <span v-if="false" class="message" :key="message">{{ message }}</span>
+      <target-selector/>
     </span>
     <a class="button components"
       :class="{ active: tab === 'components'}"
@@ -47,6 +46,7 @@
 import ComponentsTab from './views/components/ComponentsTab.vue'
 import EventsTab from './views/events/EventsTab.vue'
 import VuexTab from './views/vuex/VuexTab.vue'
+import TargetSelector from './components/TargetSelector.vue'
 
 import { mapState } from 'vuex'
 
@@ -62,7 +62,8 @@ export default {
   components: {
     components: ComponentsTab,
     vuex: VuexTab,
-    events: EventsTab
+    events: EventsTab,
+    TargetSelector
   },
   computed: mapState({
     message: state => state.message,
diff --git a/src/devtools/components/TargetSelector.vue b/src/devtools/components/TargetSelector.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="target-selector">
+    <select v-if="targets.length" @click="refreshTargets" v-model="currentTarget" @change="setTarget">
+      <option v-for="(target, i) in targets" :value="i"
+      >{{ target.location.pathname }}</option>
+    </select>
+  </div>
+</template>
+
+<script>
+import {
+  getDocumentTarget,
+  setDocumentTarget,
+  getAllTargets
+} from '../../backend/target-document'
+
+export default {
+  data () {
+    return {
+      currentTarget: 0,
+      targets: []
+    }
+  },
+
+  created () {
+    // TODO check this works on safari and firefox
+    this.refreshTargets()
+  },
+
+  methods: {
+    refreshTargets () {
+      this.targets = getAllTargets()
+    },
+    setTarget () {
+      bridge.send('change-target', this.currentTarget)
+    }
+  }
+}
+</script>
