Chrome Extensions chrome.experimental.offscreenTabs.* API implementation, docs, and test.

chrome/test/data/extensions/api_test/offscreen_tabs/test.js

+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+var pass = chrome.test.callbackPass;
+var fail = chrome.test.callbackFail;
+var assertEq = chrome.test.assertEq;
+var assertTrue = chrome.test.assertTrue;
+
+var extensionPath =
+  location.href.substring(0, location.href.lastIndexOf("/") + 1);
+
+var inTabs = [
+  { "url":extensionPath + "a.html",
+    "width":200,
+    "height":200
+  },
+  { "url":extensionPath + "b.html",
+    "width":200,
+    "height":200
+  },
+  { "url":extensionPath + "c.html",
+    "width":1000,
+    "height":800
+  }
+];
+
+// Wait this long for chrome to navigate
+// TODO listen for onUpdated once its implemented in the API

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

TODO(alexbost):. Also, "it's".

[alexbost, 2011/08/24 20:06:21]

Done.

+var sleepTime = 100;

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

In general the use of setTimeout and arbitrary delays results in flaky tests.
Implementing onUpdated() and getting rid of this delay should be the top
priority once this lands. Or, if it isn't that difficult to implement
onUpdated(), let's do it now.

[alexbost, 2011/08/24 20:06:21]

Agreed. Putting it on top of my list.

+
+// Tab management
+var tabs = [];
+
+// Mouse
+
+var tabMouse;
+
+var mouseEvent = {
+  "button":0,
+  "altKey":false,
+  "ctrlKey":false,
+  "shiftKey":false
+}

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

Missing ";".

[alexbost, 2011/08/24 20:06:21]

Done.

+
+var x = 11;
+var y = 11;

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

It seems pretty delicate to aim for some text on the test pages with the
synthesized clicks in these tests. Would it be possible to create a div element
with a known width and height and attach the mouse event handlers to it?

[alexbost, 2011/08/24 20:06:21]

I think aiming for the text is OK. It has absolute position (10,10) so the
(11,11) pixel should always be part of the text no matter what the text is.

+
+// Keyboard
+
+var tabKeyboard;
+
+var keyboardEvent = {
+  "charCode":113,  // q
+  "keyCode":113,
+  "altKey":false,
+  "ctrlKey":false,
+  "shiftKey":false
+}

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

This could be a local variable in the "keyPress" function below. Also, needs a
trailing ";".

[alexbost, 2011/08/24 20:06:21]

Done.

