Removed screenshots altogether, much fast now! and screenshots aren't…

… that important at that stage anyway. Added timestamps too which fixes #15

data/panel.css

@@ -88,15 +88,6 @@ body {
   background: rgba(255, 255, 255, .07);
 }
 
-.screenshots {
-  width: 30%;
-  border-left: 1px solid rgba(0, 0, 0, .2);
-}
-
-.screenshots img {
-  width: 100%;
-}
-
 .record {
   border-bottom: 1px solid rgba(0, 0, 0, .2);
   padding: 5px 3px;
@@ -118,6 +109,11 @@ body {
   float: right;
 }
 
+.time {
+  color: #999;
+  margin-right: 5px;
+}
+
 .target-tag {
   color: black;
 }

data/panel.html

@@ -6,5 +6,4 @@
 </header>
 <div class="main">
   <ul class="records"></ul>
-  <div class="screenshots"><img /></div>
 </div>

data/panel.js

@@ -12,7 +12,6 @@ function PageRecorderPanel(win, toolbox) {
   this.toolbox = toolbox;
 
   this.onRecord = this.onRecord.bind(this);
-  this.onScreenshot = this.onScreenshot.bind(this);
   this.toggle = this.toggle.bind(this);
   this.search = this.search.bind(this);
 
@@ -32,7 +31,6 @@ PageRecorderPanel.prototype = {
   loadFrameScript() {
     this.mm.loadFrameScript(FRAME_SCRIPT_URL, false);
     this.mm.addMessageListener("PageRecorder:OnChange", this.onRecord);
-    this.mm.addMessageListener("PageRecorder:OnScreenshot", this.onScreenshot);
 
     // Make sure this is only called once on this instance
     this.loadFrameScript = () => {
@@ -42,7 +40,6 @@ PageRecorderPanel.prototype = {
 
   initUI() {
     this.recordsEl = this.doc.querySelector(".records");
-    this.screenshotEl = this.doc.querySelector(".screenshots img");
     this.toggleEl = this.doc.querySelector("#toggle");
     this.searchBoxEl = this.doc.querySelector("#search-input");
 
@@ -113,21 +110,19 @@ PageRecorderPanel.prototype = {
     li.classList.add(record.type);
 
     let self = this;
-    (function(id, node) {
+    (function(node) {
       li.addEventListener("mouseover", () => {
-        // Highlight the corresponding node
         self.highlightNode(node);
-
-        // And request the screenshot data for this step
-        self.mm.sendAsyncMessage("PageRecorder:GetScreenshot", id);
       });
       li.addEventListener("mouseout", () => {
         self.unhighlight();
       });
       li.addEventListener("click", () => {
         self.inspectNode(node);
       });
-    })(record.id, target);
+    })(target);
+
+    li.appendChild(this.buildTimeOutput(record.time));
 
     if (target) {
       li.appendChild(this.buildTargetOutput(target));
@@ -154,6 +149,10 @@ PageRecorderPanel.prototype = {
   },
 
   getNodeFront: Task.async(function*(node) {
+    if (!node || Cu.isDeadWrapper(node)) {
+      return null;
+    }
+
     // Set, via the frame-script, the provided node as the "inspecting node" on
     // the inspector module. This way we can later retrieve it via the walker
     // actor.
@@ -168,24 +167,27 @@ PageRecorderPanel.prototype = {
 
   inspectNode: Task.async(function*(node) {
     let nodeFront = yield this.getNodeFront(node);
+    if (!nodeFront) {
+      return;
+    }
 
     let panel = yield this.toolbox.selectTool("inspector");
     panel.selection.setNodeFront(nodeFront);
   }),
 
   highlightNode: Task.async(function*(node) {
     let nodeFront = yield this.getNodeFront(node);
+    if (!nodeFront) {
+      return;
+    }
+
     yield this.toolbox.highlighterUtils.highlightNodeFront(nodeFront);
   }),
 
   unhighlight: Task.async(function*() {
     yield this.toolbox.highlighterUtils.unhighlight();
   }),
 
-  onScreenshot({data}) {
-    this.screenshotEl.src = data;
-  },
-
   buildRecordOutputFor_mutation(formatterData) {
     // Break it down further by mutation type
     let type = formatterData.data.type;
@@ -256,5 +258,15 @@ PageRecorderPanel.prototype = {
     targetEl.appendChild(closeTagEl);
 
     return targetEl;
+  },
+
+  buildTimeOutput(time) {
+    time = Math.round(time / 1000 * 100) / 100;
+
+    let timeEl = this.doc.createElement("span");
+    timeEl.classList.add("time");
+    timeEl.textContent = time + " sec";
+
+    return timeEl;
   }
 };

data/recorder-frame-script.js

@@ -15,23 +15,17 @@ function PageChangeRecorder(doc) {
   this.win = this.doc.defaultView;
   this.isStarted = false;
 
-  this.changeID = 0;
+  this.id = 0;
 
   this._onMutations = this._onMutations.bind(this);
   this._onEvent = this._onEvent.bind(this);
 
   // Get the mutation observer ready
   this._mutationObserver = new this.win.MutationObserver(this._onMutations);
-
-  this.screenshots = new Map();
 }
 
 PageChangeRecorder.prototype = {
-  MUTATION_SCREENSHOT_DEBOUNCE: 100,
-  REGULAR_SCREENSHOT_INTERVAL: 200,
-
   destroy() {
-    this.screenshots.clear();
     this.doc = this.win = this._mutationObserver = null;
   },
 
@@ -40,7 +34,7 @@ PageChangeRecorder.prototype = {
       return;
     }
     this.isStarted = true;
-    this.screenshots.clear();
+    this.startTime = this.win.performance.now();
 
     // Start observing markup mutations
     this._mutationObserver.observe(this.doc, {
@@ -128,38 +122,10 @@ PageChangeRecorder.prototype = {
     this._emitChange("event", {type, target});
   },
 
-  _getScreenshot() {
-    if (!this.isStarted) {
-      return;
-    }
-
-    if (!this._screenshotCtx) {
-      let canvas = this.doc.createElement("canvas");
-      this._screenshotCtx = canvas.getContext("2d");
-      this._screenshotCtx.canvas.width = this.win.innerWidth;
-      this._screenshotCtx.canvas.height = this.win.innerHeight;
-    }
-
-    this._screenshotCtx.drawWindow(this.win,
-                                   this.win.scrollX,
-                                   this.win.scrollY,
-                                   this._screenshotCtx.canvas.width,
-                                   this._screenshotCtx.canvas.height,
-                                   "#fff");
-
-    return this._screenshotCtx.canvas.toDataURL("image/png", "");
-  },
-
   _emitChange(type, data) {
     let time = this.win.performance.now();
-    let screenshot = this._getScreenshot();
-    let id = this.changeID++;
-
-    this.screenshots.set(id, screenshot);
-
-    // Emit this one change over the wire, along with a unique ID so the UI
-    // can request the screenshot for this change when needed.
-    emit(this, "change", {type, data, time, id});
+    time -= this.startTime;
+    emit(this, "change", {type, data, time, id: this.id++});
   },
 };
 
@@ -200,17 +166,6 @@ addMessageListener("PageRecorder:Stop", function() {
   off(currentRecorder, "change", onChange);
 });
 
-addMessageListener("PageRecorder:GetScreenshot", function({data: id}) {
-  if (!currentRecorder) {
-    throw new Error("No recorder available");
-  }
-
-  let screenshot = currentRecorder.screenshots.get(id);
-  if (screenshot) {
-    sendAsyncMessage("PageRecorder:OnScreenshot", screenshot);
-  }
-});
-
 addMessageListener("PageRecorder:SetInspectingNode", function({objects}) {
   let inspector = devtools.require("devtools/server/actors/inspector");
   inspector.setInspectingNode(objects.node);