feat: introduce puppeteer-firefox (#3628)

This adds a proof-of-concept of `puppeteer-firefox`.
This consists of two parts:
- `//experimental/juggler` - patches to apply to Firefox.
- `//experimental/puppeteer-firefox` - front-end code to
be merged with Puppeteer.

As things become more stable, we'll gradually move it out of
the experimental folder.

experimental/puppeteer-firefox/test/elementhandle.spec.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright 2018 Google Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const utils = require('./utils');
+
+module.exports.addTests = function({testRunner, expect, product}) {
+  const {describe, xdescribe, fdescribe} = testRunner;
+  const {it, fit, xit} = testRunner;
+  const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
+
+  const FFOX = product === 'firefox';
+  const CHROME = product === 'chromium';
+
+  describe('JSHandle.asElement', function() {
+    it('should work', async({page, server}) => {
+      await page.setContent('<section>test</section>');
+      const handle = await page.evaluateHandle(() => document.querySelector('section'));
+      const element = handle.asElement();
+      expect(element).not.toBe(null);
+    });
+    it('should work with nullified Node', async({page, server}) => {
+      await page.setContent('<section>test</section>');
+      await page.evaluate(() => delete Node);
+      const handle = await page.evaluateHandle(() => document.querySelector('section'));
+      const element = handle.asElement();
+      expect(element).not.toBe(null);
+    });
+    it('should return null for non-elements', async({page, server}) => {
+      const handle = await page.evaluateHandle(() => ({foo: 'bar'}));
+      expect(handle.asElement()).toBe(null);
+    });
+  });
+
+  describe('ElementHandle.isIntersectingViewport', function() {
+    it('should work', async({page, server}) => {
+      await page.goto(server.PREFIX + '/offscreenbuttons.html');
+      for (let i = 0; i < 11; ++i) {
+        const button = await page.$('#btn' + i);
+        // All but last button are visible.
+        const visible = i < 10;
+        expect(await button.isIntersectingViewport()).toBe(visible);
+      }
+    });
+  });
+
+  describe('ElementHandle.boundingBox', function() {
+    it('should work', async({page, server}) => {
+      await page.setViewport({width: 500, height: 500});
+      await page.goto(server.PREFIX + '/grid.html');
+      const elementHandle = await page.$('.box:nth-of-type(13)');
+      const box = await elementHandle.boundingBox();
+      expect(box).toEqual({ x: 100, y: 50, width: 50, height: 50 });
+    });
+    xit('should handle nested frames', async({page, server}) => {
+      await page.setViewport({width: 500, height: 500});
+      await page.goto(server.PREFIX + '/frames/nested-frames.html');
+      const nestedFrame = page.frames()[1].childFrames()[1];
+      const elementHandle = await nestedFrame.$('div');
+      const box = await elementHandle.boundingBox();
+      await new Promise(() => {});
+      expect(box).toEqual({ x: 28, y: 260, width: 264, height: 18 });
+    });
+    it('should return null for invisible elements', async({page, server}) => {
+      await page.setContent('<div style="display:none">hi</div>');
+      const element = await page.$('div');
+      expect(await element.boundingBox()).toBe(null);
+    });
+    it('should force a layout', async({page, server}) => {
+      await page.setViewport({ width: 500, height: 500 });
+      await page.setContent('<div style="width: 100px; height: 100px">hello</div>');
+      const elementHandle = await page.$('div');
+      await page.evaluate(element => element.style.height = '200px', elementHandle);
+      const box = await elementHandle.boundingBox();
+      expect(box).toEqual({ x: 8, y: 8, width: 100, height: 200 });
+    });
+    it('should work with SVG nodes', async({page, server}) => {
+      await page.setContent(`
+        <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+          <rect id="theRect" x="30" y="50" width="200" height="300"></rect>
+        </svg>
+      `);
+      const element = await page.$('#therect');
+      const pptrBoundingBox = await element.boundingBox();
+      const webBoundingBox = await page.evaluate(e => {
+        const rect = e.getBoundingClientRect();
+        return {x: rect.x, y: rect.y, width: rect.width, height: rect.height};
+      }, element);
+      expect(pptrBoundingBox).toEqual(webBoundingBox);
+    });
+  });
+};