Add m-esr52 at 52.6.0

33 files changed, 3204 insertions, 0 deletions

diff --git a/devtools/client/responsive.html/test/browser/.eslintrc.js b/devtools/client/responsive.html/test/browser/.eslintrc.js
new file mode 100644
index 000000000..698ae9181
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the shared list of defined globals for mochitests.
+  "extends": "../../../../.eslintrc.mochitests.js"
+};
diff --git a/devtools/client/responsive.html/test/browser/browser.ini b/devtools/client/responsive.html/test/browser/browser.ini
new file mode 100644
index 000000000..71cf6d9b6
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser.ini
@@ -0,0 +1,44 @@
+[DEFAULT]
+tags = devtools
+subsuite = devtools
+# !e10s: RDM only works for remote tabs
+skip-if = !e10s
+support-files =
+  devices.json
+  doc_page_state.html
+  geolocation.html
+  head.js
+  touch.html
+  !/devtools/client/commandline/test/helpers.js
+  !/devtools/client/framework/test/shared-head.js
+  !/devtools/client/framework/test/shared-redux-head.js
+  !/devtools/client/inspector/test/shared-head.js
+  !/devtools/client/shared/test/test-actor.js
+  !/devtools/client/shared/test/test-actor-registry.js
+
+[browser_device_change.js]
+[browser_device_modal_error.js]
+[browser_device_modal_exit.js]
+[browser_device_modal_submit.js]
+[browser_device_width.js]
+[browser_dpr_change.js]
+[browser_exit_button.js]
+[browser_frame_script_active.js]
+[browser_menu_item_01.js]
+[browser_menu_item_02.js]
+[browser_mouse_resize.js]
+[browser_navigation.js]
+[browser_network_throttling.js]
+[browser_page_state.js]
+[browser_permission_doorhanger.js]
+[browser_resize_cmd.js]
+[browser_screenshot_button.js]
+[browser_tab_close.js]
+[browser_tab_remoteness_change.js]
+[browser_toolbox_computed_view.js]
+[browser_toolbox_rule_view.js]
+[browser_toolbox_swap_browsers.js]
+[browser_touch_device.js]
+[browser_touch_simulation.js]
+[browser_viewport_basics.js]
+[browser_window_close.js]
diff --git a/devtools/client/responsive.html/test/browser/browser_device_change.js b/devtools/client/responsive.html/test/browser/browser_device_change.js
new file mode 100644
index 000000000..b88f73522
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_device_change.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests changing viewport device
+const TEST_URL = "data:text/html;charset=utf-8,Device list test";
+
+const DEFAULT_DPPX = window.devicePixelRatio;
+const DEFAULT_UA = Cc["@mozilla.org/network/protocol;1?name=http"]
+  .getService(Ci.nsIHttpProtocolHandler)
+  .userAgent;
+
+const Types = require("devtools/client/responsive.html/types");
+
+const testDevice = {
+  "name": "Fake Phone RDM Test",
+  "width": 320,
+  "height": 570,
+  "pixelRatio": 5.5,
+  "userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+  "touch": true,
+  "firefoxOS": true,
+  "os": "custom",
+  "featured": true,
+};
+
+// Add the new device to the list
+addDeviceForTest(testDevice);
+
+addRDMTask(TEST_URL, function* ({ ui, manager }) {
+  let { store } = ui.toolWindow;
+
+  // Wait until the viewport has been added and the device list has been loaded
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.LOADED);
+
+  // Test defaults
+  testViewportDimensions(ui, 320, 480);
+  yield testUserAgent(ui, DEFAULT_UA);
+  yield testDevicePixelRatio(ui, DEFAULT_DPPX);
+  yield testTouchEventsOverride(ui, false);
+  testViewportDeviceSelectLabel(ui, "no device selected");
+
+  // Test device with custom properties
+  yield selectDevice(ui, "Fake Phone RDM Test");
+  yield waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
+  yield testUserAgent(ui, testDevice.userAgent);
+  yield testDevicePixelRatio(ui, testDevice.pixelRatio);
+  yield testTouchEventsOverride(ui, true);
+
+  // Test resetting device when resizing viewport
+  let deviceRemoved = once(ui, "device-removed");
+  yield testViewportResize(ui, ".viewport-vertical-resize-handle",
+    [-10, -10], [testDevice.width, testDevice.height - 10], [0, -10], ui);
+  yield deviceRemoved;
+  yield testUserAgent(ui, DEFAULT_UA);
+  yield testDevicePixelRatio(ui, DEFAULT_DPPX);
+  yield testTouchEventsOverride(ui, false);
+  testViewportDeviceSelectLabel(ui, "no device selected");
+
+  // Test device with generic properties
+  yield selectDevice(ui, "Laptop (1366 x 768)");
+  yield waitForViewportResizeTo(ui, 1366, 768);
+  yield testUserAgent(ui, DEFAULT_UA);
+  yield testDevicePixelRatio(ui, 1);
+  yield testTouchEventsOverride(ui, false);
+});
+
+function testViewportDimensions(ui, w, h) {
+  let viewport = ui.toolWindow.document.querySelector(".viewport-content");
+
+  is(ui.toolWindow.getComputedStyle(viewport).getPropertyValue("width"),
+     `${w}px`, `Viewport should have width of ${w}px`);
+  is(ui.toolWindow.getComputedStyle(viewport).getPropertyValue("height"),
+     `${h}px`, `Viewport should have height of ${h}px`);
+}
+
+function* testUserAgent(ui, expected) {
+  let ua = yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    return content.navigator.userAgent;
+  });
+  is(ua, expected, `UA should be set to ${expected}`);
+}
+
+function* testDevicePixelRatio(ui, expected) {
+  let dppx = yield getViewportDevicePixelRatio(ui);
+  is(dppx, expected, `devicePixelRatio should be set to ${expected}`);
+}
+
+function* getViewportDevicePixelRatio(ui) {
+  return yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    return content.devicePixelRatio;
+  });
+}
diff --git a/devtools/client/responsive.html/test/browser/browser_device_modal_error.js b/devtools/client/responsive.html/test/browser/browser_device_modal_error.js
new file mode 100644
index 000000000..d9308eb6c
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_device_modal_error.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test to check that RDM can handle properly an error in the device list
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+const Types = require("devtools/client/responsive.html/types");
+const { getStr } = require("devtools/client/responsive.html/utils/l10n");
+
+// Set a wrong URL for the device list file
+add_task(function* () {
+  yield SpecialPowers.pushPrefEnv({
+    set: [["devtools.devices.url", TEST_URI_ROOT + "wrong_devices_file.json"]],
+  });
+});
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+  let { store, document } = ui.toolWindow;
+  let select = document.querySelector(".viewport-device-selector");
+
+  // Wait until the viewport has been added and the device list state indicates
+  // an error
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.ERROR);
+
+  // The device selector placeholder should be set accordingly
+  let placeholder = select.options[select.selectedIndex].innerHTML;
+  ok(placeholder == getStr("responsive.deviceListError"),
+    "Device selector indicates an error");
+
+  // The device selector should be disabled
+  ok(select.disabled, "Device selector is disabled");
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js b/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js
new file mode 100644
index 000000000..30d057ebe
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_device_modal_exit.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test submitting display device changes on the device modal
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+const Types = require("devtools/client/responsive.html/types");
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+  let { store, document } = ui.toolWindow;
+  let modal = document.querySelector("#device-modal-wrapper");
+  let closeButton = document.querySelector("#device-close-button");
+
+  // Wait until the viewport has been added and the device list has been loaded
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.LOADED);
+
+  openDeviceModal(ui);
+
+  let preferredDevicesBefore = _loadPreferredDevices();
+
+  info("Check the first unchecked device and exit the modal.");
+  let uncheckedCb = [...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => !cb.checked)[0];
+  let value = uncheckedCb.value;
+  uncheckedCb.click();
+  closeButton.click();
+
+  ok(modal.classList.contains("closed") && !modal.classList.contains("opened"),
+    "The device modal is closed on exit.");
+
+  info("Check that the device list remains unchanged after exitting.");
+  let preferredDevicesAfter = _loadPreferredDevices();
+
+  is(preferredDevicesBefore.added.size, preferredDevicesAfter.added.size,
+    "Got expected number of added devices.");
+
+  is(preferredDevicesBefore.removed.size, preferredDevicesAfter.removed.size,
+    "Got expected number of removed devices.");
+
+  ok(!preferredDevicesAfter.removed.has(value),
+    value + " was not added to removed device list.");
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js b/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js
new file mode 100644
index 000000000..90f364ce7
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_device_modal_submit.js
@@ -0,0 +1,146 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test submitting display device changes on the device modal
+const { getDevices } = require("devtools/client/shared/devices");
+
+const addedDevice = {
+  "name": "Fake Phone RDM Test",
+  "width": 320,
+  "height": 570,
+  "pixelRatio": 1.5,
+  "userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+  "touch": true,
+  "firefoxOS": false,
+  "os": "custom",
+  "featured": true,
+};
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+const Types = require("devtools/client/responsive.html/types");
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+  let { store, document } = ui.toolWindow;
+  let modal = document.querySelector("#device-modal-wrapper");
+  let select = document.querySelector(".viewport-device-selector");
+  let submitButton = document.querySelector("#device-submit-button");
+
+  // Wait until the viewport has been added and the device list has been loaded
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.LOADED);
+
+  openDeviceModal(ui);
+
+  info("Checking displayed device checkboxes are checked in the device modal.");
+  let checkedCbs = [...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => cb.checked);
+
+  let remoteList = yield getDevices();
+
+  let featuredCount = remoteList.TYPES.reduce((total, type) => {
+    return total + remoteList[type].reduce((subtotal, device) => {
+      return subtotal + ((device.os != "fxos" && device.featured) ? 1 : 0);
+    }, 0);
+  }, 0);
+
+  is(featuredCount, checkedCbs.length,
+    "Got expected number of displayed devices.");
+
+  for (let cb of checkedCbs) {
+    ok(Object.keys(remoteList).filter(type => remoteList[type][cb.value]),
+      cb.value + " is correctly checked.");
+  }
+
+  // Tests where the user adds a non-featured device
+  info("Check the first unchecked device and submit new device list.");
+  let uncheckedCb = [...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => !cb.checked)[0];
+  let value = uncheckedCb.value;
+  uncheckedCb.click();
+  submitButton.click();
+
+  ok(modal.classList.contains("closed") && !modal.classList.contains("opened"),
+    "The device modal is closed on submit.");
+
+  info("Checking that the new device is added to the user preference list.");
+  let preferredDevices = _loadPreferredDevices();
+  ok(preferredDevices.added.has(value), value + " in user added list.");
+
+  info("Checking new device is added to the device selector.");
+  let options = [...select.options];
+  is(options.length - 2, featuredCount + 1,
+    "Got expected number of devices in device selector.");
+  ok(options.filter(o => o.value === value)[0],
+    value + " added to the device selector.");
+
+  info("Reopen device modal and check new device is correctly checked");
+  openDeviceModal(ui);
+  ok([...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => cb.checked && cb.value === value)[0],
+    value + " is checked in the device modal.");
+
+  // Tests where the user removes a featured device
+  info("Uncheck the first checked device different than the previous one");
+  let checkedCb = [...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => cb.checked && cb.value != value)[0];
+  let checkedVal = checkedCb.value;
+  checkedCb.click();
+  submitButton.click();
+
+  info("Checking that the device is removed from the user preference list.");
+  preferredDevices = _loadPreferredDevices();
+  ok(preferredDevices.removed.has(checkedVal), checkedVal + " in removed list");
+
+  info("Checking that the device is not in the device selector.");
+  options = [...select.options];
+  is(options.length - 2, featuredCount,
+    "Got expected number of devices in device selector.");
+  ok(!options.filter(o => o.value === checkedVal)[0],
+    checkedVal + " removed from the device selector.");
+
+  info("Reopen device modal and check device is correctly unchecked");
+  openDeviceModal(ui);
+  ok([...document.querySelectorAll(".device-input-checkbox")]
+    .filter(cb => !cb.checked && cb.value === checkedVal)[0],
+    checkedVal + " is unchecked in the device modal.");
+
+  // Let's add a dummy device to simulate featured flag changes for next test
+  addDeviceForTest(addedDevice);
+});
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+  let { store, document } = ui.toolWindow;
+  let select = document.querySelector(".viewport-device-selector");
+
+  // Wait until the viewport has been added and the device list has been loaded
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.LOADED);
+
+  openDeviceModal(ui);
+
+  let remoteList = yield getDevices();
+  let featuredCount = remoteList.TYPES.reduce((total, type) => {
+    return total + remoteList[type].reduce((subtotal, device) => {
+      return subtotal + ((device.os != "fxos" && device.featured) ? 1 : 0);
+    }, 0);
+  }, 0);
+  let preferredDevices = _loadPreferredDevices();
+
+  // Tests to prove that reloading the RDM didn't break our device list
+  info("Checking new featured device appears in the device selector.");
+  let options = [...select.options];
+  is(options.length - 2, featuredCount
+    - preferredDevices.removed.size + preferredDevices.added.size,
+    "Got expected number of devices in device selector.");
+
+  ok(options.filter(o => o.value === addedDevice.name)[0],
+    "dummy device added to the device selector.");
+
+  ok(options.filter(o => preferredDevices.added.has(o.value))[0],
+    "device added by user still in the device selector.");
+
+  ok(!options.filter(o => preferredDevices.removed.has(o.value))[0],
+    "device removed by user not in the device selector.");
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_device_width.js b/devtools/client/responsive.html/test/browser/browser_device_width.js
new file mode 100644
index 000000000..9489d8f0b
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_device_width.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+addRDMTask(TEST_URL, function* ({ ui, manager }) {
+  ok(ui, "An instance of the RDM should be attached to the tab.");
+  yield setViewportSize(ui, manager, 110, 500);
+
+  info("Checking initial width/height properties.");
+  yield doInitialChecks(ui);
+
+  info("Changing the RDM size");
+  yield setViewportSize(ui, manager, 90, 500);
+
+  info("Checking for screen props");
+  yield checkScreenProps(ui);
+
+  info("Setting docShell.deviceSizeIsPageSize to false");
+  yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    let docShell = content.QueryInterface(Ci.nsIInterfaceRequestor)
+                          .getInterface(Ci.nsIWebNavigation)
+                          .QueryInterface(Ci.nsIDocShell);
+    docShell.deviceSizeIsPageSize = false;
+  });
+
+  info("Checking for screen props once again.");
+  yield checkScreenProps2(ui);
+});
+
+function* doInitialChecks(ui) {
+  let { innerWidth, matchesMedia } = yield grabContentInfo(ui);
+  is(innerWidth, 110, "initial width should be 110px");
+  ok(!matchesMedia, "media query shouldn't match.");
+}
+
+function* checkScreenProps(ui) {
+  let { matchesMedia, screen } = yield grabContentInfo(ui);
+  ok(matchesMedia, "media query should match");
+  isnot(window.screen.width, screen.width,
+        "screen.width should not be the size of the screen.");
+  is(screen.width, 90, "screen.width should be the page width");
+  is(screen.height, 500, "screen.height should be the page height");
+}
+
+function* checkScreenProps2(ui) {
+  let { matchesMedia, screen } = yield grabContentInfo(ui);
+  ok(!matchesMedia, "media query should be re-evaluated.");
+  is(window.screen.width, screen.width,
+     "screen.width should be the size of the screen.");
+}
+
+function grabContentInfo(ui) {
+  return ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    return {
+      screen: {
+        width: content.screen.width,
+        height: content.screen.height
+      },
+      innerWidth: content.innerWidth,
+      matchesMedia: content.matchMedia("(max-device-width:100px)").matches
+    };
+  });
+}
diff --git a/devtools/client/responsive.html/test/browser/browser_dpr_change.js b/devtools/client/responsive.html/test/browser/browser_dpr_change.js
new file mode 100644
index 000000000..4c70087bf
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_dpr_change.js
@@ -0,0 +1,140 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests changing viewport DPR
+const TEST_URL = "data:text/html;charset=utf-8,DPR list test";
+const DEFAULT_DPPX = window.devicePixelRatio;
+const VIEWPORT_DPPX = DEFAULT_DPPX + 2;
+const Types = require("devtools/client/responsive.html/types");
+
+const testDevice = {
+  "name": "Fake Phone RDM Test",
+  "width": 320,
+  "height": 470,
+  "pixelRatio": 5.5,
+  "userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+  "touch": true,
+  "firefoxOS": true,
+  "os": "custom",
+  "featured": true,
+};
+
+// Add the new device to the list
+addDeviceForTest(testDevice);
+
+addRDMTask(TEST_URL, function* ({ ui, manager }) {
+  yield waitStartup(ui);
+
+  yield testDefaults(ui);
+  yield testChangingDevice(ui);
+  yield testResetWhenResizingViewport(ui);
+  yield testChangingDPR(ui);
+});
+
+function* waitStartup(ui) {
+  let { store } = ui.toolWindow;
+
+  // Wait until the viewport has been added and the device list has been loaded
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.LOADED);
+}
+
+function* testDefaults(ui) {
+  info("Test Defaults");
+
+  yield testDevicePixelRatio(ui, window.devicePixelRatio);
+  testViewportDPRSelect(ui, {value: window.devicePixelRatio, disabled: false});
+  testViewportDeviceSelectLabel(ui, "no device selected");
+}
+
+function* testChangingDevice(ui) {
+  info("Test Changing Device");
+
+  let waitPixelRatioChange = onceDevicePixelRatioChange(ui);
+
+  yield selectDevice(ui, testDevice.name);
+  yield waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
+  yield waitPixelRatioChange;
+  yield testDevicePixelRatio(ui, testDevice.pixelRatio);
+  testViewportDPRSelect(ui, {value: testDevice.pixelRatio, disabled: true});
+  testViewportDeviceSelectLabel(ui, testDevice.name);
+}
+
+function* testResetWhenResizingViewport(ui) {
+  info("Test reset when resizing the viewport");
+
+  let waitPixelRatioChange = onceDevicePixelRatioChange(ui);
+
+  let deviceRemoved = once(ui, "device-removed");
+  yield testViewportResize(ui, ".viewport-vertical-resize-handle",
+    [-10, -10], [testDevice.width, testDevice.height - 10], [0, -10], ui);
+  yield deviceRemoved;
+
+  yield waitPixelRatioChange;
+  yield testDevicePixelRatio(ui, window.devicePixelRatio);
+
+  testViewportDPRSelect(ui, {value: window.devicePixelRatio, disabled: false});
+  testViewportDeviceSelectLabel(ui, "no device selected");
+}
+
+function* testChangingDPR(ui) {
+  info("Test changing device pixel ratio");
+
+  let waitPixelRatioChange = onceDevicePixelRatioChange(ui);
+
+  yield selectDPR(ui, VIEWPORT_DPPX);
+  yield waitPixelRatioChange;
+  yield testDevicePixelRatio(ui, VIEWPORT_DPPX);
+  testViewportDPRSelect(ui, {value: VIEWPORT_DPPX, disabled: false});
+  testViewportDeviceSelectLabel(ui, "no device selected");
+}
+
+function testViewportDPRSelect(ui, expected) {
+  info("Test viewport's DPR Select");
+
+  let select = ui.toolWindow.document.querySelector("#global-dpr-selector > select");
+  is(select.value, expected.value,
+     `DPR Select value should be: ${expected.value}`);
+  is(select.disabled, expected.disabled,
+    `DPR Select should be ${expected.disabled ? "disabled" : "enabled"}.`);
+}
+
+function* testDevicePixelRatio(ui, expected) {
+  info("Test device pixel ratio");
+
+  let dppx = yield getViewportDevicePixelRatio(ui);
+  is(dppx, expected, `devicePixelRatio should be: ${expected}`);
+}
+
+function* getViewportDevicePixelRatio(ui) {
+  return yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    return content.devicePixelRatio;
+  });
+}
+
+function onceDevicePixelRatioChange(ui) {
+  return ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    info(`Listening for a pixel ratio change (current: ${content.devicePixelRatio}dppx)`);
+
+    let pixelRatio = content.devicePixelRatio;
+    let mql = content.matchMedia(`(resolution: ${pixelRatio}dppx)`);
+
+    return new Promise(resolve => {
+      const onWindowCreated = () => {
+        if (pixelRatio !== content.devicePixelRatio) {
+          resolve();
+        }
+      };
+
+      addEventListener("DOMWindowCreated", onWindowCreated, {once: true});
+
+      mql.addListener(function listener() {
+        mql.removeListener(listener);
+        removeEventListener("DOMWindowCreated", onWindowCreated, {once: true});
+        resolve();
+      });
+    });
+  });
+}
diff --git a/devtools/client/responsive.html/test/browser/browser_exit_button.js b/devtools/client/responsive.html/test/browser/browser_exit_button.js
new file mode 100644
index 000000000..62e652274
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_exit_button.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+// Test global exit button
+addRDMTask(TEST_URL, function* (...args) {
+  yield testExitButton(...args);
+});
+
+// Test global exit button on detached tab.
+// See Bug 1262806
+add_task(function* () {
+  let tab = yield addTab(TEST_URL);
+  let { ui, manager } = yield openRDM(tab);
+
+  yield waitBootstrap(ui);
+
+  let waitTabIsDetached = Promise.all([
+    once(tab, "TabClose"),
+    once(tab.linkedBrowser, "SwapDocShells")
+  ]);
+
+  // Detach the tab with RDM open.
+  let newWindow = gBrowser.replaceTabWithWindow(tab);
+
+  // Waiting the tab is detached.
+  yield waitTabIsDetached;
+
+  // Get the new tab instance.
+  tab = newWindow.gBrowser.tabs[0];
+
+  // Detaching a tab closes RDM.
+  ok(!manager.isActiveForTab(tab),
+    "Responsive Design Mode is not active for the tab");
+
+  // Reopen the RDM and test the exit button again.
+  yield testExitButton(yield openRDM(tab));
+  yield BrowserTestUtils.closeWindow(newWindow);
+});
+
+function* waitBootstrap(ui) {
+  let { toolWindow, tab } = ui;
+  let { store } = toolWindow;
+  let url = String(tab.linkedBrowser.currentURI.spec);
+
+  // Wait until the viewport has been added.
+  yield waitUntilState(store, state => state.viewports.length == 1);
+
+  // Wait until the document has been loaded.
+  yield waitForFrameLoad(ui, url);
+}
+
+function* testExitButton({ui, manager}) {
+  yield waitBootstrap(ui);
+
+  let exitButton = ui.toolWindow.document.getElementById("global-exit-button");
+
+  ok(manager.isActiveForTab(ui.tab),
+    "Responsive Design Mode active for the tab");
+
+  exitButton.click();
+
+  yield once(manager, "off");
+
+  ok(!manager.isActiveForTab(ui.tab),
+    "Responsive Design Mode is not active for the tab");
+}
diff --git a/devtools/client/responsive.html/test/browser/browser_frame_script_active.js b/devtools/client/responsive.html/test/browser/browser_frame_script_active.js
new file mode 100644
index 000000000..81449a340
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_frame_script_active.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Verify frame script is active when expected.
+
+const e10s = require("devtools/client/responsive.html/utils/e10s");
+
+const TEST_URL = "http://example.com/";
+add_task(function* () {
+  let tab = yield addTab(TEST_URL);
+
+  let { ui } = yield openRDM(tab);
+
+  let mm = ui.getViewportBrowser().messageManager;
+  let { active } = yield e10s.request(mm, "IsActive");
+  is(active, true, "Frame script is active");
+
+  yield closeRDM(tab);
+
+  // Must re-get the messageManager on each run since it changes when RDM opens
+  // or closes due to the design of swapFrameLoaders.  Also, we only have access
+  // to a valid `ui` instance while RDM is open.
+  mm = tab.linkedBrowser.messageManager;
+  ({ active } = yield e10s.request(mm, "IsActive"));
+  is(active, false, "Frame script is active");
+
+  // Try another round as well to be sure there is no state saved anywhere
+  ({ ui } = yield openRDM(tab));
+
+  mm = ui.getViewportBrowser().messageManager;
+  ({ active } = yield e10s.request(mm, "IsActive"));
+  is(active, true, "Frame script is active");
+
+  yield closeRDM(tab);
+
+  // Must re-get the messageManager on each run since it changes when RDM opens
+  // or closes due to the design of swapFrameLoaders.  Also, we only have access
+  // to a valid `ui` instance while RDM is open.
+  mm = tab.linkedBrowser.messageManager;
+  ({ active } = yield e10s.request(mm, "IsActive"));
+  is(active, false, "Frame script is active");
+
+  yield removeTab(tab);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_menu_item_01.js b/devtools/client/responsive.html/test/browser/browser_menu_item_01.js
new file mode 100644
index 000000000..8e1c1c4cd
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_menu_item_01.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test RDM menu item is checked when expected, on multiple tabs.
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+const tabUtils = require("sdk/tabs/utils");
+const { startup } = require("sdk/window/helpers");
+
+const activateTab = (tab) => new Promise(resolve => {
+  let { tabContainer } = tabUtils.getOwnerWindow(tab).gBrowser;
+
+  tabContainer.addEventListener("TabSelect", function listener({type}) {
+    tabContainer.removeEventListener(type, listener);
+    resolve();
+  });
+
+  tabUtils.activateTab(tab);
+});
+
+const isMenuChecked = () => {
+  let menu = document.getElementById("menu_responsiveUI");
+  return menu.getAttribute("checked") === "true";
+};
+
+add_task(function* () {
+  yield startup(window);
+
+  ok(!isMenuChecked(),
+    "RDM menu item is unchecked by default");
+
+  const tab = yield addTab(TEST_URL);
+
+  ok(!isMenuChecked(),
+    "RDM menu item is unchecked for new tab");
+
+  yield openRDM(tab);
+
+  ok(isMenuChecked(),
+    "RDM menu item is checked with RDM open");
+
+  const tab2 = yield addTab(TEST_URL);
+
+  ok(!isMenuChecked(),
+    "RDM menu item is unchecked for new tab");
+
+  yield activateTab(tab);
+
+  ok(isMenuChecked(),
+    "RDM menu item is checked for the tab where RDM is open");
+
+  yield closeRDM(tab);
+
+  ok(!isMenuChecked(),
+    "RDM menu item is unchecked after RDM is closed");
+
+  yield removeTab(tab);
+  yield removeTab(tab2);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_menu_item_02.js b/devtools/client/responsive.html/test/browser/browser_menu_item_02.js
new file mode 100644
index 000000000..166ecb8ae
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_menu_item_02.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test RDM menu item is checked when expected, on multiple windows.
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+const { getMostRecentBrowserWindow } = require("sdk/window/utils");
+
+const isMenuCheckedFor = ({document}) => {
+  let menu = document.getElementById("menu_responsiveUI");
+  return menu.getAttribute("checked") === "true";
+};
+
+add_task(function* () {
+  const window1 = yield BrowserTestUtils.openNewBrowserWindow();
+  let { gBrowser } = window1;
+
+  yield BrowserTestUtils.withNewTab({ gBrowser, url: TEST_URL },
+    function* (browser) {
+      let tab = gBrowser.getTabForBrowser(browser);
+
+      is(window1, getMostRecentBrowserWindow(),
+        "The new window is the active one");
+
+      ok(!isMenuCheckedFor(window1),
+        "RDM menu item is unchecked by default");
+
+      yield openRDM(tab);
+
+      ok(isMenuCheckedFor(window1),
+        "RDM menu item is checked with RDM open");
+
+      yield closeRDM(tab);
+
+      ok(!isMenuCheckedFor(window1),
+        "RDM menu item is unchecked with RDM closed");
+    });
+
+  yield BrowserTestUtils.closeWindow(window1);
+
+  is(window, getMostRecentBrowserWindow(),
+    "The original window is the active one");
+
+  ok(!isMenuCheckedFor(window),
+    "RDM menu item is unchecked");
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_mouse_resize.js b/devtools/client/responsive.html/test/browser/browser_mouse_resize.js
new file mode 100644
index 000000000..98ccdab69
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_mouse_resize.js
@@ -0,0 +1,27 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+addRDMTask(TEST_URL, function* ({ ui, manager }) {
+  let store = ui.toolWindow.store;
+
+  // Wait until the viewport has been added
+  yield waitUntilState(store, state => state.viewports.length == 1);
+
+  yield setViewportSize(ui, manager, 300, 300);
+
+  // Do horizontal + vertical resize
+  yield testViewportResize(ui, ".viewport-resize-handle",
+    [10, 10], [320, 310], [10, 10]);
+
+  // Do horizontal resize
+  yield testViewportResize(ui, ".viewport-horizontal-resize-handle",
+    [-10, 10], [300, 310], [-10, 0]);
+
+  // Do vertical resize
+  yield testViewportResize(ui, ".viewport-vertical-resize-handle",
+    [-10, -10], [300, 300], [0, -10], ui);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_navigation.js b/devtools/client/responsive.html/test/browser/browser_navigation.js
new file mode 100644
index 000000000..2c9f0027f
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_navigation.js
@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the primary browser navigation UI to verify it's connected to the viewport.
+
+const DUMMY_1_URL = "http://example.com/";
+const TEST_URL = `${URL_ROOT}doc_page_state.html`;
+const DUMMY_2_URL = "http://example.com/browser/";
+const DUMMY_3_URL = "http://example.com/browser/devtools/";
+
+add_task(function* () {
+  // Load up a sequence of pages:
+  // 0. DUMMY_1_URL
+  // 1. TEST_URL
+  // 2. DUMMY_2_URL
+  let tab = yield addTab(DUMMY_1_URL);
+  let browser = tab.linkedBrowser;
+  yield load(browser, TEST_URL);
+  yield load(browser, DUMMY_2_URL);
+
+  // Check session history state
+  let history = yield getSessionHistory(browser);
+  is(history.index, 2, "At page 2 in history");
+  is(history.entries.length, 3, "3 pages in history");
+  is(history.entries[0].uri, DUMMY_1_URL, "Page 0 URL matches");
+  is(history.entries[1].uri, TEST_URL, "Page 1 URL matches");
+  is(history.entries[2].uri, DUMMY_2_URL, "Page 2 URL matches");
+
+  // Go back one so we're at the test page
+  yield back(browser);
+
+  // Check session history state
+  history = yield getSessionHistory(browser);
+  is(history.index, 1, "At page 1 in history");
+  is(history.entries.length, 3, "3 pages in history");
+  is(history.entries[0].uri, DUMMY_1_URL, "Page 0 URL matches");
+  is(history.entries[1].uri, TEST_URL, "Page 1 URL matches");
+  is(history.entries[2].uri, DUMMY_2_URL, "Page 2 URL matches");
+
+  yield openRDM(tab);
+
+  ok(browser.webNavigation.canGoBack, "Going back is allowed");
+  ok(browser.webNavigation.canGoForward, "Going forward is allowed");
+  is(browser.documentURI.spec, TEST_URL, "documentURI matches page 1");
+  is(browser.contentTitle, "Page State Test", "contentTitle matches page 1");
+
+  yield forward(browser);
+
+  ok(browser.webNavigation.canGoBack, "Going back is allowed");
+  ok(!browser.webNavigation.canGoForward, "Going forward is not allowed");
+  is(browser.documentURI.spec, DUMMY_2_URL, "documentURI matches page 2");
+  is(browser.contentTitle, "mochitest index /browser/", "contentTitle matches page 2");
+
+  yield back(browser);
+  yield back(browser);
+
+  ok(!browser.webNavigation.canGoBack, "Going back is not allowed");
+  ok(browser.webNavigation.canGoForward, "Going forward is allowed");
+  is(browser.documentURI.spec, DUMMY_1_URL, "documentURI matches page 0");
+  is(browser.contentTitle, "mochitest index /", "contentTitle matches page 0");
+
+  let receivedStatusChanges = new Promise(resolve => {
+    let statusChangesSeen = 0;
+    let statusChangesExpected = 2;
+    let progressListener = {
+      onStatusChange(webProgress, request, status, message) {
+        info(message);
+        if (++statusChangesSeen == statusChangesExpected) {
+          gBrowser.removeProgressListener(progressListener);
+          ok(true, `${statusChangesExpected} status changes while loading`);
+          resolve();
+        }
+      }
+    };
+    gBrowser.addProgressListener(progressListener);
+  });
+  yield load(browser, DUMMY_3_URL);
+  yield receivedStatusChanges;
+
+  ok(browser.webNavigation.canGoBack, "Going back is allowed");
+  ok(!browser.webNavigation.canGoForward, "Going forward is not allowed");
+  is(browser.documentURI.spec, DUMMY_3_URL, "documentURI matches page 3");
+  is(browser.contentTitle, "mochitest index /browser/devtools/",
+     "contentTitle matches page 3");
+
+  yield closeRDM(tab);
+
+  // Check session history state
+  history = yield getSessionHistory(browser);
+  is(history.index, 1, "At page 1 in history");
+  is(history.entries.length, 2, "2 pages in history");
+  is(history.entries[0].uri, DUMMY_1_URL, "Page 0 URL matches");
+  is(history.entries[1].uri, DUMMY_3_URL, "Page 1 URL matches");
+
+  yield removeTab(tab);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_network_throttling.js b/devtools/client/responsive.html/test/browser/browser_network_throttling.js
new file mode 100644
index 000000000..18c4a90ed
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_network_throttling.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const throttlingProfiles = require("devtools/client/shared/network-throttling-profiles");
+
+// Tests changing network throttling
+const TEST_URL = "data:text/html;charset=utf-8,Network throttling test";
+
+addRDMTask(TEST_URL, function* ({ ui, manager }) {
+  let { store } = ui.toolWindow;
+
+  // Wait until the viewport has been added
+  yield waitUntilState(store, state => state.viewports.length == 1);
+
+  // Test defaults
+  testNetworkThrottlingSelectorLabel(ui, "No throttling");
+  yield testNetworkThrottlingState(ui, null);
+
+  // Test a fast profile
+  yield testThrottlingProfile(ui, "Wi-Fi");
+
+  // Test a slower profile
+  yield testThrottlingProfile(ui, "Regular 3G");
+
+  // Test switching back to no throttling
+  yield selectNetworkThrottling(ui, "No throttling");
+  testNetworkThrottlingSelectorLabel(ui, "No throttling");
+  yield testNetworkThrottlingState(ui, null);
+});
+
+function testNetworkThrottlingSelectorLabel(ui, expected) {
+  let selector = "#global-network-throttling-selector";
+  let select = ui.toolWindow.document.querySelector(selector);
+  is(select.selectedOptions[0].textContent, expected,
+    `Select label should be changed to ${expected}`);
+}
+
+var testNetworkThrottlingState = Task.async(function* (ui, expected) {
+  let state = yield ui.emulationFront.getNetworkThrottling();
+  Assert.deepEqual(state, expected, "Network throttling state should be " +
+                                    JSON.stringify(expected, null, 2));
+});
+
+var testThrottlingProfile = Task.async(function* (ui, profile) {
+  yield selectNetworkThrottling(ui, profile);
+  testNetworkThrottlingSelectorLabel(ui, profile);
+  let data = throttlingProfiles.find(({ id }) => id == profile);
+  let { download, upload, latency } = data;
+  yield testNetworkThrottlingState(ui, {
+    downloadThroughput: download,
+    uploadThroughput: upload,
+    latency,
+  });
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_page_state.js b/devtools/client/responsive.html/test/browser/browser_page_state.js
new file mode 100644
index 000000000..306900535
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_page_state.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test page state to ensure page is not reloaded and session history is not
+// modified.
+
+const DUMMY_1_URL = "http://example.com/";
+const TEST_URL = `${URL_ROOT}doc_page_state.html`;
+const DUMMY_2_URL = "http://example.com/browser/";
+
+add_task(function* () {
+  // Load up a sequence of pages:
+  // 0. DUMMY_1_URL
+  // 1. TEST_URL
+  // 2. DUMMY_2_URL
+  let tab = yield addTab(DUMMY_1_URL);
+  let browser = tab.linkedBrowser;
+  yield load(browser, TEST_URL);
+  yield load(browser, DUMMY_2_URL);
+
+  // Check session history state
+  let history = yield getSessionHistory(browser);
+  is(history.index, 2, "At page 2 in history");
+  is(history.entries.length, 3, "3 pages in history");
+  is(history.entries[0].uri, DUMMY_1_URL, "Page 0 URL matches");
+  is(history.entries[1].uri, TEST_URL, "Page 1 URL matches");
+  is(history.entries[2].uri, DUMMY_2_URL, "Page 2 URL matches");
+
+  // Go back one so we're at the test page
+  yield back(browser);
+
+  // Check session history state
+  history = yield getSessionHistory(browser);
+  is(history.index, 1, "At page 1 in history");
+  is(history.entries.length, 3, "3 pages in history");
+  is(history.entries[0].uri, DUMMY_1_URL, "Page 0 URL matches");
+  is(history.entries[1].uri, TEST_URL, "Page 1 URL matches");
+  is(history.entries[2].uri, DUMMY_2_URL, "Page 2 URL matches");
+
+  // Click on content to set an altered state that would be lost on reload
+  yield BrowserTestUtils.synthesizeMouseAtCenter("body", {}, browser);
+
+  let { ui } = yield openRDM(tab);
+
+  // Check color inside the viewport
+  let color = yield spawnViewportTask(ui, {}, function* () {
+    // eslint-disable-next-line mozilla/no-cpows-in-tests
+    return content.getComputedStyle(content.document.body)
+                  .getPropertyValue("background-color");
+  });
+  is(color, "rgb(0, 128, 0)",
+     "Content is still modified from click in viewport");
+
+  yield closeRDM(tab);
+
+  // Check color back in the browser tab
+  color = yield ContentTask.spawn(browser, {}, function* () {
+    // eslint-disable-next-line mozilla/no-cpows-in-tests
+    return content.getComputedStyle(content.document.body)
+                  .getPropertyValue("background-color");
+  });
+  is(color, "rgb(0, 128, 0)",
+     "Content is still modified from click in browser tab");
+
+  // Check session history state
+  history = yield getSessionHistory(browser);
+  is(history.index, 1, "At page 1 in history");
+  is(history.entries.length, 3, "3 pages in history");
+  is(history.entries[0].uri, DUMMY_1_URL, "Page 0 URL matches");
+  is(history.entries[1].uri, TEST_URL, "Page 1 URL matches");
+  is(history.entries[2].uri, DUMMY_2_URL, "Page 2 URL matches");
+
+  yield removeTab(tab);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_permission_doorhanger.js b/devtools/client/responsive.html/test/browser/browser_permission_doorhanger.js
new file mode 100644
index 000000000..68b594509
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_permission_doorhanger.js
@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that permission popups asking for user approval still appear in RDM
+const DUMMY_URL = "http://example.com/";
+const TEST_URL = `${URL_ROOT}geolocation.html`;
+
+function waitForGeolocationPrompt(win, browser) {
+  return new Promise(resolve => {
+    win.PopupNotifications.panel.addEventListener("popupshown", function popupShown() {
+      let notification = win.PopupNotifications.getNotification("geolocation", browser);
+      if (notification) {
+        win.PopupNotifications.panel.removeEventListener("popupshown", popupShown);
+        resolve();
+      }
+    });
+  });
+}
+
+add_task(function* () {
+  let tab = yield addTab(DUMMY_URL);
+  let browser = tab.linkedBrowser;
+  let win = browser.ownerGlobal;
+
+  let waitPromptPromise = waitForGeolocationPrompt(win, browser);
+
+  // Checks if a geolocation permission doorhanger appears when openning a page
+  // requesting geolocation
+  yield load(browser, TEST_URL);
+  yield waitPromptPromise;
+
+  ok(true, "Permission doorhanger appeared without RDM enabled");
+
+  // Lets switch back to the dummy website and enable RDM
+  yield load(browser, DUMMY_URL);
+  let { ui } = yield openRDM(tab);
+  let newBrowser = ui.getViewportBrowser();
+
+  waitPromptPromise = waitForGeolocationPrompt(win, newBrowser);
+
+  // Checks if the doorhanger appeared again when reloading the geolocation
+  // page inside RDM
+  yield load(browser, TEST_URL);
+  yield waitPromptPromise;
+
+  ok(true, "Permission doorhanger appeared inside RDM");
+
+  yield closeRDM(tab);
+  yield removeTab(tab);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_resize_cmd.js b/devtools/client/responsive.html/test/browser/browser_resize_cmd.js
new file mode 100644
index 000000000..7e96e866c
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_resize_cmd.js
@@ -0,0 +1,148 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* global ResponsiveUIManager */
+/* eslint key-spacing: 0 */
+
+add_task(function* () {
+  let manager = ResponsiveUIManager;
+  let done;
+
+  function isOpen() {
+    return ResponsiveUIManager.isActiveForTab(gBrowser.selectedTab);
+  }
+
+  const TEST_URL = "data:text/html;charset=utf-8,hi";
+  yield helpers.addTabWithToolbar(TEST_URL, (options) => {
+    return helpers.audit(options, [
+      {
+        setup() {
+          done = once(manager, "on");
+          return helpers.setInput(options, "resize toggle");
+        },
+        check: {
+          input:  "resize toggle",
+          hints:               "",
+          markup: "VVVVVVVVVVVVV",
+          status: "VALID"
+        },
+        exec: {
+          output: ""
+        },
+        post: Task.async(function* () {
+          yield done;
+          ok(isOpen(), "responsive mode is open");
+        }),
+      },
+      {
+        setup() {
+          done = once(manager, "off");
+          return helpers.setInput(options, "resize toggle");
+        },
+        check: {
+          input:  "resize toggle",
+          hints:               "",
+          markup: "VVVVVVVVVVVVV",
+          status: "VALID"
+        },
+        exec: {
+          output: ""
+        },
+        post: Task.async(function* () {
+          yield done;
+          ok(!isOpen(), "responsive mode is closed");
+        }),
+      },
+    ]);
+  });
+  yield helpers.addTabWithToolbar(TEST_URL, (options) => {
+    return helpers.audit(options, [
+      {
+        setup() {
+          done = once(manager, "on");
+          return helpers.setInput(options, "resize on");
+        },
+        check: {
+          input:  "resize on",
+          hints:           "",
+          markup: "VVVVVVVVV",
+          status: "VALID"
+        },
+        exec: {
+          output: ""
+        },
+        post: Task.async(function* () {
+          yield done;
+          ok(isOpen(), "responsive mode is open");
+        }),
+      },
+      {
+        setup() {
+          done = once(manager, "off");
+          return helpers.setInput(options, "resize off");
+        },
+        check: {
+          input:  "resize off",
+          hints:            "",
+          markup: "VVVVVVVVVV",
+          status: "VALID"
+        },
+        exec: {
+          output: ""
+        },
+        post: Task.async(function* () {
+          yield done;
+          ok(!isOpen(), "responsive mode is closed");
+        }),
+      },
+    ]);
+  });
+  yield helpers.addTabWithToolbar(TEST_URL, (options) => {
+    return helpers.audit(options, [
+      {
+        setup() {
+          done = once(manager, "on");
+          return helpers.setInput(options, "resize to 400 400");
+        },
+        check: {
+          input:  "resize to 400 400",
+          hints:                   "",
+          markup: "VVVVVVVVVVVVVVVVV",
+          status: "VALID",
+          args: {
+            width: { value: 400 },
+            height: { value: 400 },
+          }
+        },
+        exec: {
+          output: ""
+        },
+        post: Task.async(function* () {
+          yield done;
+          ok(isOpen(), "responsive mode is open");
+        }),
+      },
+      {
+        setup() {
+          done = once(manager, "off");
+          return helpers.setInput(options, "resize off");
+        },
+        check: {
+          input:  "resize off",
+          hints:            "",
+          markup: "VVVVVVVVVV",
+          status: "VALID"
+        },
+        exec: {
+          output: ""
+        },
+        post: Task.async(function* () {
+          yield done;
+          ok(!isOpen(), "responsive mode is closed");
+        }),
+      },
+    ]);
+  });
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_screenshot_button.js b/devtools/client/responsive.html/test/browser/browser_screenshot_button.js
new file mode 100644
index 000000000..60605c33b
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_screenshot_button.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test global exit button
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+const { OS } = require("resource://gre/modules/osfile.jsm");
+
+function* waitUntilScreenshot() {
+  return new Promise(Task.async(function* (resolve) {
+    let { Downloads } = require("resource://gre/modules/Downloads.jsm");
+    let list = yield Downloads.getList(Downloads.ALL);
+
+    let view = {
+      onDownloadAdded: download => {
+        download.whenSucceeded().then(() => {
+          resolve(download.target.path);
+          list.removeView(view);
+        });
+      }
+    };
+
+    yield list.addView(view);
+  }));
+}
+
+addRDMTask(TEST_URL, function* ({ ui: {toolWindow} }) {
+  let { store, document } = toolWindow;
+
+  // Wait until the viewport has been added
+  yield waitUntilState(store, state => state.viewports.length == 1);
+
+  info("Click the screenshot button");
+  let screenshotButton = document.getElementById("global-screenshot-button");
+  screenshotButton.click();
+
+  let whenScreenshotSucceeded = waitUntilScreenshot();
+
+  let filePath = yield whenScreenshotSucceeded;
+  let image = new Image();
+  image.src = OS.Path.toFileURI(filePath);
+
+  yield once(image, "load");
+
+  // We have only one viewport at the moment
+  let viewport = store.getState().viewports[0];
+  let ratio = window.devicePixelRatio;
+
+  is(image.width, viewport.width * ratio,
+    "screenshot width has the expected width");
+
+  is(image.height, viewport.height * ratio,
+    "screenshot width has the expected height");
+
+  yield OS.File.remove(filePath);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_tab_close.js b/devtools/client/responsive.html/test/browser/browser_tab_close.js
new file mode 100644
index 000000000..1c5ed7c91
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_tab_close.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Verify RDM closes synchronously when tabs are closed.
+
+const TEST_URL = "http://example.com/";
+
+add_task(function* () {
+  let tab = yield addTab(TEST_URL);
+
+  let { ui } = yield openRDM(tab);
+  let clientClosed = waitForClientClose(ui);
+
+  closeRDM(tab, {
+    reason: "TabClose",
+  });
+
+  // This flag is set at the end of `ResponsiveUI.destroy`.  If it is true
+  // without yielding on `closeRDM` above, then we must have closed
+  // synchronously.
+  is(ui.destroyed, true, "RDM closed synchronously");
+
+  yield clientClosed;
+  yield removeTab(tab);
+});
+
+add_task(function* () {
+  let tab = yield addTab(TEST_URL);
+
+  let { ui } = yield openRDM(tab);
+  let clientClosed = waitForClientClose(ui);
+
+  yield removeTab(tab);
+
+  // This flag is set at the end of `ResponsiveUI.destroy`.  If it is true without
+  // yielding on `closeRDM` itself and only removing the tab, then we must have closed
+  // synchronously in response to tab closing.
+  is(ui.destroyed, true, "RDM closed synchronously");
+
+  yield clientClosed;
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_tab_remoteness_change.js b/devtools/client/responsive.html/test/browser/browser_tab_remoteness_change.js
new file mode 100644
index 000000000..7ce32ff28
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_tab_remoteness_change.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Verify RDM closes synchronously when tabs change remoteness.
+
+const TEST_URL = "http://example.com/";
+
+add_task(function* () {
+  let tab = yield addTab(TEST_URL);
+
+  let { ui } = yield openRDM(tab);
+  let clientClosed = waitForClientClose(ui);
+
+  closeRDM(tab, {
+    reason: "BeforeTabRemotenessChange",
+  });
+
+  // This flag is set at the end of `ResponsiveUI.destroy`.  If it is true
+  // without yielding on `closeRDM` above, then we must have closed
+  // synchronously.
+  is(ui.destroyed, true, "RDM closed synchronously");
+
+  yield clientClosed;
+  yield removeTab(tab);
+});
+
+add_task(function* () {
+  let tab = yield addTab(TEST_URL);
+
+  let { ui } = yield openRDM(tab);
+  let clientClosed = waitForClientClose(ui);
+
+  // Load URL that requires the main process, forcing a remoteness flip
+  yield load(tab.linkedBrowser, "about:robots");
+
+  // This flag is set at the end of `ResponsiveUI.destroy`.  If it is true without
+  // yielding on `closeRDM` itself and only removing the tab, then we must have closed
+  // synchronously in response to tab closing.
+  is(ui.destroyed, true, "RDM closed synchronously");
+
+  yield clientClosed;
+  yield removeTab(tab);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_toolbox_computed_view.js b/devtools/client/responsive.html/test/browser/browser_toolbox_computed_view.js
new file mode 100644
index 000000000..b0b51aa42
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_toolbox_computed_view.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that when the viewport is resized, the computed-view refreshes.
+
+const TEST_URI = "data:text/html;charset=utf-8,<html><style>" +
+                 "div {" +
+                 "  width: 500px;" +
+                 "  height: 10px;" +
+                 "  background: purple;" +
+                 "} " +
+                 "@media screen and (max-width: 200px) {" +
+                 "  div { " +
+                 "    width: 100px;" +
+                 "  }" +
+                 "};" +
+                 "</style><div></div></html>";
+
+addRDMTask(TEST_URI, function* ({ ui, manager }) {
+  info("Open the responsive design mode and set its size to 500x500 to start");
+  yield setViewportSize(ui, manager, 500, 500);
+
+  info("Open the inspector, computed-view and select the test node");
+  let { inspector, view } = yield openComputedView();
+  yield selectNode("div", inspector);
+
+  info("Try shrinking the viewport and checking the applied styles");
+  yield testShrink(view, inspector, ui, manager);
+
+  info("Try growing the viewport and checking the applied styles");
+  yield testGrow(view, inspector, ui, manager);
+
+  yield closeToolbox();
+});
+
+function* testShrink(computedView, inspector, ui, manager) {
+  is(computedWidth(computedView), "500px", "Should show 500px initially.");
+
+  let onRefresh = inspector.once("computed-view-refreshed");
+  yield setViewportSize(ui, manager, 100, 100);
+  yield onRefresh;
+
+  is(computedWidth(computedView), "100px", "Should be 100px after shrinking.");
+}
+
+function* testGrow(computedView, inspector, ui, manager) {
+  let onRefresh = inspector.once("computed-view-refreshed");
+  yield setViewportSize(ui, manager, 500, 500);
+  yield onRefresh;
+
+  is(computedWidth(computedView), "500px", "Should be 500px after growing.");
+}
+
+function computedWidth(computedView) {
+  for (let prop of computedView.propertyViews) {
+    if (prop.name === "width") {
+      return prop.valueNode.textContent;
+    }
+  }
+  return null;
+}
diff --git a/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view.js b/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view.js
new file mode 100644
index 000000000..7cf012c44
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that when the viewport is resized, the rule-view refreshes.
+
+const TEST_URI = "data:text/html;charset=utf-8,<html><style>" +
+                 "div {" +
+                 "  width: 500px;" +
+                 "  height: 10px;" +
+                 "  background: purple;" +
+                 "} " +
+                 "@media screen and (max-width: 200px) {" +
+                 "  div { " +
+                 "    width: 100px;" +
+                 "  }" +
+                 "};" +
+                 "</style><div></div></html>";
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
+});
+
+addRDMTask(TEST_URI, function* ({ ui, manager }) {
+  info("Open the responsive design mode and set its size to 500x500 to start");
+  yield setViewportSize(ui, manager, 500, 500);
+
+  info("Open the inspector, rule-view and select the test node");
+  let { inspector, view } = yield openRuleView();
+  yield selectNode("div", inspector);
+
+  info("Try shrinking the viewport and checking the applied styles");
+  yield testShrink(view, ui, manager);
+
+  info("Try growing the viewport and checking the applied styles");
+  yield testGrow(view, ui, manager);
+
+  info("Check that ESC still opens the split console");
+  yield testEscapeOpensSplitConsole(inspector);
+
+  yield closeToolbox();
+});
+
+function* testShrink(ruleView, ui, manager) {
+  is(numberOfRules(ruleView), 2, "Should have two rules initially.");
+
+  info("Resize to 100x100 and wait for the rule-view to update");
+  let onRefresh = ruleView.once("ruleview-refreshed");
+  yield setViewportSize(ui, manager, 100, 100);
+  yield onRefresh;
+
+  is(numberOfRules(ruleView), 3, "Should have three rules after shrinking.");
+}
+
+function* testGrow(ruleView, ui, manager) {
+  info("Resize to 500x500 and wait for the rule-view to update");
+  let onRefresh = ruleView.once("ruleview-refreshed");
+  yield setViewportSize(ui, manager, 500, 500);
+  yield onRefresh;
+
+  is(numberOfRules(ruleView), 2, "Should have two rules after growing.");
+}
+
+function* testEscapeOpensSplitConsole(inspector) {
+  ok(!inspector._toolbox._splitConsole, "Console is not split.");
+
+  info("Press escape");
+  let onSplit = inspector._toolbox.once("split-console");
+  EventUtils.synthesizeKey("VK_ESCAPE", {});
+  yield onSplit;
+
+  ok(inspector._toolbox._splitConsole, "Console is split after pressing ESC.");
+}
+
+function numberOfRules(ruleView) {
+  return ruleView.element.querySelectorAll(".ruleview-code").length;
+}
diff --git a/devtools/client/responsive.html/test/browser/browser_toolbox_swap_browsers.js b/devtools/client/responsive.html/test/browser/browser_toolbox_swap_browsers.js
new file mode 100644
index 000000000..8f7afaf01
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_toolbox_swap_browsers.js
@@ -0,0 +1,128 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Verify that toolbox remains open when opening and closing RDM.
+
+const TEST_URL = "http://example.com/";
+
+function getServerConnections(browser) {
+  ok(browser.isRemoteBrowser, "Content browser is remote");
+  return ContentTask.spawn(browser, {}, function* () {
+    const Cu = Components.utils;
+    const { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
+    const { DebuggerServer } = require("devtools/server/main");
+    if (!DebuggerServer._connections) {
+      return 0;
+    }
+    return Object.getOwnPropertyNames(DebuggerServer._connections);
+  });
+}
+
+let checkServerConnectionCount = Task.async(function* (browser, expected, msg) {
+  let conns = yield getServerConnections(browser);
+  is(conns.length || 0, expected, "Server connection count: " + msg);
+});
+
+let checkToolbox = Task.async(function* (tab, location) {
+  let target = TargetFactory.forTab(tab);
+  ok(!!gDevTools.getToolbox(target), `Toolbox exists ${location}`);
+});
+
+add_task(function* setup() {
+  yield SpecialPowers.pushPrefEnv({
+    set: [["dom.ipc.processCount", 1]]
+  });
+});
+
+add_task(function* () {
+  let tab = yield addTab(TEST_URL);
+
+  let tabsInDifferentProcesses = E10S_MULTI_ENABLED &&
+    (gBrowser.tabs[0].linkedBrowser.frameLoader.childID !=
+     gBrowser.tabs[1].linkedBrowser.frameLoader.childID);
+
+  info("Open toolbox outside RDM");
+  {
+    // 0: No DevTools connections yet
+    yield checkServerConnectionCount(tab.linkedBrowser, 0,
+      "0: No DevTools connections yet");
+    let { toolbox } = yield openInspector();
+    if (tabsInDifferentProcesses) {
+      // 1: Two tabs open, but only one per content process
+      yield checkServerConnectionCount(tab.linkedBrowser, 1,
+        "1: Two tabs open, but only one per content process");
+    } else {
+      // 2: One for each tab (starting tab plus the one we opened)
+      yield checkServerConnectionCount(tab.linkedBrowser, 2,
+        "2: One for each tab (starting tab plus the one we opened)");
+    }
+    yield checkToolbox(tab, "outside RDM");
+    let { ui } = yield openRDM(tab);
+    if (tabsInDifferentProcesses) {
+      // 2: RDM UI adds an extra connection, 1 + 1 = 2
+      yield checkServerConnectionCount(ui.getViewportBrowser(), 2,
+        "2: RDM UI uses an extra connection");
+    } else {
+      // 3: RDM UI adds an extra connection, 2 + 1 = 3
+      yield checkServerConnectionCount(ui.getViewportBrowser(), 3,
+        "3: RDM UI uses an extra connection");
+    }
+    yield checkToolbox(tab, "after opening RDM");
+    yield closeRDM(tab);
+    if (tabsInDifferentProcesses) {
+      // 1: RDM UI closed, return to previous connection count
+      yield checkServerConnectionCount(tab.linkedBrowser, 1,
+        "1: RDM UI closed, return to previous connection count");
+    } else {
+      // 2: RDM UI closed, return to previous connection count
+      yield checkServerConnectionCount(tab.linkedBrowser, 2,
+        "2: RDM UI closed, return to previous connection count");
+    }
+    yield checkToolbox(tab, tab.linkedBrowser, "after closing RDM");
+    yield toolbox.destroy();
+    // 0: All DevTools usage closed
+    yield checkServerConnectionCount(tab.linkedBrowser, 0,
+      "0: All DevTools usage closed");
+  }
+
+  info("Open toolbox inside RDM");
+  {
+    // 0: No DevTools connections yet
+    yield checkServerConnectionCount(tab.linkedBrowser, 0,
+      "0: No DevTools connections yet");
+    let { ui } = yield openRDM(tab);
+    // 1: RDM UI uses an extra connection
+    yield checkServerConnectionCount(ui.getViewportBrowser(), 1,
+      "1: RDM UI uses an extra connection");
+    let { toolbox } = yield openInspector();
+    if (tabsInDifferentProcesses) {
+      // 2: Two tabs open, but only one per content process
+      yield checkServerConnectionCount(ui.getViewportBrowser(), 2,
+        "2: Two tabs open, but only one per content process");
+    } else {
+      // 3: One for each tab (starting tab plus the one we opened)
+      yield checkServerConnectionCount(ui.getViewportBrowser(), 3,
+        "3: One for each tab (starting tab plus the one we opened)");
+    }
+    yield checkToolbox(tab, ui.getViewportBrowser(), "inside RDM");
+    yield closeRDM(tab);
+    if (tabsInDifferentProcesses) {
+      // 1: RDM UI closed, one less connection
+      yield checkServerConnectionCount(tab.linkedBrowser, 1,
+        "1: RDM UI closed, one less connection");
+    } else {
+      // 2: RDM UI closed, one less connection
+      yield checkServerConnectionCount(tab.linkedBrowser, 2,
+        "2: RDM UI closed, one less connection");
+    }
+    yield checkToolbox(tab, tab.linkedBrowser, "after closing RDM");
+    yield toolbox.destroy();
+    // 0: All DevTools usage closed
+    yield checkServerConnectionCount(tab.linkedBrowser, 0,
+      "0: All DevTools usage closed");
+  }
+
+  yield removeTab(tab);
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_touch_device.js b/devtools/client/responsive.html/test/browser/browser_touch_device.js
new file mode 100644
index 000000000..aea6de2c4
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_touch_device.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests changing viewport touch simulation
+const TEST_URL = "data:text/html;charset=utf-8,touch simulation test";
+const Types = require("devtools/client/responsive.html/types");
+
+const testDevice = {
+  "name": "Fake Phone RDM Test",
+  "width": 320,
+  "height": 470,
+  "pixelRatio": 5.5,
+  "userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+  "touch": true,
+  "firefoxOS": true,
+  "os": "custom",
+  "featured": true,
+};
+
+// Add the new device to the list
+addDeviceForTest(testDevice);
+
+addRDMTask(TEST_URL, function* ({ ui, manager }) {
+  yield waitStartup(ui);
+
+  yield testDefaults(ui);
+  yield testChangingDevice(ui);
+  yield testResizingViewport(ui, true, false);
+  yield testEnableTouchSimulation(ui);
+  yield testResizingViewport(ui, false, true);
+});
+
+function* waitStartup(ui) {
+  let { store } = ui.toolWindow;
+
+  // Wait until the viewport has been added and the device list has been loaded
+  yield waitUntilState(store, state => state.viewports.length == 1
+    && state.devices.listState == Types.deviceListState.LOADED);
+}
+
+function* testDefaults(ui) {
+  info("Test Defaults");
+
+  yield testTouchEventsOverride(ui, false);
+  testViewportDeviceSelectLabel(ui, "no device selected");
+}
+
+function* testChangingDevice(ui) {
+  info("Test Changing Device");
+
+  yield selectDevice(ui, testDevice.name);
+  yield waitForViewportResizeTo(ui, testDevice.width, testDevice.height);
+  yield testTouchEventsOverride(ui, true);
+  testViewportDeviceSelectLabel(ui, testDevice.name);
+}
+
+function* testResizingViewport(ui, device, expected) {
+  info(`Test resizing the viewport, device ${device}, expected ${expected}`);
+
+  let deviceRemoved = once(ui, "device-removed");
+  yield testViewportResize(ui, ".viewport-vertical-resize-handle",
+    [-10, -10], [testDevice.width, testDevice.height - 10], [0, -10], ui);
+  if (device) {
+    yield deviceRemoved;
+  }
+  yield testTouchEventsOverride(ui, expected);
+  testViewportDeviceSelectLabel(ui, "no device selected");
+}
+
+function* testEnableTouchSimulation(ui) {
+  info("Test enabling touch simulation via button");
+
+  yield enableTouchSimulation(ui);
+  yield testTouchEventsOverride(ui, true);
+}
diff --git a/devtools/client/responsive.html/test/browser/browser_touch_simulation.js b/devtools/client/responsive.html/test/browser/browser_touch_simulation.js
new file mode 100644
index 000000000..12a718306
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_touch_simulation.js
@@ -0,0 +1,228 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test global touch simulation button
+
+const TEST_URL = `${URL_ROOT}touch.html`;
+const PREF_DOM_META_VIEWPORT_ENABLED = "dom.meta-viewport.enabled";
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+  yield waitBootstrap(ui);
+  yield testWithNoTouch(ui);
+  yield enableTouchSimulation(ui);
+  yield testWithTouch(ui);
+  yield testWithMetaViewportEnabled(ui);
+  yield testWithMetaViewportDisabled(ui);
+  testTouchButton(ui);
+});
+
+function* testWithNoTouch(ui) {
+  yield injectEventUtils(ui);
+  yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    let { EventUtils } = content;
+
+    let div = content.document.querySelector("div");
+    let x = 0, y = 0;
+
+    info("testWithNoTouch: Initial test parameter and mouse mouse outside div");
+    x = -1; y = -1;
+    yield EventUtils.synthesizeMouse(div, x, y,
+          { type: "mousemove", isSynthesized: false }, content);
+    div.style.transform = "none";
+    div.style.backgroundColor = "";
+
+    info("testWithNoTouch: Move mouse into the div element");
+    yield EventUtils.synthesizeMouseAtCenter(div,
+          { type: "mousemove", isSynthesized: false }, content);
+    is(div.style.backgroundColor, "red", "mouseenter or mouseover should work");
+
+    info("testWithNoTouch: Drag the div element");
+    yield EventUtils.synthesizeMouseAtCenter(div,
+          { type: "mousedown", isSynthesized: false }, content);
+    x = 100; y = 100;
+    yield EventUtils.synthesizeMouse(div, x, y,
+          { type: "mousemove", isSynthesized: false }, content);
+    is(div.style.transform, "none", "touchmove shouldn't work");
+    yield EventUtils.synthesizeMouse(div, x, y,
+          { type: "mouseup", isSynthesized: false }, content);
+
+    info("testWithNoTouch: Move mouse out of the div element");
+    x = -1; y = -1;
+    yield EventUtils.synthesizeMouse(div, x, y,
+          { type: "mousemove", isSynthesized: false }, content);
+    is(div.style.backgroundColor, "blue", "mouseout or mouseleave should work");
+
+    info("testWithNoTouch: Click the div element");
+    yield EventUtils.synthesizeClick(div);
+    is(div.dataset.isDelay, "false",
+      "300ms delay between touch events and mouse events should not work");
+  });
+}
+
+function* testWithTouch(ui) {
+  yield injectEventUtils(ui);
+
+  yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    let { EventUtils } = content;
+
+    let div = content.document.querySelector("div");
+    let x = 0, y = 0;
+
+    info("testWithTouch: Initial test parameter and mouse mouse outside div");
+    x = -1; y = -1;
+    yield EventUtils.synthesizeMouse(div, x, y,
+          { type: "mousemove", isSynthesized: false }, content);
+    div.style.transform = "none";
+    div.style.backgroundColor = "";
+
+    info("testWithTouch: Move mouse into the div element");
+    yield EventUtils.synthesizeMouseAtCenter(div,
+          { type: "mousemove", isSynthesized: false }, content);
+    isnot(div.style.backgroundColor, "red",
+      "mouseenter or mouseover should not work");
+
+    info("testWithTouch: Drag the div element");
+    yield EventUtils.synthesizeMouseAtCenter(div,
+          { type: "mousedown", isSynthesized: false }, content);
+    x = 100; y = 100;
+    yield EventUtils.synthesizeMouse(div, x, y,
+          { type: "mousemove", isSynthesized: false }, content);
+    isnot(div.style.transform, "none", "touchmove should work");
+    yield EventUtils.synthesizeMouse(div, x, y,
+          { type: "mouseup", isSynthesized: false }, content);
+
+    info("testWithTouch: Move mouse out of the div element");
+    x = -1; y = -1;
+    yield EventUtils.synthesizeMouse(div, x, y,
+          { type: "mousemove", isSynthesized: false }, content);
+    isnot(div.style.backgroundColor, "blue",
+      "mouseout or mouseleave should not work");
+  });
+}
+
+function* testWithMetaViewportEnabled(ui) {
+  yield SpecialPowers.pushPrefEnv({set: [[PREF_DOM_META_VIEWPORT_ENABLED, true]]});
+
+  yield injectEventUtils(ui);
+
+  yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    let { synthesizeClick } = content.EventUtils;
+
+    let meta = content.document.querySelector("meta[name=viewport]");
+    let div = content.document.querySelector("div");
+    div.dataset.isDelay = "false";
+
+    info("testWithMetaViewportEnabled: " +
+         "click the div element with <meta name='viewport'>");
+    meta.content = "";
+    yield synthesizeClick(div);
+    is(div.dataset.isDelay, "true",
+      "300ms delay between touch events and mouse events should work");
+
+    info("testWithMetaViewportEnabled: " +
+         "click the div element with " +
+         "<meta name='viewport' content='user-scalable=no'>");
+    meta.content = "user-scalable=no";
+    yield synthesizeClick(div);
+    is(div.dataset.isDelay, "false",
+      "300ms delay between touch events and mouse events should not work");
+
+    info("testWithMetaViewportEnabled: " +
+         "click the div element with " +
+         "<meta name='viewport' content='minimum-scale=maximum-scale'>");
+    meta.content = "minimum-scale=maximum-scale";
+    yield synthesizeClick(div);
+    is(div.dataset.isDelay, "false",
+      "300ms delay between touch events and mouse events should not work");
+
+    info("testWithMetaViewportEnabled: " +
+         "click the div element with " +
+         "<meta name='viewport' content='width=device-width'>");
+    meta.content = "width=device-width";
+    yield synthesizeClick(div);
+    is(div.dataset.isDelay, "false",
+      "300ms delay between touch events and mouse events should not work");
+  });
+}
+
+function* testWithMetaViewportDisabled(ui) {
+  yield SpecialPowers.pushPrefEnv({set: [[PREF_DOM_META_VIEWPORT_ENABLED, false]]});
+
+  yield injectEventUtils(ui);
+
+  yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    let { synthesizeClick } = content.EventUtils;
+
+    let meta = content.document.querySelector("meta[name=viewport]");
+    let div = content.document.querySelector("div");
+    div.dataset.isDelay = "false";
+
+    info("testWithMetaViewportDisabled: click the div with <meta name='viewport'>");
+    meta.content = "";
+    yield synthesizeClick(div);
+    is(div.dataset.isDelay, "true",
+      "300ms delay between touch events and mouse events should work");
+  });
+}
+
+function testTouchButton(ui) {
+  let { document } = ui.toolWindow;
+  let touchButton = document.querySelector("#global-touch-simulation-button");
+
+  ok(touchButton.classList.contains("active"),
+    "Touch simulation is active at end of test.");
+
+  touchButton.click();
+
+  ok(!touchButton.classList.contains("active"),
+    "Touch simulation is stopped on click.");
+
+  touchButton.click();
+
+  ok(touchButton.classList.contains("active"),
+    "Touch simulation is started on click.");
+}
+
+function* waitBootstrap(ui) {
+  let { store } = ui.toolWindow;
+
+  yield waitUntilState(store, state => state.viewports.length == 1);
+  yield waitForFrameLoad(ui, TEST_URL);
+}
+
+function* injectEventUtils(ui) {
+  yield ContentTask.spawn(ui.getViewportBrowser(), {}, function* () {
+    if ("EventUtils" in content) {
+      return;
+    }
+
+    let EventUtils = content.EventUtils = {};
+
+    EventUtils.window = {};
+    EventUtils.parent = EventUtils.window;
+    /* eslint-disable camelcase */
+    EventUtils._EU_Ci = Components.interfaces;
+    EventUtils._EU_Cc = Components.classes;
+    /* eslint-enable camelcase */
+    // EventUtils' `sendChar` function relies on the navigator to synthetize events.
+    EventUtils.navigator = content.navigator;
+    EventUtils.KeyboardEvent = content.KeyboardEvent;
+
+    EventUtils.synthesizeClick = element => new Promise(resolve => {
+      element.addEventListener("click", function onClick() {
+        element.removeEventListener("click", onClick);
+        resolve();
+      });
+
+      EventUtils.synthesizeMouseAtCenter(element,
+        { type: "mousedown", isSynthesized: false }, content);
+      EventUtils.synthesizeMouseAtCenter(element,
+        { type: "mouseup", isSynthesized: false }, content);
+    });
+
+    Services.scriptloader.loadSubScript(
+      "chrome://mochikit/content/tests/SimpleTest/EventUtils.js", EventUtils);
+  });
+}
diff --git a/devtools/client/responsive.html/test/browser/browser_viewport_basics.js b/devtools/client/responsive.html/test/browser/browser_viewport_basics.js
new file mode 100644
index 000000000..86fc41da9
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_viewport_basics.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test viewports basics after opening, like size and location
+
+const TEST_URL = "http://example.org/";
+
+addRDMTask(TEST_URL, function* ({ ui }) {
+  let store = ui.toolWindow.store;
+
+  // Wait until the viewport has been added
+  yield waitUntilState(store, state => state.viewports.length == 1);
+
+  // A single viewport of default size appeared
+  let viewport = ui.toolWindow.document.querySelector(".viewport-content");
+
+  is(ui.toolWindow.getComputedStyle(viewport).getPropertyValue("width"),
+     "320px", "Viewport has default width");
+  is(ui.toolWindow.getComputedStyle(viewport).getPropertyValue("height"),
+     "480px", "Viewport has default height");
+
+  // Browser's location should match original tab
+  yield waitForFrameLoad(ui, TEST_URL);
+  let location = yield spawnViewportTask(ui, {}, function* () {
+    return content.location.href; // eslint-disable-line
+  });
+  is(location, TEST_URL, "Viewport location matches");
+});
diff --git a/devtools/client/responsive.html/test/browser/browser_window_close.js b/devtools/client/responsive.html/test/browser/browser_window_close.js
new file mode 100644
index 000000000..29d9d1e34
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/browser_window_close.js
@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+add_task(function* () {
+  let newWindowPromise = BrowserTestUtils.waitForNewWindow();
+  window.open("data:text/html;charset=utf-8,", "_blank");
+  let newWindow = yield newWindowPromise;
+
+  newWindow.focus();
+  yield once(newWindow.gBrowser, "load", true);
+
+  let tab = newWindow.gBrowser.selectedTab;
+  yield openRDM(tab);
+
+  // Close the window on a tab with an active responsive design UI and
+  // wait for the UI to gracefully shutdown.  This has leaked the window
+  // in the past.
+  ok(ResponsiveUIManager.isActiveForTab(tab),
+     "ResponsiveUI should be active for tab when the window is closed");
+  let offPromise = once(ResponsiveUIManager, "off");
+  yield BrowserTestUtils.closeWindow(newWindow);
+  yield offPromise;
+});
diff --git a/devtools/client/responsive.html/test/browser/devices.json b/devtools/client/responsive.html/test/browser/devices.json
new file mode 100644
index 000000000..c3f2bb363
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/devices.json
@@ -0,0 +1,651 @@
+{
+  "TYPES": [ "phones", "tablets", "laptops", "televisions", "consoles", "watches" ],
+  "phones": [
+    {
+      "name": "Firefox OS Flame",
+      "width": 320,
+      "height": 570,
+      "pixelRatio": 1.5,
+      "userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "Alcatel One Touch Fire",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; ALCATELOneTouch4012X; rv:28.0) Gecko/28.0 Firefox/28.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "Alcatel One Touch Fire C",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; ALCATELOneTouch4019X; rv:28.0) Gecko/28.0 Firefox/28.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "Alcatel One Touch Fire E",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (Mobile; ALCATELOneTouch6015X; rv:32.0) Gecko/32.0 Firefox/32.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "Apple iPhone 4",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios"
+    },
+    {
+      "name": "Apple iPhone 5",
+      "width": 320,
+      "height": 568,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios"
+    },
+    {
+      "name": "Apple iPhone 5s",
+      "width": 320,
+      "height": 568,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 9_2_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13D15 Safari/601.1",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios",
+      "featured": true
+    },
+    {
+      "name": "Apple iPhone 6",
+      "width": 375,
+      "height": 667,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios"
+    },
+    {
+      "name": "Apple iPhone 6 Plus",
+      "width": 414,
+      "height": 736,
+      "pixelRatio": 3,
+      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios",
+      "featured": true
+    },
+    {
+      "name": "Apple iPhone 6s",
+      "width": 375,
+      "height": 667,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios",
+      "featured": true
+    },
+    {
+      "name": "Apple iPhone 6s Plus",
+      "width": 414,
+      "height": 736,
+      "pixelRatio": 3,
+      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios"
+    },
+    {
+      "name": "BlackBerry Z30",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "blackberryos"
+    },
+    {
+      "name": "Geeksphone Keon",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    },
+    {
+      "name": "Geeksphone Peak, Revolution",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 1.5,
+      "userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    },
+    {
+      "name": "Google Nexus S",
+      "width": 320,
+      "height": 533,
+      "pixelRatio": 1.5,
+      "userAgent": "Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Nexus S Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    },
+    {
+      "name": "Google Nexus 4",
+      "width": 384,
+      "height": 640,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (Linux; Android 4.4.4; en-us; Nexus 4 Build/JOP40D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2307.2 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android",
+      "featured": true
+    },
+    {
+      "name": "Google Nexus 5",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 3,
+      "userAgent": "Mozilla/5.0 (Linux; Android 4.4.4; en-us; Nexus 5 Build/JOP40D) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2307.2 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android",
+      "featured": true
+    },
+    {
+      "name": "Google Nexus 6",
+      "width": 412,
+      "height": 732,
+      "pixelRatio": 3.5,
+      "userAgent": "Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.23 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android",
+      "featured": true
+    },
+    {
+      "name": "Intex Cloud Fx",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "KDDI Fx0",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (Mobile; LGL25; rv:32.0) Gecko/32.0 Firefox/32.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "LG Fireweb",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; LG-D300; rv:18.1) Gecko/18.1 Firefox/18.1",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "LG Optimus L70",
+      "width": 384,
+      "height": 640,
+      "pixelRatio": 1.25,
+      "userAgent": "Mozilla/5.0 (Linux; U; Android 4.4.2; en-us; LGMS323 Build/KOT49I.MS32310c) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.1599.103 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android"
+    },
+    {
+      "name": "Nokia Lumia 520",
+      "width": 320,
+      "height": 533,
+      "pixelRatio": 1.4,
+      "userAgent": "Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android",
+      "featured": true
+    },
+    {
+      "name": "Nokia N9",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android"
+    },
+    {
+      "name": "OnePlus One",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 3,
+      "userAgent": "Mozilla/5.0 (Android 5.1.1; Mobile; rv:43.0) Gecko/43.0 Firefox/43.0",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android"
+    },
+    {
+      "name": "Samsung Galaxy S3",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android"
+    },
+    {
+      "name": "Samsung Galaxy S4",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 3,
+      "userAgent": "Mozilla/5.0 (Linux; Android 4.4.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android"
+    },
+    {
+      "name": "Samsung Galaxy S5",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 3,
+      "userAgent": "Mozilla/5.0 (Linux; Android 4.4.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android",
+      "featured": true
+    },
+    {
+      "name": "Samsung Galaxy S6",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 4,
+      "userAgent": "Mozilla/5.0 (Linux; Android 4.4.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Version/1.5 Chrome/28.0.1500.94 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android",
+      "featured": true
+    },
+    {
+      "name": "Sony Xperia Z3",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 3,
+      "userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    },
+    {
+      "name": "Spice Fire One Mi-FX1",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; rv:28.0) Gecko/28.0 Firefox/28.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "Symphony GoFox F15",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "ZTE Open",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; ZTEOPEN; rv:18.1) Gecko/18.0 Firefox/18.1",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "ZTE Open II",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; OPEN2; rv:28.0) Gecko/28.0 Firefox/28.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "ZTE Open C",
+      "width": 320,
+      "height": 450,
+      "pixelRatio": 1.5,
+      "userAgent": "Mozilla/5.0 (Mobile; OPENC; rv:32.0) Gecko/32.0 Firefox/32.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    },
+    {
+      "name": "Zen Fire 105",
+      "width": 320,
+      "height": 480,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Mobile; rv:28.0) Gecko/28.0 Firefox/28.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    }
+  ],
+  "tablets": [
+    {
+      "name": "Amazon Kindle Fire HDX 8.9",
+      "width": 1280,
+      "height": 800,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (Linux; U; en-us; KFAPWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "fireos",
+      "featured": true
+    },
+    {
+      "name": "Apple iPad",
+      "width": 1024,
+      "height": 768,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios"
+    },
+    {
+      "name": "Apple iPad Air 2",
+      "width": 1024,
+      "height": 768,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (iPad; CPU OS 4_3_5 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios",
+      "featured": true
+    },
+    {
+      "name": "Apple iPad Mini",
+      "width": 1024,
+      "height": 768,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (iPad; CPU OS 4_3_5 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios"
+    },
+    {
+      "name": "Apple iPad Mini 2",
+      "width": 1024,
+      "height": 768,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (iPad; CPU OS 4_3_5 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "ios",
+      "featured": true
+    },
+    {
+      "name": "BlackBerry PlayBook",
+      "width": 1024,
+      "height": 600,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "blackberryos"
+    },
+    {
+      "name": "Foxconn InFocus",
+      "width": 1280,
+      "height": 800,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Tablet; rv:32.0) Gecko/32.0 Firefox/32.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    },
+    {
+      "name": "Google Nexus 7",
+      "width": 960,
+      "height": 600,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2307.2 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android",
+      "featured": true
+    },
+    {
+      "name": "Google Nexus 10",
+      "width": 1280,
+      "height": 800,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (Linux; Android 4.3; Nexus 10 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2307.2 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android"
+    },
+    {
+      "name": "Samsung Galaxy Note 2",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 2,
+      "userAgent": "Mozilla/5.0 (Linux; U; Android 4.1; en-us; GT-N7100 Build/JRO03C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android"
+    },
+    {
+      "name": "Samsung Galaxy Note 3",
+      "width": 360,
+      "height": 640,
+      "pixelRatio": 3,
+      "userAgent": "Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "android",
+      "featured": true
+    },
+    {
+      "name": "Tesla Model S",
+      "width": 1200,
+      "height": 1920,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (X11; Linux) AppleWebKit/534.34 (KHTML, like Gecko) QtCarBrowser Safari/534.34",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "linux"
+    },
+    {
+      "name": "VIA Vixen",
+      "width": 1024,
+      "height": 600,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Tablet; rv:32.0) Gecko/32.0 Firefox/32.0",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "fxos"
+    }
+  ],
+  "laptops": [
+    {
+      "name": "Laptop (1366 x 768)",
+      "width": 1366,
+      "height": 768,
+      "pixelRatio": 1,
+      "userAgent": "",
+      "touch": false,
+      "firefoxOS": false,
+      "os": "windows",
+      "featured": true
+    },
+    {
+      "name": "Laptop (1920 x 1080)",
+      "width": 1280,
+      "height": 720,
+      "pixelRatio": 1.5,
+      "userAgent": "",
+      "touch": false,
+      "firefoxOS": false,
+      "os": "windows",
+      "featured": true
+    },
+    {
+      "name": "Laptop (1920 x 1080) with touch",
+      "width": 1280,
+      "height": 720,
+      "pixelRatio": 1.5,
+      "userAgent": "",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "windows"
+    }
+  ],
+  "televisions": [
+    {
+      "name": "720p HD Television",
+      "width": 1280,
+      "height": 720,
+      "pixelRatio": 1,
+      "userAgent": "",
+      "touch": false,
+      "firefoxOS": true,
+      "os": "custom"
+    },
+    {
+      "name": "1080p Full HD Television",
+      "width": 1920,
+      "height": 1080,
+      "pixelRatio": 1,
+      "userAgent": "",
+      "touch": false,
+      "firefoxOS": true,
+      "os": "custom"
+    },
+    {
+      "name": "4K Ultra HD Television",
+      "width": 3840,
+      "height": 2160,
+      "pixelRatio": 1,
+      "userAgent": "",
+      "touch": false,
+      "firefoxOS": true,
+      "os": "custom"
+    }
+  ],
+  "consoles": [
+    {
+      "name": "Nintendo 3DS",
+      "width": 320,
+      "height": 240,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Nintendo 3DS; U; ; en) Version/1.7585.EU",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "nintendo"
+    },
+    {
+      "name": "Nintendo Wii U Gamepad",
+      "width": 854,
+      "height": 480,
+      "pixelRatio": 0.87,
+      "userAgent": "Mozilla/5.0 (Nintendo WiiU) AppleWebKit/536.28 (KHTML, like Gecko) NX/3.0.3.12.15 NintendoBrowser/4.1.1.9601.EU",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "nintendo"
+    },
+    {
+      "name": "Sony PlayStation Vita",
+      "width": 960,
+      "height": 544,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Playstation Vita 1.61) AppleWebKit/531.22.8 (KHTML, like Gecko) Silk/3.2",
+      "touch": true,
+      "firefoxOS": false,
+      "os": "playstation"
+    }
+  ],
+  "watches": [
+    {
+      "name": "LG G Watch",
+      "width": 280,
+      "height": 280,
+      "pixelRatio": 1,
+      "userAgent": "",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    },
+    {
+      "name": "LG G Watch R",
+      "width": 320,
+      "height": 320,
+      "pixelRatio": 1,
+      "userAgent": "",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    },
+    {
+      "name": "Motorola Moto 360",
+      "width": 320,
+      "height": 290,
+      "pixelRatio": 1,
+      "userAgent": "Mozilla/5.0 (Linux; Android 5.0.1; Moto 360 Build/LWX48T) AppleWebkit/537.36 (KHTML, like Gecko) Chrome/19.77.34.5 Mobile Safari/537.36",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    },
+    {
+      "name": "Samsung Gear Live",
+      "width": 320,
+      "height": 320,
+      "pixelRatio": 1,
+      "userAgent": "",
+      "touch": true,
+      "firefoxOS": true,
+      "os": "android"
+    }
+  ]
+}
diff --git a/devtools/client/responsive.html/test/browser/doc_page_state.html b/devtools/client/responsive.html/test/browser/doc_page_state.html
new file mode 100644
index 000000000..fb4d2acf0
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/doc_page_state.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Page State Test</title>
+    <style>
+      body {
+        height: 100vh;
+        background: red;
+      }
+      body.modified {
+        background: green;
+      }
+    </style>
+  </head>
+  <body onclick="this.classList.add('modified')"/>
+</html>
diff --git a/devtools/client/responsive.html/test/browser/geolocation.html b/devtools/client/responsive.html/test/browser/geolocation.html
new file mode 100644
index 000000000..03d105a19
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/geolocation.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Geolocation permission test</title>
+  </head>
+  <body>
+    <script type="text/javascript">
+      "use strict";
+      navigator.geolocation.getCurrentPosition(function (pos) {});
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/devtools/client/responsive.html/test/browser/head.js b/devtools/client/responsive.html/test/browser/head.js
new file mode 100644
index 000000000..3be69b0af
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/head.js
@@ -0,0 +1,401 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from ../../../framework/test/shared-head.js */
+/* import-globals-from ../../../framework/test/shared-redux-head.js */
+/* import-globals-from ../../../commandline/test/helpers.js */
+/* import-globals-from ../../../inspector/test/shared-head.js */
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/framework/test/shared-head.js",
+  this);
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/framework/test/shared-redux-head.js",
+  this);
+
+// Import the GCLI test helper
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/commandline/test/helpers.js",
+  this);
+
+// Import helpers registering the test-actor in remote targets
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/shared/test/test-actor-registry.js",
+  this);
+
+// Import helpers for the inspector that are also shared with others
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/shared-head.js",
+  this);
+
+const E10S_MULTI_ENABLED = Services.prefs.getIntPref("dom.ipc.processCount") > 1;
+const TEST_URI_ROOT = "http://example.com/browser/devtools/client/responsive.html/test/browser/";
+const OPEN_DEVICE_MODAL_VALUE = "OPEN_DEVICE_MODAL";
+
+const { _loadPreferredDevices } = require("devtools/client/responsive.html/actions/devices");
+const { getOwnerWindow } = require("sdk/tabs/utils");
+const asyncStorage = require("devtools/shared/async-storage");
+const { addDevice, removeDevice } = require("devtools/client/shared/devices");
+
+SimpleTest.requestCompleteLog();
+SimpleTest.waitForExplicitFinish();
+
+// Toggling the RDM UI involves several docShell swap operations, which are somewhat slow
+// on debug builds. Usually we are just barely over the limit, so a blanket factor of 2
+// should be enough.
+requestLongerTimeout(2);
+
+flags.testing = true;
+Services.prefs.clearUserPref("devtools.responsive.html.displayedDeviceList");
+Services.prefs.setCharPref("devtools.devices.url",
+  TEST_URI_ROOT + "devices.json");
+Services.prefs.setBoolPref("devtools.responsive.html.enabled", true);
+
+registerCleanupFunction(() => {
+  flags.testing = false;
+  Services.prefs.clearUserPref("devtools.devices.url");
+  Services.prefs.clearUserPref("devtools.responsive.html.enabled");
+  Services.prefs.clearUserPref("devtools.responsive.html.displayedDeviceList");
+  asyncStorage.removeItem("devtools.devices.url_cache");
+});
+
+// This depends on the "devtools.responsive.html.enabled" pref
+const { ResponsiveUIManager } = require("resource://devtools/client/responsivedesign/responsivedesign.jsm");
+
+/**
+ * Open responsive design mode for the given tab.
+ */
+var openRDM = Task.async(function* (tab) {
+  info("Opening responsive design mode");
+  let manager = ResponsiveUIManager;
+  let ui = yield manager.openIfNeeded(getOwnerWindow(tab), tab);
+  info("Responsive design mode opened");
+  return { ui, manager };
+});
+
+/**
+ * Close responsive design mode for the given tab.
+ */
+var closeRDM = Task.async(function* (tab, options) {
+  info("Closing responsive design mode");
+  let manager = ResponsiveUIManager;
+  yield manager.closeIfNeeded(getOwnerWindow(tab), tab, options);
+  info("Responsive design mode closed");
+});
+
+/**
+ * Adds a new test task that adds a tab with the given URL, opens responsive
+ * design mode, runs the given generator, closes responsive design mode, and
+ * removes the tab.
+ *
+ * Example usage:
+ *
+ *   addRDMTask(TEST_URL, function*({ ui, manager }) {
+ *     // Your tests go here...
+ *   });
+ */
+function addRDMTask(url, generator) {
+  add_task(function* () {
+    const tab = yield addTab(url);
+    const results = yield openRDM(tab);
+
+    try {
+      yield* generator(results);
+    } catch (err) {
+      ok(false, "Got an error: " + DevToolsUtils.safeErrorString(err));
+    }
+
+    yield closeRDM(tab);
+    yield removeTab(tab);
+  });
+}
+
+function spawnViewportTask(ui, args, task) {
+  return ContentTask.spawn(ui.getViewportBrowser(), args, task);
+}
+
+function waitForFrameLoad(ui, targetURL) {
+  return spawnViewportTask(ui, { targetURL }, function* (args) {
+    if ((content.document.readyState == "complete" ||
+         content.document.readyState == "interactive") &&
+        content.location.href == args.targetURL) {
+      return;
+    }
+    yield ContentTaskUtils.waitForEvent(this, "DOMContentLoaded");
+  });
+}
+
+function waitForViewportResizeTo(ui, width, height) {
+  return new Promise(Task.async(function* (resolve) {
+    let isSizeMatching = (data) => data.width == width && data.height == height;
+
+    // If the viewport has already the expected size, we resolve the promise immediately.
+    let size = yield getContentSize(ui);
+    if (isSizeMatching(size)) {
+      resolve();
+      return;
+    }
+
+    // Otherwise, we'll listen to both content's resize event and browser's load end;
+    // since a racing condition can happen, where the content's listener is added after
+    // the resize, because the content's document was reloaded; therefore the test would
+    // hang forever. See bug 1302879.
+    let browser = ui.getViewportBrowser();
+
+    let onResize = (_, data) => {
+      if (!isSizeMatching(data)) {
+        return;
+      }
+      ui.off("content-resize", onResize);
+      browser.removeEventListener("mozbrowserloadend", onBrowserLoadEnd);
+      info(`Got content-resize to ${width} x ${height}`);
+      resolve();
+    };
+
+    let onBrowserLoadEnd = Task.async(function* () {
+      let data = yield getContentSize(ui);
+      onResize(undefined, data);
+    });
+
+    info(`Waiting for content-resize to ${width} x ${height}`);
+    ui.on("content-resize", onResize);
+    browser.addEventListener("mozbrowserloadend",
+      onBrowserLoadEnd, { once: true });
+  }));
+}
+
+var setViewportSize = Task.async(function* (ui, manager, width, height) {
+  let size = ui.getViewportSize();
+  info(`Current size: ${size.width} x ${size.height}, ` +
+       `set to: ${width} x ${height}`);
+  if (size.width != width || size.height != height) {
+    let resized = waitForViewportResizeTo(ui, width, height);
+    ui.setViewportSize({ width, height });
+    yield resized;
+  }
+});
+
+function getElRect(selector, win) {
+  let el = win.document.querySelector(selector);
+  return el.getBoundingClientRect();
+}
+
+/**
+ * Drag an element identified by 'selector' by [x,y] amount. Returns
+ * the rect of the dragged element as it was before drag.
+ */
+function dragElementBy(selector, x, y, win) {
+  let React = win.require("devtools/client/shared/vendor/react");
+  let { Simulate } = React.addons.TestUtils;
+  let rect = getElRect(selector, win);
+  let startPoint = {
+    clientX: rect.left + Math.floor(rect.width / 2),
+    clientY: rect.top + Math.floor(rect.height / 2),
+  };
+  let endPoint = [ startPoint.clientX + x, startPoint.clientY + y ];
+
+  let elem = win.document.querySelector(selector);
+
+  // mousedown is a React listener, need to use its testing tools to avoid races
+  Simulate.mouseDown(elem, startPoint);
+
+  // mousemove and mouseup are regular DOM listeners
+  EventUtils.synthesizeMouseAtPoint(...endPoint, { type: "mousemove" }, win);
+  EventUtils.synthesizeMouseAtPoint(...endPoint, { type: "mouseup" }, win);
+
+  return rect;
+}
+
+function* testViewportResize(ui, selector, moveBy,
+                             expectedViewportSize, expectedHandleMove) {
+  let win = ui.toolWindow;
+  let resized = waitForViewportResizeTo(ui, ...expectedViewportSize);
+  let startRect = dragElementBy(selector, ...moveBy, win);
+  yield resized;
+
+  let endRect = getElRect(selector, win);
+  is(endRect.left - startRect.left, expectedHandleMove[0],
+    `The x move of ${selector} is as expected`);
+  is(endRect.top - startRect.top, expectedHandleMove[1],
+    `The y move of ${selector} is as expected`);
+}
+
+function openDeviceModal({ toolWindow }) {
+  let { document } = toolWindow;
+  let React = toolWindow.require("devtools/client/shared/vendor/react");
+  let { Simulate } = React.addons.TestUtils;
+  let select = document.querySelector(".viewport-device-selector");
+  let modal = document.querySelector("#device-modal-wrapper");
+
+  info("Checking initial device modal state");
+  ok(modal.classList.contains("closed") && !modal.classList.contains("opened"),
+    "The device modal is closed by default.");
+
+  info("Opening device modal through device selector.");
+  select.value = OPEN_DEVICE_MODAL_VALUE;
+  Simulate.change(select);
+  ok(modal.classList.contains("opened") && !modal.classList.contains("closed"),
+    "The device modal is displayed.");
+}
+
+function changeSelectValue({ toolWindow }, selector, value) {
+  info(`Selecting ${value} in ${selector}.`);
+
+  return new Promise(resolve => {
+    let select = toolWindow.document.querySelector(selector);
+    isnot(select, null, `selector "${selector}" should match an existing element.`);
+
+    let option = [...select.options].find(o => o.value === String(value));
+    isnot(option, undefined, `value "${value}" should match an existing option.`);
+
+    let event = new toolWindow.UIEvent("change", {
+      view: toolWindow,
+      bubbles: true,
+      cancelable: true
+    });
+
+    select.addEventListener("change", () => {
+      is(select.value, value,
+        `Select's option with value "${value}" should be selected.`);
+      resolve();
+    }, { once: true });
+
+    select.value = value;
+    select.dispatchEvent(event);
+  });
+}
+
+const selectDevice = (ui, value) => Promise.all([
+  once(ui, "device-changed"),
+  changeSelectValue(ui, ".viewport-device-selector", value)
+]);
+
+const selectDPR = (ui, value) =>
+  changeSelectValue(ui, "#global-dpr-selector > select", value);
+
+const selectNetworkThrottling = (ui, value) => Promise.all([
+  once(ui, "network-throttling-changed"),
+  changeSelectValue(ui, "#global-network-throttling-selector", value)
+]);
+
+function getSessionHistory(browser) {
+  return ContentTask.spawn(browser, {}, function* () {
+    /* eslint-disable no-undef */
+    let { interfaces: Ci } = Components;
+    let webNav = docShell.QueryInterface(Ci.nsIWebNavigation);
+    let sessionHistory = webNav.sessionHistory;
+    let result = {
+      index: sessionHistory.index,
+      entries: []
+    };
+
+    for (let i = 0; i < sessionHistory.count; i++) {
+      let entry = sessionHistory.getEntryAtIndex(i, false);
+      result.entries.push({
+        uri: entry.URI.spec,
+        title: entry.title
+      });
+    }
+
+    return result;
+    /* eslint-enable no-undef */
+  });
+}
+
+function getContentSize(ui) {
+  return spawnViewportTask(ui, {}, () => ({
+    width: content.screen.width,
+    height: content.screen.height
+  }));
+}
+
+function waitForPageShow(browser) {
+  let mm = browser.messageManager;
+  return new Promise(resolve => {
+    let onShow = message => {
+      if (message.target != browser) {
+        return;
+      }
+      mm.removeMessageListener("PageVisibility:Show", onShow);
+      resolve();
+    };
+    mm.addMessageListener("PageVisibility:Show", onShow);
+  });
+}
+
+function waitForViewportLoad(ui) {
+  return new Promise(resolve => {
+    let browser = ui.getViewportBrowser();
+    browser.addEventListener("mozbrowserloadend", () => {
+      resolve();
+    }, { once: true });
+  });
+}
+
+function load(browser, url) {
+  let loaded = BrowserTestUtils.browserLoaded(browser, false, url);
+  browser.loadURI(url, null, null);
+  return loaded;
+}
+
+function back(browser) {
+  let shown = waitForPageShow(browser);
+  browser.goBack();
+  return shown;
+}
+
+function forward(browser) {
+  let shown = waitForPageShow(browser);
+  browser.goForward();
+  return shown;
+}
+
+function addDeviceForTest(device) {
+  info(`Adding Test Device "${device.name}" to the list.`);
+  addDevice(device);
+
+  registerCleanupFunction(() => {
+    // Note that assertions in cleanup functions are not displayed unless they failed.
+    ok(removeDevice(device), `Removed Test Device "${device.name}" from the list.`);
+  });
+}
+
+function waitForClientClose(ui) {
+  return new Promise(resolve => {
+    info("Waiting for RDM debugger client to close");
+    ui.client.addOneTimeListener("closed", () => {
+      info("RDM's debugger client is now closed");
+      resolve();
+    });
+  });
+}
+
+function* testTouchEventsOverride(ui, expected) {
+  let { document } = ui.toolWindow;
+  let touchButton = document.querySelector("#global-touch-simulation-button");
+
+  let flag = yield ui.emulationFront.getTouchEventsOverride();
+  is(flag === Ci.nsIDocShell.TOUCHEVENTS_OVERRIDE_ENABLED, expected,
+    `Touch events override should be ${expected ? "enabled" : "disabled"}`);
+  is(touchButton.classList.contains("active"), expected,
+    `Touch simulation button should be ${expected ? "" : "in"}active.`);
+}
+
+function testViewportDeviceSelectLabel(ui, expected) {
+  info("Test viewport's device select label");
+
+  let select = ui.toolWindow.document.querySelector(".viewport-device-selector");
+  is(select.selectedOptions[0].textContent, expected,
+     `Device Select value should be: ${expected}`);
+}
+
+function* enableTouchSimulation(ui) {
+  let { document } = ui.toolWindow;
+  let touchButton = document.querySelector("#global-touch-simulation-button");
+  let loaded = waitForViewportLoad(ui);
+  touchButton.click();
+  yield loaded;
+}
diff --git a/devtools/client/responsive.html/test/browser/touch.html b/devtools/client/responsive.html/test/browser/touch.html
new file mode 100644
index 000000000..98aeac68f
--- /dev/null
+++ b/devtools/client/responsive.html/test/browser/touch.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8" />
+<meta name="viewport" />
+<title>test</title>
+
+
+<style>
+  div {
+    border :1px solid red;
+    width: 100px; height: 100px;
+  }
+</style>
+
+<div data-is-delay="false"></div>
+
+<script type="text/javascript;version=1.8">
+  "use strict";
+  let div = document.querySelector("div");
+  let initX, initY;
+  let previousEvent = "", touchendTime = 0;
+  let updatePreviousEvent = function (e) {
+    previousEvent = e.type;
+  };
+
+  div.style.transform = "none";
+  div.style.backgroundColor = "";
+
+  div.addEventListener("touchstart", function (evt) {
+    let touch = evt.changedTouches[0];
+    initX = touch.pageX;
+    initY = touch.pageY;
+    updatePreviousEvent(evt);
+  }, true);
+
+  div.addEventListener("touchmove", function (evt) {
+    let touch = evt.changedTouches[0];
+    let deltaX = touch.pageX - initX;
+    let deltaY = touch.pageY - initY;
+    div.style.transform = "translate(" + deltaX + "px, " + deltaY + "px)";
+    updatePreviousEvent(evt);
+  }, true);
+
+  div.addEventListener("touchend", function (evt) {
+    if (!evt.touches.length) {
+      div.style.transform = "none";
+    }
+    touchendTime = performance.now();
+    updatePreviousEvent(evt);
+  }, true);
+
+  div.addEventListener("mouseenter", function (evt) {
+    div.style.backgroundColor = "red";
+    updatePreviousEvent(evt);
+  }, true);
+  div.addEventListener("mouseover", function(evt) {
+    div.style.backgroundColor = "red";
+    updatePreviousEvent(evt);
+  }, true);
+
+  div.addEventListener("mouseout", function (evt) {
+    div.style.backgroundColor = "blue";
+    updatePreviousEvent(evt);
+  }, true);
+
+  div.addEventListener("mouseleave", function (evt) {
+    div.style.backgroundColor = "blue";
+    updatePreviousEvent(evt);
+  }, true);
+
+  div.addEventListener("mousedown", function (evt) {
+    if (previousEvent === "touchend" && touchendTime !== 0) {
+      let now = performance.now();
+      div.dataset.isDelay = ((now - touchendTime) >= 300);
+    } else {
+      div.dataset.isDelay = false;
+    }
+    updatePreviousEvent(evt);
+  }, true);
+
+  div.addEventListener("mousemove", updatePreviousEvent, true);
+
+  div.addEventListener("mouseup", updatePreviousEvent, true);
+
+  div.addEventListener("click", updatePreviousEvent, true);
+</script>