Bug 912244: Correct screenshot with element highlighting in Marionette; r=jgriffin
authorDavid Burns <dburns@mozilla.com>
Wed, 04 Sep 2013 09:05:43 +0100
changeset 145482 a895979d4c8ba4aaa51f6be40e37df076b6646a2
parent 145481 dffedf20a02dce00267ba25ad39d3aab371e54b3
child 145483 743278b7340f88d6d5071bbd1b4fd79bf35c21f8
push id33294
push userdburns@mozilla.com
push dateWed, 04 Sep 2013 20:16:05 +0000
treeherdermozilla-inbound@a895979d4c8b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjgriffin
bugs912244
milestone26.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 912244: Correct screenshot with element highlighting in Marionette; r=jgriffin
testing/marionette/client/marionette/marionette.py
testing/marionette/client/marionette/tests/unit/test_screenshot.py
testing/marionette/marionette-listener.js
--- a/testing/marionette/client/marionette/marionette.py
+++ b/testing/marionette/client/marionette/marionette.py
@@ -1250,9 +1250,12 @@ class Marionette(object):
 
         :param element: The element to take a screenshot of. If None, will
          take a screenshot of the current frame.
         :param highlights: A list of HTMLElement objects to draw a red box around in the
          returned screenshot.
         '''
         if element is not None:
             element = element.id
-        return self._send_message("screenShot", 'value', element=element, highlights=highlights)
+        lights = None
+        if highlights is not None:
+            lights = [highlight.id for highlight in highlights if highlights]
+        return self._send_message("screenShot", 'value', element=element, highlights=lights)
--- a/testing/marionette/client/marionette/tests/unit/test_screenshot.py
+++ b/testing/marionette/client/marionette/tests/unit/test_screenshot.py
@@ -5,14 +5,21 @@ class ScreenshotTests(MarionetteTestCase
 
     def testWeCanTakeAScreenShotOfAnElement(self):
         test_url = self.marionette.absolute_url('html5Page.html')
         self.marionette.navigate(test_url)
         el = self.marionette.find_element('id', 'red')
         self.assertEqual('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAVUlEQVRoge3PsQ0AIAzAsI78fzBwBhHykD2ePev80LweAAGJB1ILpBZILZBaILVAaoHUAqkFUgukFkgtkFogtUBqgdQCqQVSC6QWSC2QWiC1QGp9A7ma+7nyXgOpzQAAAABJRU5ErkJggg==',
                          self.marionette.screenshot(element=el))
 
+    def testWeCanTakeAScreenShotWithHighlightOfAnElement(self):
+        test_url = self.marionette.absolute_url('html5Page.html')
+        self.marionette.navigate(test_url)
+        el = self.marionette.find_element('id', 'green')
+        self.assertEqual('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAV0lEQVRoge3PQRGAQAwAsWINvXgsNnI3+4iAzM7sDWZn9vneoxXRFNEU0RTRFNEU0RTRFNEU0RTRFNEU0RTRFNEU0RTRFNEU0RTRFNEU0RTRFNHcF7nBD/Ha5Ye4BbsYAAAAAElFTkSuQmCC',
+                         self.marionette.screenshot(element=el, highlights=[el]))
+
     def testWeCanTakeAScreenShotEntireCanvas(self):
         test_url = self.marionette.absolute_url('html5Page.html')
         self.marionette.navigate(test_url)
         self.assertTrue('data:image/png;base64,iVBORw0KGgo' in
                         self.marionette.screenshot())
 
--- a/testing/marionette/marionette-listener.js
+++ b/testing/marionette/marionette-listener.js
@@ -1784,67 +1784,55 @@ function screenShot(msg) {
     }
   }
   else {
       node = curWindow;
   }
   let highlights = msg.json.highlights;
 
   var document = curWindow.document;
-  var rect, win, width, height, left, top, needsOffset;
+  var rect, win, width, height, left, top;
   // node can be either a window or an arbitrary DOM node
   if (node == curWindow) {
     // node is a window
     win = node;
     width = win.innerWidth;
     height = win.innerHeight;
     top = 0;
     left = 0;
-    // offset needed for highlights to take 'outerHeight' of window into account
-    needsOffset = true;
   }
   else {
     // node is an arbitrary DOM node
     win = node.ownerDocument.defaultView;
     rect = node.getBoundingClientRect();
     width = rect.width;
     height = rect.height;
     top = rect.top;
     left = rect.left;
-    // offset for highlights not needed as they will be relative to this node
-    needsOffset = false;
   }
 
   var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
   canvas.width = width;
   canvas.height = height;
   var ctx = canvas.getContext("2d");
   // Draws the DOM contents of the window to the canvas
   ctx.drawWindow(win, left, top, width, height, 'rgb(255,255,255)');
 
   // This section is for drawing a red rectangle around each element passed in via the highlights array
   if (highlights) {
     ctx.lineWidth = "2";
     ctx.strokeStyle = "red";
     ctx.save();
 
     for (var i = 0; i < highlights.length; ++i) {
-      var elem = highlights[i];
+      var elem = elementManager.getKnownElement(highlights[i], curWindow)
       rect = elem.getBoundingClientRect();
 
-      var offsetY = 0, offsetX = 0;
-      if (needsOffset) {
-        var offset = getChromeOffset(elem);
-        offsetX = offset.x;
-        offsetY = offset.y;
-      } else {
-        // Don't need to offset the window chrome, just make relative to containing node
-        offsetY = -top;
-        offsetX = -left;
-      }
+      var offsetY = -top;
+      var offsetX = -left;
 
       // Draw the rectangle
       ctx.strokeRect(rect.left + offsetX, rect.top + offsetY, rect.width, rect.height);
     }
   }
 
   // Return the Base64 String back to the client bindings and they can manage
   // saving the file to disk if it is required