+
+// ToDataUrl
+
+var tabsCaptured = [];
+
+var nTabsCaptured = 2;
+
+// Util
+
+function compareTabs(t1, t2) {
+  assertEq(t1.url, t2.url);
+  assertEq(t1.width, t2.width);
+  assertEq(t1.height, t2.height);
+}
+
+function waitToNavigate(tabId, callback) {
+  function func(callMeAgain) {
+    if (callMeAgain)
+      setTimeout(func, sleepTime, false);
+    else
+      chrome.experimental.offscreenTabs.get(tabId, pass(function(tab) {
+          callback(tab);
+        }));
+  }
+  func(true);

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

I don't understand what this function is supposed to do. If you're just trying
to delay once and then do the callback, you can just write:

function waitToNavigate(tabId, callback) {
   setTimeout(function() {
       chrome.experimental.offscreenTabs.get(tabId, pass(function(tab) {
         callback(tab);
       }));
     }, sleepTime, false);
}

However in this case I'd suggest increasing the delay time to reduce potential
flakiness -- perhaps to 250 ms.

If you're trying to do something more sophisticated, like wait until the call to
chrome.experimental.offscreenTabs.get succeeds, then more logic is needed.

[alexbost, 2011/08/24 20:06:21]

Done.

+}
+
+// Tab management --------------------------------------------------------------
+
+function startTabManagement() {
+  var nCallbacksNotDone = inTabs.length;
+
+  for (var i=0; i<inTabs.length; i++) {
+    chrome.experimental.offscreenTabs.create(
+      { "url":inTabs[i].url,
+        "width":inTabs[i].width,
+        "height":inTabs[i].height
+      },
+      pass(function() {
+        var j = i;
+        return function(tab) {
+          tabs[j] = tab;
+
+          nCallbacksNotDone--;
+
+          if (nCallbacksNotDone == 0)
+             getAll();
+        }
+      }())
+    );
+  }
+}
+
+function getAll() {
+  chrome.experimental.offscreenTabs.getAll(pass(function(tabsResult) {
+      assertEq(tabsResult.length, tabs.length);
+
+      for (var i=0; i<tabs.length; i++) {
+        tabs[i].id = tabsResult[i].id;

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

This looks wrong. If you are trying to make sure that the tabs are in the same
order, sort both arrays with the same function, e.g.:

function sortTab(tabA, tabB) { return tabB.id - tabA.id; }
tabs.sort(sortTab);
tabsResult.sort(sortTab);

Then compare each tab.

[alexbost, 2011/08/24 20:06:21]

Good point.

+
+        compareTabs(tabs[i], tabsResult[i]);
+      }
+
+      get();
+    }));
+}
+
+function get() {
+  chrome.experimental.offscreenTabs.get(tabs[0].id, pass(function(tab) {
+      compareTabs(tabs[0], tab);
+
+      update();
+    }));
+
+  chrome.experimental.offscreenTabs.
+    get(-1, fail("No offscreen tab with id: -1."));

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

This negative test is nice.

[alexbost, 2011/08/24 20:06:21]

Done.

+}
+
+function update() {
+  chrome.experimental.offscreenTabs.update(tabs[1].id,
+       { "url":tabs[0].url,
+         "width":tabs[0].width,
+         "height":tabs[0].height
+       },
+       pass(function(tab) {
+          compareTabs(tabs[0], tab);
+
+          remove();
+        })
+     );
+}
+
+function remove() {
+  for (var i=0; i<inTabs.length; i++)
+    chrome.experimental.offscreenTabs.remove(tabs[i].id);
+
+  chrome.experimental.offscreenTabs.getAll(pass(function(tabsResult) {
+      assertEq(tabsResult.length, 0);
+    }));
+}
+
+// Mouse -----------------------------------------------------------------------
+
+function startMouseEvents() {
+  chrome.experimental.offscreenTabs.create(
+    { "url":inTabs[0].url,
+      "width":inTabs[0].width,
+      "height":inTabs[0].height
+    },
+    pass(function(tab) {
+      waitToNavigate(tab.id, pass(function(tab) {
+          tabMouse = tab;
+
+          mouseClick();
+        }));
+      })
+  );
+}
+
+function mouseClick() {
+  mouseEvent.type = "click";
+  chrome.experimental.offscreenTabs.
+    sendMouseEvent(tabMouse.id, mouseEvent, x, y, pass(function(tab) {
+
+    waitToNavigate(tabMouse.id, pass(function(tab) {
+        assertEq(tab.url, inTabs[1].url);
+
+        tabMouse = tab;

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

This looks unnecessary.

[alexbost, 2011/08/24 20:06:21]

This is just to set tabMouse.id which is used later. I will make it explicit: 

tabMouse.id = tab.id;

+
+        mouseWheel();
+      }));
+    })
+  );
+}
+
+function mouseWheel() {
+  mouseEvent.type = "mousewheel";
+  mouseEvent.wheelDeltaX = 0;
+  mouseEvent.wheelDeltaY = -100;

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

See question at top about using a div or something similar in the test pages
instead of aiming for a line of text, to make the test more robust.

[alexbost, 2011/08/24 20:06:21]

See above.

+  chrome.experimental.offscreenTabs.
+    sendMouseEvent(tabMouse.id, mouseEvent, null, null, pass(function(tab) {

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

Pass 0 instead of null since the arguments are supposed to be numbers.

[alexbost, 2011/08/24 20:06:21]

Done.

+
+    waitToNavigate(tabMouse.id, pass(function(tab) {
+        assertEq(tab.url, inTabs[1].url);
+
+        mouseDownUp();
+      }));
+    })
+  );
+}
+
+function mouseDownUp() {
+  mouseEvent.type = "mousedown";
+  chrome.experimental.offscreenTabs.
+    sendMouseEvent(tabMouse.id, mouseEvent, x, y, pass(function(tab) {
+    })
+  );
+
+  mouseEvent.type = "mouseup";
+  chrome.experimental.offscreenTabs.
+    sendMouseEvent(tabMouse.id, mouseEvent, x, y, pass(function(tab) {
+
+    waitToNavigate(tabMouse.id, pass(function(tab) {
+        assertEq(tab.url, inTabs[2].url);
+
+        removeMouse();
+      }));
+    })
+  );
+}
+
+function removeMouse() {
+    chrome.experimental.offscreenTabs.remove(tabMouse.id);

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

Indentation is off.

[alexbost, 2011/08/24 20:06:21]

Done.

+
+  chrome.experimental.offscreenTabs.getAll(pass(function(tabsResult) {
+      assertEq(tabsResult.length, 0);
+    }));
+}
+
+// Keyboard --------------------------------------------------------------------
+
+function startKeyboardEvents() {
+  chrome.experimental.offscreenTabs.create(
+    { "url":inTabs[0].url,
+      "width":inTabs[0].width,
+      "height":inTabs[0].height
+    },
+    pass(function(tab) {
+      waitToNavigate(tab.id, pass(function(tab) {
+          tabKeyboard = tab;
+
+          keyPress();
+        }));
+      })
+  );
+}
+
+function keyPress() {
+  keyboardEvent.type = "keypress";
+  chrome.experimental.offscreenTabs.
+    sendKeyboardEvent(tabKeyboard.id, keyboardEvent, pass(function(tab) {
+      waitToNavigate(tabKeyboard.id, pass(function(tab) {
+          assertEq(tab.url, inTabs[1].url);
+
+          removeKeyboard();
+        }));
+    })
+  );
+}
+
+function removeKeyboard() {
+    chrome.experimental.offscreenTabs.remove(tabKeyboard.id);

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

Indentation is off.

[alexbost, 2011/08/24 20:06:21]

Done.

+
+  chrome.experimental.offscreenTabs.getAll(pass(function(tabsResult) {
+      assertEq(tabsResult.length, 0);
+    }));
+
+}
+
+// toDataUrl -------------------------------------------------------------------
+
+// The two tabs should have the same size. We want to make sure we dont get
+// empty images back so this way we can compare two images that are supposed
+// to be different
+function startToDataUrl() {
+  var nCallbacksNotDone = nTabsCaptured;
+
+  for (var i=0; i<nTabsCaptured; i++) {
+    chrome.experimental.offscreenTabs.create(
+      { "url":inTabs[i].url,
+        "width":inTabs[i].width,
+        "height":inTabs[i].height
+      },
+      pass(function() {
+        var j = i;
+        return function(tab) {
+          tabsCaptured[j] = tab;
+
+          nCallbacksNotDone--;
+
+          if (nCallbacksNotDone == 0)
+             toDataUrl();
+        }
+      }())
+    );
+  }
+}
+
+function toDataUrl() {
+  var nCallbacksNotDone = nTabsCaptured;
+
+  for (var i=0; i<nTabsCaptured; i++) {
+    chrome.experimental.offscreenTabs.toDataUrl(
+      tabsCaptured[i].id,
+      {"format":"png"},
+      pass(function(dataUrl) {
+        var j = i;
+        return function(dataUrl) {
+          assertEq('string', typeof(dataUrl));
+          assertEq('data:image/png;base64,', dataUrl.substr(0,22));
+
+          tabsCaptured[j].dataUrl = dataUrl;
+
+          nCallbacksNotDone--;
+
+          if (nCallbacksNotDone == 0) {
+            // compare the dataUrls
+            assertTrue(tabsCaptured[0].dataUrl != tabsCaptured[1].dataUrl);
+
+            removeToDataUrl();
+          }
+        }
+      }())
+    );
+  }
+}
+
+function removeToDataUrl() {
+  for (var i=0; i<nTabsCaptured; i++)
+    chrome.experimental.offscreenTabs.remove(tabsCaptured[i].id);
+
+  chrome.experimental.offscreenTabs.getAll(pass(function(tabsResult) {
+      assertEq(tabsResult.length, 0);
+    }));
+}
+
+// Run tests  ------------------------------------------------------------------
+
+function run() {
+chrome.test.runTests([

[Ken Russell (switch to Gerrit), 2011/08/23 22:46:53]

Indentation.

[alexbost, 2011/08/24 20:06:21]

This looks right according to:
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/test/data/extensions/a...

+  function tabManagement() {
+    startTabManagement();
+  },
+
+  function mouseEvents() {
+    startMouseEvents();
+  },
+
+  function keyboardEvents() {
+    startKeyboardEvents();
+  },
+
+  function toDataUrl() {
+    startToDataUrl();
+  }
+]);
+}
+
+run();