Use unique indexes for documents

src/backend/index.js

@@ -77,9 +77,12 @@ function connect () {
     flush()
   })
 
-  bridge.on('change-target', (target) => {
-    setDocumentTarget(getAllTargets()[target])
-    scan()
+  bridge.on('change-target', (id) => {
+    const target = getAllTargets().find(t => t.id === id)
+    if (target) {
+      setDocumentTarget(target.doc)
+      scan()
+    }
   })
   bridge.on('refresh', scan)
   bridge.on('enter-instance', id => highlight(instanceMap.get(id)))

src/backend/target-document.js

@@ -10,12 +10,32 @@ export function getDocumentTarget () {
   return target
 }
 
+let id = 0
+const documents = new WeakMap()
+
+function getId (doc) {
+  console.log('Getting', doc)
+  if (!documents.has(doc)) {
+    console.log('Added with', id)
+    documents.set(doc, id++)
+  }
+  console.log(`generated id ${documents.get(doc)}`, doc)
+  return documents.get(doc)
+}
+
+function packTarget (doc) {
+  return {
+    doc,
+    id: getId(doc)
+  }
+}
+
 export function getAllTargets () {
-  const targets = [document]
-  return targets.concat(findTargetsInElement(document))
+  const targets = [packTarget(document)]
+  return targets.concat(findTargetsInElement(targets[0]))
 }
 
-function findTargetsInElement (el) {
-  const iframes = Array.prototype.map.call(el.getElementsByTagName('iframe'), i => i.contentDocument)
+function findTargetsInElement ({ doc }) {
+  const iframes = Array.prototype.map.call(doc.getElementsByTagName('iframe'), i => i.contentDocument).map(packTarget)
   return iframes.concat(...iframes.map(findTargetsInElement))
 }

src/devtools/components/TargetSelector.vue

@@ -1,10 +1,11 @@
 <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>
+      <option v-for="target in targets" :value="target.id"
+      >({{ target.id }}) {{ target.doc.location.pathname }}</option>
     </select>
     <button @click="currentTarget = null">reset</button>
+    <button @click="refreshTargets">refresh</button>
   </div>
 </template>