import changes from `dev' branch of rmottola/Arctic-Fox:

- Bug 1231975 - Part 3: Break a reference cycle between PendingResolution and DNSRequestChild. r=drno (ecf45de535) - Bug 1231975 - Part 4: Add some logging and simplification in TestNrSocket. r=drno (fa811f7743) - Bug 1231975 - Part 5: Fix an intermittent failure caused by the NAT simulator erroneously canceling NR_ASYNC_WAIT_READ. r=drno (e436a8cc75) - var-let (d228288673) - Bug 1256022 - dom/network slow GC on mochitest fix r=dragana (e0dffd5033) - Bug 1231130 - added mHadLocalInstance to constructor.r=jaas (c4f6d0c530) - Bug 1121290: Use "%ls" instead of "%s" in _snwprintf_s format string# r=bsmedberg (e0434aca5a) - Bug 1206952 - Rename MagicRequest to ByteRangeRequest. r=sicking (6780309aa2) - Bug 1206952 - Convert PluginStreamListener to use channel->AsyncOpen2(). r=sicking (8f41f3e148) - Bug 1262335 - Part 2. Remove Android GB/HC defines from OMX. r=snorp (e5b7435d92) - Bug 956899 - Add a std::condition_variable work-alike; r=froydnj (98076c707e) - Bug 1254123 - Handle OOM more gracefully in js::ErrorToException. (r=Waldo) (f9a2ef18d1) - Bug 1255128 - Standard argument coercion in new ArrayBuffer(length). r=nbp. Thanks to snowmantw for tests. (06e5cedd80) - Bug 1251919 - Nuke Debugger wrappers on failure. (r=shu) (64bc41b1f1) - Bug 1254190 - Propagate failure of matchAllDebuggeeGlobals() in Debugger. (r=shu) (927bf01ec5) - Bug 1254172 - Make UnboxedLayout::makeNativeGroup robust to unknownProperties on unboxed type. (r=jandem) (398a6b3aa7) - Bug 1268213 - BlobImplFile::GetTypeRunnable can be a WorkerMainThreadRunnable, r=khuey (30e4ff4b75) - Bug 1250523 - Wait for the markup-view to be loaded in browser_markup_load_01.js; r=gl (acf9e9d88b) - Bug 1230325 - markup-view: skip keyboard shortcuts if any modifier;r=pbrosset (ab974dfac7) - Bug 1155465 - part1: layout-view: use content-type CSS_VALUE for editors;r=miker (d21e70b811) - Bug 1155465 - part2: inplace-editor: disable increment on up/down for PLAIN_TEXT;r=miker (5d72e05f63) - Bug 1241126 - ruleview property: open editor for prop. name on click on ":";r=gl (4889010c34) - Bug 1128340 - Allow renaming with non-ASCII characters in WebIDE. r=jryans (f9844e3afb) - Bug 1039482 - Properly position and style the file name edit field in the projecteditor. r=bgrins (4c29b80958) - Bug 1268231 - Get rid of StopSyncLoopRunnable, r=khuey (29b0a0ed4f) - Bug 1267904 - Add telemetry for WorkerMainThreadRunnable, r=khuey (970d39bcce) - Bug 1261317 - part1: inplace-editor: small refactor of keypress event handler;r=pbro (5261bca85a) - Bug 1261317 - part2: prevent autocomplete on arrow keys in multiline editor;r=pbro (859738623a) - Bug 1246677 - 1 - Make waitForSuccess work with async functions; r=miker (3927347635) - Bug 1227810 - split browser_ruleview_authored.js into three tests; r=pbrosset (f6e4760908) - Bug 1246677 - 2 - Stop using CPOWs in simulateColorPickerChange; r=miker (69a31024cf) - Bug 1246677 - 3 - Remove all usages of getNode in ruleview tests; r=tromey (2f25bec099) - Bug 1240813 - Fixed the unhandled promise rejections in browser_rules_colorpicker-* tests; r=ochameau (bd534ec71b) - Bug 1217328 - let filter editor work on invalid values. r=pbrosset (91602cac94) - Bug 1225236 - Removed the 360 value limit for the hue-rotate field in the CSS filter popup. r=pbro (9bceb9947d) - Bug 1223076 - make FilterWidget handle "unset", "initial", and "inherit". r=pbrosset (6542d5cc99) - Bug 1221156 - make FilterWidget try to preserve URL quoting; r=pbrosset (3e1105c3d5) - Bug 1226543 - fix URL quoting in CSSFilterEditorWidget.getValueAt. r=pbrosset (1770cc279a) - Bug 1241527 - 1 - Fix some unhandled rejected promises in colorpicker, cubicbezier and cssfilter ruleview tests; r=gl (059df355be) - Bug 1241527 - 2 - Use ruleview-changed event to avoid pending requests when browser_rules_search-filter* tests end; r=gl (407d5866b0) - Bug 1241527 - 3 - Fix typo in hideTooltipAndWaitForRuleviewChanged; r=gl (964270c8c3) - Bug 1241527 - 4 - Use ruleview-changed event to avoid pending requests in browser_rules_multiple* tests; r=gl (2947abf296) - Bug 1241527 - 5 - Use ruleview-changed event to fix remaining pending requests in tests; r=gl (5391857e12) - Bug 1246677 - 4 - Stop using content.getComputedStyle in ruleview tests; r=miker (f61cd8d5aa) - Bug 1237885 - fix add-rules_01 intermittent by splitting in two tests;r=gl (45e4de6012) - Bug 1166956 - add valid unit when incrementing CSS value "0";r=tromey (40ca31b909) - Bug 1241155 - correctly use indexOf in browser_rules_user-agent-styles.js; r=bgrins (0966d23f7e) - Bug 1229911 - recognize DevToolsUtils.defineLazyGetter and defineLazyModuleGetter. r=miker (876e4b9f3b) - Bug 1230093 - Make the import-headjs-globals rule store variables correctly; r=Mossop (be3ddcb7fb) - Bug 1229224: Support more forms of defining globals and make anywhere we import scripts use them too. r=miker (c9a243fcae) - Bug 1231963 - handle top-level "this.mumble" assignments in eslint; r=mikeratcliffe (be07835449) - Bug 1224289 - add eslint rule to reject Cu.importGlobalProperties; r=mikeratcliffe (eac54ddcce) - Bug 1241544 - add documentation for this-top-level-scope eslint rule; r=mikeratcliffe (9d832af29d) - Bug 1239426 - handle arrow functions in getASTSource; r=mikeratcliffe (889b5ff89c) - Bug 1242584 - Remove dead code in import-headjs-globals. r=tromey (e7b07c59b3) - Bug 1229224: Support more forms of defining globals and make anywhere we import scripts use them too. r=miker (cf4a3d4d48) - Bug 1242584 - import-globals-from should carry over to tests. r=tromey (f1f7d7269a) - Bug 1224735 - only emit one error per possible CPOW use; r=miker,Ms2ger (621dba76e1) - Bug 1245916: Unify eslint global discovery rules. r=pbrosset (e80d38e097) - Bug 1246677 - 7 - Clean remaining ruleview and tests eslint warnings; r=jdescottes (9415147b5b) - Bug 1246677 - 5 - Get rid of 'content' in ruleview test files; r=jdescottes (d868fde632) - Bug 1209295 - Ensure browser_rules_add-property-cancel_02.js waits for the correct change notification. r=pbrosset (4099437554) - Bug 1240778 - Fixed the unhandled promise rejection in browser_rules_add-property_01.js; r=ochameau (838bd1f99c) - Bug 1246677 - 8 - Use addProperty and remove code duplication; r=gl (2c33059028) - Bug 1246677 - 9 - Get rid of all remaining _applyingModifications usage in tests; r=ochameau (a9bc3b2495) - Bug 1143742 - part1: multiline inplace editor: cleanup existing tests;r=gl (2bc96e58d3) - Bug 1243695 - ensure caret is visible in ruleview prop editor;r=miker (3353a5a77c) - Bug 1143742 - part2: multiline inplace-editor should support a maxWidth option;r=gl (98809c04cb) - Bug 1178462 - Cancel inplace editor autocomplete on window blur;r=gl (c4af4c03d2) - Bug 1261827 - inplace-editor: copyTextStyles should not copy line-height property;r=pbro (1fc8d7d432) - Bug 1069829 - 1 - Remove a usage of domUtils.cssPropertyIsValid in inplace-editor; r=tromey (7898eed84b) - Bug 1143742 - part3: multiline inplace-editor autocomplete behavior;r=gl (53b369dccb) - Bug 1143742 - part4: add textarea to valid targets when copying;r=gl (84af495716) - Bug 1143742 - part5: fix eslint error in inspector ruleview test;r=bustage (d7a53a6217) - Bug 1249888 - try/catch SourceMapConsumer to avoid empty rule-view when source map is invalid; r=gl (c78a7a6ac7) - Bug 1255787 - Do not assume sourceMap appears only in external stylesheets; r=gl (7c69e1e559) - Bug 1029459 - remove output-parser iteration limit. r=pbrosset (f2438a8642) - Bug 1250835 - Display swatch for angles in the rules panel. r=miker (87721e80f2) - Bug 1259777 - Remove unnecessary DOMUtils lazy load in css-angle.js . r=pbro (e199a014d5) - Bug 1259559 - Units cycling with shift+click persists value in Style editor. r=miker (b7074813e9) - Bug 1245996 - inspector: fix xul scrollbars stealing focus;r=pbro (bcb19ffa83) - Bug 1180349 - Increase the timeout for browser_markupview_links_01.js (b67cd0d2be) - Bug 1253935 - Remove all CPOW usages in styleeditor tests and use ContentTask instead of custom frame-script; r=ochameau (485308e7b1) - Bug 1257246: Update devtools for eslint 2. r=pbro (c04f7f3046) - Bug 1264968 part 2 - Allow persisting attributes of xul:window if its owner document is not root. r=enndeakin (ca8182b534) - Bug 1244948 - silence the 'loaded script twice' warning. r=bz (fa571b837c)
2026-05-26 13:43:44 +00:00 · 2024-08-30 20:58:51 +08:00
parent 4c9d88c9a4
commit ff0033e97d
467 changed files with 6950 additions and 3256 deletions
@@ -94,7 +94,6 @@ devtools/client/framework/**
 devtools/client/inspector/computed/**
 devtools/client/inspector/fonts/**
 devtools/client/inspector/markup/test/**
-devtools/client/inspector/rules/**
 devtools/client/inspector/shared/test/**
 devtools/client/inspector/test/**
 devtools/client/inspector/*.js
@@ -3,6 +3,11 @@
  "plugins": [
    "mozilla"
  ],
+  "rules": {
+    "mozilla/components-imports": 1,
+    "mozilla/import-globals": 1,
+    "mozilla/this-top-level-scope": 1,
+  },
  "env": {
    "es6": true
  },
@@ -35,6 +35,8 @@
    "mozilla/mark-test-function-used": 1,
    "mozilla/no-aArgs": 1,
    "mozilla/no-cpows-in-tests": 1,
+    // See bug 1224289.
+    "mozilla/reject-importGlobalProperties": 1,
    "mozilla/var-only-at-top-level": 1,

    // Disallow using variables outside the blocks they are defined (especially
@@ -260,9 +262,8 @@
    // Disallow trailing whitespace at the end of lines.
    "no-trailing-spaces": 2,
    // Disallow use of undeclared variables unless mentioned in a /*global */
-    // block.
-    // This should really be a 2, but until we define all globals in comments
-    // and .eslintrc, keeping this as a 1.
+    // block. Note that globals from head.js are automatically imported in tests
+    // by the import-headjs-globals rule form the mozilla eslint plugin.
    "no-undef": 2,
    // Allow dangling underscores in identifiers (for privates).
    "no-underscore-dangle": 0,
@@ -381,7 +382,7 @@
    // disallow labels that share a name with a variable
    "no-label-var": 0,
    // disallow use of labeled statements
-    "no-labels": 0,
+    "no-labels": 2,
    // disallow unnecessary nested blocks
    "no-lone-blocks": 0,
    // disallow creation of functions within loops
@@ -42,7 +42,7 @@ exports.debugWorker = function(client, workerActor) {
 *         - {Array} workers
 *           Array of WorkerActor forms
 */
-exports.getWorkerForms = Task.async(function*(client) {
+exports.getWorkerForms = Task.async(function* (client) {
  let registrations = [];
  let workers = [];

@@ -35,7 +35,7 @@ var gToolbox, gInspector;
 * Startup the animationinspector controller and view, called by the sidebar
 * widget when loading/unloading the iframe into the tab.
 */
-var startup = Task.async(function*(inspector) {
+var startup = Task.async(function* (inspector) {
  gInspector = inspector;
  gToolbox = inspector.toolbox;

@@ -56,7 +56,7 @@ var startup = Task.async(function*(inspector) {
 * Shutdown the animationinspector controller and view, called by the sidebar
 * widget when loading/unloading the iframe into the tab.
 */
-var shutdown = Task.async(function*() {
+var shutdown = Task.async(function* () {
  yield AnimationsController.destroy();
  // Don't assume that AnimationsPanel is defined here, it's in another file.
  if (typeof AnimationsPanel !== "undefined") {
@@ -79,7 +79,7 @@ function destroy() {
 * @param {Target} target The current toolbox target.
 * @return {Object} An object with boolean properties.
 */
-var getServerTraits = Task.async(function*(target) {
+var getServerTraits = Task.async(function* (target) {
  let config = [
    { name: "hasToggleAll", actor: "animations",
      method: "toggleAll" },
@@ -135,7 +135,7 @@ var AnimationsController = {
  PLAYERS_UPDATED_EVENT: "players-updated",
  ALL_ANIMATIONS_TOGGLED_EVENT: "all-animations-toggled",

-  initialize: Task.async(function*() {
+  initialize: Task.async(function* () {
    if (this.initialized) {
      yield this.initialized.promise;
      return;
@@ -169,7 +169,7 @@ var AnimationsController = {
    this.initialized.resolve();
  }),

-  destroy: Task.async(function*() {
+  destroy: Task.async(function* () {
    if (!this.initialized) {
      return;
    }
@@ -215,13 +215,13 @@ var AnimationsController = {
           gInspector.sidebar.getCurrentTabID() == "animationinspector";
  },

-  onPanelVisibilityChange: Task.async(function*() {
+  onPanelVisibilityChange: Task.async(function* () {
    if (this.isPanelVisible()) {
      this.onNewNodeFront();
    }
  }),

-  onNewNodeFront: Task.async(function*() {
+  onNewNodeFront: Task.async(function* () {
    // Ignore if the panel isn't visible or the node selection hasn't changed.
    if (!this.isPanelVisible() ||
        this.nodeFront === gInspector.selection.nodeFront) {
@@ -265,7 +265,7 @@ var AnimationsController = {
   * if they should be played.
   * @return {Promise} Resolves when the playState has been changed.
   */
-  toggleCurrentAnimations: Task.async(function*(shouldPause) {
+  toggleCurrentAnimations: Task.async(function* (shouldPause) {
    if (this.traits.hasToggleSeveral) {
      yield this.animationsFront.toggleSeveral(this.animationPlayers,
                                               shouldPause);
@@ -288,7 +288,7 @@ var AnimationsController = {
   * @param {Boolean} shouldPause Should the animations be paused too.
   * @return {Promise} Resolves when the current time has been set.
   */
-  setCurrentTimeAll: Task.async(function*(time, shouldPause) {
+  setCurrentTimeAll: Task.async(function* (time, shouldPause) {
    if (this.traits.hasSetCurrentTimes) {
      yield this.animationsFront.setCurrentTimes(this.animationPlayers, time,
                                                 shouldPause);
@@ -309,7 +309,7 @@ var AnimationsController = {
   * @param {Number} rate.
   * @return {Promise} Resolves when the rate has been set.
   */
-  setPlaybackRateAll: Task.async(function*(rate) {
+  setPlaybackRateAll: Task.async(function* (rate) {
    if (this.traits.hasSetPlaybackRates) {
      // If the backend can set all playback rates at the same time, use that.
      yield this.animationsFront.setPlaybackRates(this.animationPlayers, rate);
@@ -327,7 +327,7 @@ var AnimationsController = {
  // called again.
  animationPlayers: [],

-  refreshAnimationPlayers: Task.async(function*(nodeFront) {
+  refreshAnimationPlayers: Task.async(function* (nodeFront) {
    this.destroyAnimationPlayers();

    this.animationPlayers = yield this.animationsFront
@@ -22,7 +22,7 @@ var AnimationsPanel = {
  UI_UPDATED_EVENT: "ui-updated",
  PANEL_INITIALIZED: "panel-initialized",

-  initialize: Task.async(function*() {
+  initialize: Task.async(function* () {
    if (AnimationsController.destroyed) {
      console.warn("Could not initialize the animation-panel, controller " +
                   "was destroyed");
@@ -79,7 +79,7 @@ var AnimationsPanel = {
    this.emit(this.PANEL_INITIALIZED);
  }),

-  destroy: Task.async(function*() {
+  destroy: Task.async(function* () {
    if (!this.initialized) {
      return;
    }
@@ -205,7 +205,7 @@ var AnimationsPanel = {
   * Toggle (pause/play) all animations in the current target
   * and update the UI the toggleAll button.
   */
-  toggleAll: Task.async(function*() {
+  toggleAll: Task.async(function* () {
    this.toggleAllButtonEl.classList.toggle("paused");
    yield AnimationsController.toggleAll();
  }),
@@ -280,7 +280,9 @@ var AnimationsPanel = {
      this.setCurrentTimeAllPromise =
        AnimationsController.setCurrentTimeAll(time, true)
                            .catch(error => console.error(error))
-                            .then(() => this.setCurrentTimeAllPromise = null);
+                            .then(() => {
+                              this.setCurrentTimeAllPromise = null;
+                            });
    }

    this.displayTimelineCurrentTime();
@@ -296,7 +298,7 @@ var AnimationsPanel = {
   * useful after the playState or currentTime has been changed and in case the
   * animations aren't auto-refreshing), and then refresh the UI.
   */
-  refreshAnimationsStateAndUI: Task.async(function*() {
+  refreshAnimationsStateAndUI: Task.async(function* () {
    for (let player of AnimationsController.animationPlayers) {
      yield player.refreshState();
    }
@@ -307,7 +309,7 @@ var AnimationsPanel = {
   * Refresh the list of animations UI. This will empty the panel and re-render
   * the various components again.
   */
-  refreshAnimationsUI: Task.async(function*() {
+  refreshAnimationsUI: Task.async(function* () {
    // Empty the whole panel first.
    this.togglePlayers(true);

@@ -62,7 +62,7 @@ AnimationDetails.prototype = {
   * @return {Object} A list of tracks, one per animated property, each
   * with a list of keyframes
   */
-  getTracks: Task.async(function*() {
+  getTracks: Task.async(function* () {
    let tracks = {};

    /*
@@ -112,7 +112,7 @@ AnimationDetails.prototype = {
    return tracks;
  }),

-  render: Task.async(function*(animation) {
+  render: Task.async(function* (animation) {
    this.unrender();

    if (!animation) {
@@ -41,7 +41,7 @@ AnimationTargetNode.prototype = {
    this.isDestroyed = true;
  },

-  render: Task.async(function*(playerFront) {
+  render: Task.async(function* (playerFront) {
    // Get the nodeFront from the cache if it was stored previously.
    let nodeFront = nodeFronts.get(playerFront);

@@ -21,7 +21,7 @@ const EXPECTED_PROPERTIES = [
  "width"
 ].sort();

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_keyframes.html");
  let {panel} = yield openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
@@ -7,7 +7,7 @@
 // Check that animations displayed in the timeline can be selected by clicking
 // them, and that this emits the right events and adds the right classes.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel} = yield openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
@@ -7,7 +7,7 @@
 // Test that the controller provides the document.timeline currentTime (at least
 // the last known version since new animations were added).

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel, controller} = yield openAnimationInspector();

@@ -12,7 +12,7 @@ const { LocalizationHelper } = require("devtools/client/shared/l10n");
 const STRINGS_URI = "chrome://devtools/locale/animationinspector.properties";
 const L10N = new LocalizationHelper(STRINGS_URI);

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel, window} = yield openAnimationInspector();
  let {document} = window;
@@ -7,7 +7,7 @@
 // Test that animated properties' keyframes can be clicked, and that doing so
 // sets the current time in the timeline.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_keyframes.html");
  let {panel} = yield openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
@@ -21,7 +21,7 @@ const EXPECTED_PROPERTIES = [
  "width"
 ];

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_keyframes.html");
  let {panel} = yield openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
@@ -9,7 +9,7 @@
 // displayed (which should be true as long as these animations apply to
 // different nodes).

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_negative_animation.html");
  let {controller, panel} = yield openAnimationInspector();

@@ -6,7 +6,7 @@

 // Test that the animation panel sidebar exists

-add_task(function*() {
+add_task(function* () {
  yield addTab("data:text/html;charset=utf-8,welcome to the animation panel");
  let {panel, controller} = yield openAnimationInspector();

@@ -8,7 +8,7 @@
 // inspector-updated event. This means that the test verifies that the
 // inspector-updated event is emitted *after* the animation panel is ready.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel, controller} = yield openAnimationInspector();

@@ -7,7 +7,7 @@
 // Check that the AnimationPlayerFront objects lifecycle is managed by the
 // AnimationController.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {controller, inspector} = yield openAnimationInspector();

@@ -9,7 +9,7 @@

 const { ANIMATION_TYPES } = require("devtools/server/actors/animation");

-add_task(function*() {
+add_task(function* () {
  yield new Promise(resolve => {
    SpecialPowers.pushPrefEnv({"set": [
      ["dom.animations-api.core.enabled", true]
@@ -6,7 +6,7 @@

 // Test that player widgets display information about target nodes

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel} = yield openAnimationInspector();

@@ -6,7 +6,7 @@

 // Test that animated pseudo-elements do show in the timeline.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_pseudo_elements.html");
  let {inspector, panel} = yield openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
@@ -6,7 +6,7 @@

 // Test that the panel content refreshes when new animations are added.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel} = yield openAnimationInspector();

@@ -6,7 +6,7 @@

 // Test that the panel content refreshes when animations are removed.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");

  let {inspector, panel} = yield openAnimationInspector();
@@ -6,7 +6,7 @@

 // Test that the panel only refreshes when it is visible in the sidebar.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");

  let {inspector, panel} = yield openAnimationInspector();
@@ -12,7 +12,7 @@ const { LocalizationHelper } = require("devtools/client/shared/l10n");
 const STRINGS_URI = "chrome://devtools/locale/animationinspector.properties";
 const L10N = new LocalizationHelper(STRINGS_URI);

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel} = yield openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
@@ -7,7 +7,7 @@
 // Check that when playerFronts are updated, the same number of playerWidgets
 // are created in the panel.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel, controller} = yield openAnimationInspector();
  let timeline = panel.animationsTimelineComponent;
@@ -7,7 +7,7 @@
 // Test that the panel shows an animation player when an animated node is
 // selected.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel} = yield openAnimationInspector();

@@ -10,7 +10,7 @@
 // because there's an other test that does this :
 // browser_animation_toggle_button_toggles_animation.js

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel, inspector, window, controller} = yield openAnimationInspector();
  let {toggleAllButtonEl} = panel;
@@ -10,7 +10,7 @@
 // There are animations in the test page and since, by default, the <body> node
 // is selected, animations will be displayed in the timeline, so the timeline
 // play/resume button will be displayed
-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel, window} = yield openAnimationInspector();
  let {playTimelineButtonEl} = panel;
@@ -7,7 +7,7 @@
 // Test that the DOM element targets displayed in animation player widgets can
 // be used to highlight elements in the DOM and select them in the inspector.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");

  let {toolbox, inspector, panel} = yield openAnimationInspector();
@@ -7,7 +7,7 @@
 // Test that the DOM element targets displayed in animation player widgets can
 // be used to highlight elements in the DOM and select them in the inspector.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel} = yield openAnimationInspector();

@@ -8,7 +8,7 @@
 // changes when animations are playing, gets back to 0 when animations are
 // rewound, and stops when animations are paused.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");

  let {panel} = yield openAnimationInspector();
@@ -12,7 +12,7 @@ const {findOptimalTimeInterval, TimeScale} = require("devtools/client/animationi
 // animation-timeline.js
 const TIME_GRADUATION_MIN_SPACING = 40;

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel} = yield openAnimationInspector();

@@ -6,7 +6,7 @@

 // Check that the iteration start is displayed correctly in time blocks.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_script_animation.html");
  let {panel} = yield openAnimationInspector();
  let timelineComponent = panel.animationsTimelineComponent;
@@ -16,7 +16,7 @@ requestLongerTimeout(2);
 // And test that clicking the button once the scrubber has reached the end of
 // the timeline does the right thing.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");

  let {panel, inspector} = yield openAnimationInspector();
@@ -10,7 +10,7 @@
 // all have the same rate, or that it displays the empty value in case they
 // have mixed rates.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");

  let {panel, controller, inspector, toolbox} = yield openAnimationInspector();
@@ -10,7 +10,7 @@
 // reset to 0, and that the scrubber stops moving and is positioned to the
 // start.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");

  let {panel, controller} = yield openAnimationInspector();
@@ -6,7 +6,7 @@

 // Check that the timeline does have a scrubber element.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel} = yield openAnimationInspector();

@@ -10,7 +10,7 @@
 // state.
 // Finally, also check that the scrubber can be moved using the scrubber handle.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");

  let {panel} = yield openAnimationInspector();
@@ -9,7 +9,7 @@
 // measures the position of the scrubber once, then waits for some time to pass
 // and measures its position again.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel} = yield openAnimationInspector();

@@ -9,7 +9,7 @@
 // Also check that negative delays do not overflow the UI, and are shown like
 // positive delays.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel} = yield openAnimationInspector();

@@ -11,7 +11,7 @@ requestLongerTimeout(2);
 // Also check that negative endDelays do not overflow the UI, and are shown
 // like positive endDelays.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_end_delay.html");
  let {inspector, panel} = yield openAnimationInspector();

@@ -7,7 +7,7 @@
 // Check that the timeline is displays as many iteration elements as there are
 // iterations in an animation.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel} = yield openAnimationInspector();

@@ -9,7 +9,7 @@ requestLongerTimeout(2);
 // Check that the timeline displays animations' duration, delay iteration
 // counts and iteration start in tooltips.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel, controller} = yield openAnimationInspector();

@@ -11,7 +11,7 @@
 // of which may have a different rate than others. Those that have had their
 // rate changed have a delay = delay/rate and a duration = duration/rate.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_modify_playbackRate.html");

  let {panel} = yield openAnimationInspector();
@@ -6,7 +6,7 @@

 // Check that the timeline contains the right elements.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel} = yield openAnimationInspector();

@@ -8,7 +8,7 @@ requestLongerTimeout(2);

 // Test that a page navigation resets the state of the global toggle button.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, panel} = yield openAnimationInspector();

@@ -9,7 +9,7 @@
 // animations have been paused (including inside iframes) because there's an
 // actor test in /devtools/server/tests/browser/ that does this.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel} = yield openAnimationInspector();

@@ -9,7 +9,7 @@
 // Also test that this toolbar gets replaced by the timeline toolbar when there
 // are animations to be displayed.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {inspector, window} = yield openAnimationInspector();
  let doc = window.document;
@@ -7,7 +7,7 @@
 // Verify that if the animation's duration, iterations or delay change in
 // content, then the widget reflects the changes.

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_simple_animation.html");
  let {panel, controller, inspector} = yield openAnimationInspector();

@@ -17,7 +17,7 @@ const COMMON_FRAME_SCRIPT_URL = "chrome://devtools/content/shared/frame-script-u
 const TAB_NAME = "animationinspector";

 // Auto clean-up when a test ends
-registerCleanupFunction(function*() {
+registerCleanupFunction(function* () {
  yield closeAnimationInspector();

  while (gBrowser.tabs.length > 1) {
@@ -75,7 +75,7 @@ function* reloadTab(inspector) {
           and animations of its subtree are properly displayed.
 */
 var selectNodeAndWaitForAnimations = Task.async(
-  function*(data, inspector, reason = "test") {
+  function* (data, inspector, reason = "test") {
    yield selectNode(data, inspector, reason);

    // We want to make sure the rest of the test waits for the animations to
@@ -107,7 +107,7 @@ function assertAnimationsDisplayed(panel, nbAnimations, msg = "") {
 * @param {InspectorPanel} inspector
 * @return {Promise}
 */
-var waitForAnimationInspectorReady = Task.async(function*(inspector) {
+var waitForAnimationInspectorReady = Task.async(function* (inspector) {
  let win = inspector.sidebar.getWindowForTab(TAB_NAME);
  let updated = inspector.once("inspector-updated");

@@ -127,7 +127,7 @@ var waitForAnimationInspectorReady = Task.async(function*(inspector) {
 * sidebar selected.
 * @return a promise that resolves when the inspector is ready.
 */
-var openAnimationInspector = Task.async(function*() {
+var openAnimationInspector = Task.async(function* () {
  let {inspector, toolbox} = yield openInspectorSidebarTab(TAB_NAME);

  info("Waiting for the inspector and sidebar to be ready");
@@ -161,7 +161,7 @@ var openAnimationInspector = Task.async(function*() {
 * Close the toolbox.
 * @return a promise that resolves when the toolbox has closed.
 */
-var closeAnimationInspector = Task.async(function*() {
+var closeAnimationInspector = Task.async(function* () {
  let target = TargetFactory.forTab(gBrowser.selectedTab);
  yield gDevTools.closeToolbox(target);
 });
@@ -214,8 +214,8 @@ function executeInContent(name, data = {}, objects = {},
 /**
 * Get the current playState of an animation player on a given node.
 */
-var getAnimationPlayerState = Task.async(function*(selector,
-                                                   animationIndex = 0) {
+var getAnimationPlayerState = Task.async(function* (selector,
+                                                    animationIndex = 0) {
  let playState = yield executeInContent("Test:GetAnimationPlayerState",
                                         {selector, animationIndex});
  return playState;
@@ -236,7 +236,7 @@ function isNodeVisible(node) {
 * @param {AnimationsPanel} panel
 * @return {Array} all AnimationTargetNode instances
 */
-var waitForAllAnimationTargets = Task.async(function*(panel) {
+var waitForAllAnimationTargets = Task.async(function* (panel) {
  let targets = panel.animationsTimelineComponent.targetNodes;
  yield promise.all(targets.map(t => {
    if (!t.previewer.nodeFront) {
@@ -265,7 +265,9 @@ function* assertScrubberMoving(panel, isMoving) {
    // If instead we expect the scrubber to remain at its position, just wait
    // for some time and make sure timeline-data-changed isn't emitted.
    let hasMoved = false;
-    timeline.once("timeline-data-changed", () => hasMoved = true);
+    timeline.once("timeline-data-changed", () => {
+      hasMoved = true;
+    });
    yield new Promise(r => setTimeout(r, 500));
    ok(!hasMoved, "The scrubber is not moving");
  }
@@ -141,6 +141,7 @@ Tools.webConsole = {
    }

    panel.focusInput();
+    return undefined;
  },

  isTargetSupported: function() {
@@ -9,7 +9,7 @@
 const TEST_URI = `
  <style type="text/css">
    .matches {
-      color: #F00;
+      color: #f00;
    }
  </style>
  <span id="matches" class="matches">Some styled text</span>
@@ -26,11 +26,10 @@ add_task(function*() {

  info("Checking matched selectors");
  container = yield getComputedViewMatchedRules(view, "color");
-  checkColorCycling(container, view);
+  yield checkColorCycling(container, view);
 });

-function checkColorCycling(container, view) {
-  let swatch = container.querySelector(".computedview-colorswatch");
+function* checkColorCycling(container, view) {
  let valueNode = container.querySelector(".computedview-color");
  let win = view.styleWindow;

@@ -38,32 +37,34 @@ function checkColorCycling(container, view) {
  is(valueNode.textContent, "rgb(255, 0, 0)",
                            "Color displayed as an RGB value.");

-  // Hex
-  EventUtils.synthesizeMouseAtCenter(swatch,
-                                     {type: "mousedown", shiftKey: true}, win);
-  is(valueNode.textContent, "#F00", "Color displayed as a hex value.");
+  let tests = [{
+    value: "red",
+    comment: "Color displayed as a color name."
+  }, {
+    value: "#f00",
+    comment: "Color displayed as an authored value."
+  }, {
+    value: "hsl(0, 100%, 50%)",
+    comment: "Color displayed as an HSL value again."
+  }, {
+    value: "rgb(255, 0, 0)",
+    comment: "Color displayed as an RGB value again."
+  }];

-  // HSL
-  EventUtils.synthesizeMouseAtCenter(swatch,
-                                     {type: "mousedown", shiftKey: true}, win);
-  is(valueNode.textContent, "hsl(0, 100%, 50%)",
-                            "Color displayed as an HSL value.");
-
-  // RGB
-  EventUtils.synthesizeMouseAtCenter(swatch,
-                                     {type: "mousedown", shiftKey: true}, win);
-  is(valueNode.textContent, "rgb(255, 0, 0)",
-                            "Color displayed as an RGB value.");
-
-  // Color name
-  EventUtils.synthesizeMouseAtCenter(swatch,
-                                     {type: "mousedown", shiftKey: true}, win);
-  is(valueNode.textContent, "red",
-                            "Color displayed as a color name.");
-
-  // Back to "Authored"
-  EventUtils.synthesizeMouseAtCenter(swatch,
-                                     {type: "mousedown", shiftKey: true}, win);
-  is(valueNode.textContent, "rgb(255, 0, 0)",
-                            "Color displayed as an RGB value.");
+  for (let test of tests) {
+    yield checkSwatchShiftClick(container, win, test.value, test.comment);
+  }
+}
+
+function* checkSwatchShiftClick(container, win, expectedValue, comment) {
+  let swatch = container.querySelector(".computedview-colorswatch");
+  let valueNode = container.querySelector(".computedview-color");
+
+  let onUnitChange = swatch.once("unit-change");
+  EventUtils.synthesizeMouseAtCenter(swatch, {
+    type: "mousedown",
+    shiftKey: true
+  }, win);
+  yield onUnitChange;
+  is(valueNode.textContent, expectedValue, comment);
 }
@@ -27,7 +27,7 @@
  max-width: 150px;
 }

-.inspector-tabpanel {
+.inspector-tabpanel > * {
  /*
   * Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css
   */
@@ -318,7 +318,10 @@ LayoutView.prototype = {
    let editor = new InplaceEditor({
      element: element,
      initial: initialValue,
-
+      contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
+      property: {
+        name: dimension.property
+      },
      start: self => {
        self.elt.parentNode.classList.add("layout-editing");
      },
@@ -601,6 +604,7 @@ LayoutView.prototype = {
      this.elementRules = styleEntries.map(e => e.rule);

      this.inspector.emit("layoutview-updated");
+      return undefined;
    }).bind(this)).catch(console.error);

    this._lastRequest = lastRequest;
@@ -126,7 +126,7 @@ var res2 = [
  },
 ];

-add_task(function*() {
+add_task(function* () {
  let style = "div { position: absolute; top: 42px; left: 42px; " +
              "height: 100.111px; width: 100px; border: 10px solid black; " +
              "padding: 20px; margin: 30px auto;}";
@@ -19,7 +19,7 @@ const TEST_URI = "<style>" +
  "<div id='div3'></div><div id='div4'></div>" +
  "<div id='div5'></div>";

-add_task(function*() {
+add_task(function* () {
  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
  let {inspector, view, testActor} = yield openLayoutView();

@@ -14,7 +14,7 @@ const TEST_URI = "<style>" +
  "</style>" +
  "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";

-add_task(function*() {
+add_task(function* () {
  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
  let {inspector, view, testActor} = yield openLayoutView();

@@ -14,7 +14,7 @@ const TEST_URI = "<style>" +
  "</style>" +
  "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";

-add_task(function*() {
+add_task(function* () {
  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
  let {inspector, view, testActor} = yield openLayoutView();

@@ -15,7 +15,7 @@ const TEST_URI = "<style>" +
  "</style>" +
  "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";

-add_task(function*() {
+add_task(function* () {
  yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
  let {inspector, view, testActor} = yield openLayoutView();

@@ -17,7 +17,7 @@ const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);

 var highlightedNodeFront, highlighterOptions;

-add_task(function*() {
+add_task(function* () {
  yield addTab(TEST_URL);
  let {toolbox, inspector, view} = yield openLayoutView();
  yield selectNode("div", inspector);
@@ -30,7 +30,7 @@ const TEST_URI = encodeURIComponent([
 ].join(""));
 const LONG_TEXT_ROTATE_LIMIT = 3;

-add_task(function*() {
+add_task(function* () {
  yield addTab("data:text/html," + TEST_URI);
  let {inspector, view} = yield openLayoutView();
  yield selectNode("div", inspector);
@@ -70,7 +70,7 @@ const VALUES_TEST_DATA = [{
  }]
 }];

-add_task(function*() {
+add_task(function* () {
  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
  let {inspector, view} = yield openLayoutView();

@@ -10,7 +10,7 @@
 const IFRAME1 = URL_ROOT + "doc_layout_iframe1.html";
 const IFRAME2 = URL_ROOT + "doc_layout_iframe2.html";

-add_task(function*() {
+add_task(function* () {
  yield addTab(IFRAME1);
  let {inspector, view, testActor} = yield openLayoutView();

@@ -6,7 +6,7 @@

 // Test that the layout-view continues to work after the page is reloaded

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_layout_iframe1.html");
  let {inspector, view, testActor} = yield openLayoutView();

@@ -14,7 +14,7 @@ add_task(function*() {
  yield assertLayoutView(inspector, view, testActor);

  info("Reload the page");
-  yield testActor.eval("content.location.reload();");
+  yield testActor.reload();
  yield inspector.once("markuploaded");

  info("Test that the layout-view works on the reloaded page");
@@ -7,7 +7,7 @@
 // Test that the layout-view for elements within iframes also updates when they
 // change

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_layout_iframe1.html");
  let {inspector, view, testActor} = yield openLayoutView();

@@ -468,6 +468,8 @@ MarkupView.prototype = {
      // and decision to show or not the tooltip
      return container.isImagePreviewTarget(target, this.tooltip);
    }
+
+    return undefined;
  },

  /**
@@ -534,6 +536,7 @@ MarkupView.prototype = {

      // Make sure the new selection receives focus so the keyboard can be used.
      this.maybeFocusNewSelection();
+      return undefined;
    }).catch(e => {
      if (!this._destroyer) {
        console.error(e);
@@ -609,17 +612,19 @@ MarkupView.prototype = {
      return;
    }

+    // Ignore keystrokes with modifiers to allow native shortcuts (such as save:
+    // accel + S) to bubble up.
+    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
+      return;
+    }
+
    switch (event.keyCode) {
      case Ci.nsIDOMKeyEvent.DOM_VK_H:
-        if (event.metaKey || event.shiftKey) {
-          handled = false;
+        let node = this._selectedContainer.node;
+        if (node.hidden) {
+          this.walker.unhideNode(node);
        } else {
-          let node = this._selectedContainer.node;
-          if (node.hidden) {
-            this.walker.unhideNode(node);
-          } else {
-            this.walker.hideNode(node);
-          }
+          this.walker.hideNode(node);
        }
        break;
      case Ci.nsIDOMKeyEvent.DOM_VK_DELETE:
@@ -705,6 +710,7 @@ MarkupView.prototype = {
          this.cancelDragging();
          break;
        }
+        // falls through
      }
      default:
        handled = false;
@@ -2007,7 +2013,7 @@ MarkupContainer.prototype = {
  /**
   * On mouse up, stop dragging.
   */
-  _onMouseUp: Task.async(function*() {
+  _onMouseUp: Task.async(function* () {
    this._isPreDragging = false;

    if (this.isDragging) {
@@ -2296,6 +2302,7 @@ MarkupElementContainer.prototype = Heritage.extend(MarkupContainer.prototype, {
      });
      return true;
    }
+    return undefined;
  },

  /**
@@ -2325,7 +2332,7 @@ MarkupElementContainer.prototype = Heritage.extend(MarkupContainer.prototype, {
      Services.prefs.getIntPref("devtools.inspector.imagePreviewTooltipSize");

    // Fetch the preview from the server.
-    this.tooltipDataPromise = Task.spawn(function*() {
+    this.tooltipDataPromise = Task.spawn(function* () {
      let preview = yield this.node.getImageData(maxDim);
      let data = yield preview.data.string();

@@ -2516,6 +2523,11 @@ function TextEditor(container, node, template) {
    stopOnReturn: true,
    trigger: "dblclick",
    multiline: true,
+    maxWidth: () => {
+      let elementRect = this.value.getBoundingClientRect();
+      let containerRect = this.container.elt.getBoundingClientRect();
+      return containerRect.right - elementRect.left - 2;
+    },
    trimOutput: false,
    done: (val, commit) => {
      if (!commit) {
@@ -14,6 +14,7 @@ support-files =
  doc_markup_flashing.html
  doc_markup_html_mixed_case.html
  doc_markup_image_and_canvas.html
+  doc_markup_image_and_canvas_2.html
  doc_markup_links.html
  doc_markup_mutation.html
  doc_markup_navigation.html
@@ -104,6 +105,7 @@ skip-if = e10s # Bug 1040751 - CodeMirror editor.destroy() isn't e10s compatible
 [browser_markup_keybindings_03.js]
 [browser_markup_keybindings_04.js]
 [browser_markup_keybindings_delete_attributes.js]
+[browser_markup_keybindings_scrolltonode.js]
 [browser_markup_mutation_01.js]
 [browser_markup_mutation_02.js]
 [browser_markup_node_names.js]
@@ -129,6 +131,7 @@ skip-if = e10s # Bug 1036409 - The last selected node isn't reselected
 [browser_markup_tag_edit_12.js]
 [browser_markup_tag_edit_13-other.js]
 [browser_markup_textcontent_edit_01.js]
+[browser_markup_textcontent_edit_02.js]
 [browser_markup_toggle_01.js]
 [browser_markup_toggle_02.js]
 [browser_markup_toggle_03.js]
@@ -7,7 +7,7 @@
 // Test native anonymous content in the markupview.
 const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);

  let pseudo = yield getNodeFront("#pseudo", inspector);
@@ -7,7 +7,7 @@
 // Test XBL anonymous content in the markupview
 const TEST_URL = "chrome://devtools/content/scratchpad/scratchpad.xul";

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);

  let toolbarbutton = yield getNodeFront("toolbarbutton", inspector);
@@ -9,7 +9,7 @@
 // of elements should be working.
 const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";

-add_task(function*() {
+add_task(function* () {
  Services.prefs.setBoolPref("dom.webcomponents.enabled", true);

  let {inspector} = yield openInspectorForURL(TEST_URL);
@@ -9,7 +9,7 @@
 const TEST_URL = URL_ROOT + "doc_markup_anonymous.html";
 const PREF = "devtools.inspector.showAllAnonymousContent";

-add_task(function*() {
+add_task(function* () {
  Services.prefs.setBoolPref(PREF, true);

  let {inspector} = yield openInspectorForURL(TEST_URL);
@@ -7,7 +7,7 @@
 // Test that image nodes have the "copy data-uri" contextual menu item enabled
 // and that clicking it puts the image data into the clipboard

-add_task(function*() {
+add_task(function* () {
  yield addTab(URL_ROOT + "doc_markup_image_and_canvas.html");
  let {inspector, testActor} = yield openInspector();

@@ -69,7 +69,7 @@ const TEST_DATA = [
   -1, -1, false]
 ];

-add_task(function*() {
+add_task(function* () {
  info("Opening the inspector on the test URL");
  let {inspector} = yield openInspectorForURL(TEST_URL);

@@ -96,7 +96,7 @@ const TEST_DATA_INNER = [
  ["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false]
 ];

-add_task(function*() {
+add_task(function* () {
  info("Opening the inspector on the test URL");
  let {inspector} = yield openInspectorForURL(TEST_URL);

@@ -9,7 +9,7 @@

 const TEST_URL = URL_ROOT + "doc_markup_dragdrop_autoscroll.html";

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);
  let markup = inspector.markup;
  let viewHeight = markup.doc.documentElement.clientHeight;
@@ -14,7 +14,7 @@ const TEST_NODE = "#test";
 // Keep this in sync with DRAG_DROP_MIN_INITIAL_DISTANCE in markup-view.js
 const MIN_DISTANCE = 10;

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);

  info("Drag the test node by half of the minimum distance");
@@ -9,7 +9,7 @@
 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
 const TEST_DATA = ["html", "head", "body"];

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);

  for (let selector of TEST_DATA) {
@@ -22,7 +22,7 @@ const TEST_DATA = [
  { node: "input", draggable: true },
  { node: "div", draggable: true },
  {
-    node: function*(inspector) {
+    node: function* (inspector) {
      let parentFront = yield getNodeFront("#before", inspector);
      let {nodes} = yield inspector.walker.children(parentFront);
      // Getting the comment node.
@@ -31,7 +31,7 @@ const TEST_DATA = [
    draggable: true
  },
  {
-    node: function*(inspector) {
+    node: function* (inspector) {
      let parentFront = yield getNodeFront("#test", inspector);
      let {nodes} = yield inspector.walker.children(parentFront);
      // Getting the ::before pseudo element.
@@ -41,7 +41,7 @@ const TEST_DATA = [
  }
 ];

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);
  yield inspector.markup.expandAll();

@@ -8,7 +8,7 @@

 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);
  let {markup} = inspector;

@@ -9,7 +9,7 @@
 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";
 const PREF = "devtools.inspector.showAllAnonymousContent";

-add_task(function*() {
+add_task(function* () {
  Services.prefs.setBoolPref(PREF, true);

  let {inspector} = yield openInspectorForURL(TEST_URL);
@@ -8,7 +8,7 @@

 const TEST_URL = URL_ROOT + "doc_markup_dragdrop.html";

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);
  let ids;

@@ -7,7 +7,7 @@

 const TEST_URL = "data:text/html;charset=utf8,<img src=\"about:logo\" /><div>";

-add_task(function*() {
+add_task(function* () {
  let {inspector} = yield openInspectorForURL(TEST_URL);
  let {markup} = inspector;

@@ -30,7 +30,7 @@ const TEST_DATA = [
  },
 ];

-add_task(function*() {
+add_task(function* () {
  let { inspector } = yield openInspectorForURL(TEST_URL);

  let markupContainer = yield getContainerForSelector("#events", inspector);
@@ -192,6 +192,6 @@ const TEST_DATA = [ // eslint-disable-line
  },
 ];

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -14,7 +14,7 @@ const TEST_ACTOR_URL = CHROME_URL_ROOT + "actor_events_form.js";

 var {EventsFormFront} = require(TEST_ACTOR_URL);

-add_task(function*() {
+add_task(function* () {
  info("Opening the Toolbox");
  let tab = yield addTab(TEST_PAGE_URL);
  let toolbox = yield openToolboxForTab(tab, "webconsole");
@@ -233,6 +233,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -267,6 +267,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -191,6 +191,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -186,6 +186,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -219,6 +219,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -282,6 +282,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -381,6 +381,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -227,6 +227,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -189,6 +189,6 @@ const TEST_DATA = [
 ];
 /*eslint-enable */

-add_task(function*() {
+add_task(function* () {
  yield runEventPopupTests(TEST_URL, TEST_DATA);
 });
@@ -8,59 +8,64 @@

 loadHelperScript("helper_outerhtml_test_runner.js");

-const TEST_DATA = [
-  {
-    selector: "#one",
-    oldHTML: '<div id="one">First <em>Div</em></div>',
-    newHTML: '<div id="one">First Div</div>',
-    validate: function*(pageNode, pageNodeFront, selectedNodeFront) {
-      is(pageNode.textContent, "First Div", "New div has expected text content");
-      ok(!getNode("#one em", {expectNoMatch: true}), "No em remaining")
-    }
-  },
-  {
-    selector: "#removedChildren",
-    oldHTML: '<div id="removedChildren">removedChild <i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>',
-    newHTML: '<div id="removedChildren">removedChild</div>'
-  },
-  {
-    selector: "#addedChildren",
-    oldHTML: '<div id="addedChildren">addedChildren</div>',
-    newHTML: '<div id="addedChildren">addedChildren <i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>'
-  },
-  {
-    selector: "#addedAttribute",
-    oldHTML: '<div id="addedAttribute">addedAttribute</div>',
-    newHTML: '<div id="addedAttribute" class="important" disabled checked>addedAttribute</div>',
-    validate: function*(pageNode, pageNodeFront, selectedNodeFront) {
-      is(pageNodeFront, selectedNodeFront, "Original element is selected");
-      is(pageNode.outerHTML, '<div id="addedAttribute" class="important" disabled="" checked="">addedAttribute</div>',
-            "Attributes have been added");
-    }
-  },
-  {
-    selector: "#changedTag",
-    oldHTML: '<div id="changedTag">changedTag</div>',
-    newHTML: '<p id="changedTag" class="important">changedTag</p>'
-  },
-  {
-    selector: "#siblings",
-    oldHTML: '<div id="siblings">siblings</div>',
-    newHTML: '<div id="siblings-before-sibling">before sibling</div>' +
-             '<div id="siblings">siblings (updated)</div>' +
-             '<div id="siblings-after-sibling">after sibling</div>',
-    validate: function*(pageNode, pageNodeFront, selectedNodeFront, inspector) {
-      let beforeSibling = getNode("#siblings-before-sibling");
-      let beforeSiblingFront = yield getNodeFront("#siblings-before-sibling", inspector);
-      let afterSibling = getNode("#siblings-after-sibling");
-
-      is(beforeSiblingFront, selectedNodeFront, "Sibling has been selected");
-      is(pageNode.textContent, "siblings (updated)", "New div has expected text content");
-      is(beforeSibling.textContent, "before sibling", "Sibling has been inserted");
-      is(afterSibling.textContent, "after sibling", "Sibling has been inserted");
-    }
+const TEST_DATA = [{
+  selector: "#one",
+  oldHTML: '<div id="one">First <em>Div</em></div>',
+  newHTML: '<div id="one">First Div</div>',
+  validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
+    let text = yield testActor.getProperty("#one", "textContent");
+    is(text, "First Div", "New div has expected text content");
+    let num = yield testActor.getNumberOfElementMatches("#one em");
+    is(num, 0, "No em remaining");
  }
-];
+}, {
+  selector: "#removedChildren",
+  oldHTML: "<div id=\"removedChildren\">removedChild " +
+           "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>",
+  newHTML: "<div id=\"removedChildren\">removedChild</div>"
+}, {
+  selector: "#addedChildren",
+  oldHTML: '<div id="addedChildren">addedChildren</div>',
+  newHTML: "<div id=\"addedChildren\">addedChildren " +
+           "<i>Italic <b>Bold <u>Underline</u></b></i> Normal</div>"
+}, {
+  selector: "#addedAttribute",
+  oldHTML: '<div id="addedAttribute">addedAttribute</div>',
+  newHTML: "<div id=\"addedAttribute\" class=\"important\" disabled checked>" +
+           "addedAttribute</div>",
+  validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
+    is(pageNodeFront, selectedNodeFront, "Original element is selected");
+    let html = yield testActor.getProperty("#addedAttribute", "outerHTML");
+    is(html, "<div id=\"addedAttribute\" class=\"important\" disabled=\"\" " +
+       "checked=\"\">addedAttribute</div>", "Attributes have been added");
+  }
+}, {
+  selector: "#changedTag",
+  oldHTML: '<div id="changedTag">changedTag</div>',
+  newHTML: '<p id="changedTag" class="important">changedTag</p>'
+}, {
+  selector: "#siblings",
+  oldHTML: '<div id="siblings">siblings</div>',
+  newHTML: '<div id="siblings-before-sibling">before sibling</div>' +
+           '<div id="siblings">siblings (updated)</div>' +
+           '<div id="siblings-after-sibling">after sibling</div>',
+  validate: function* ({selectedNodeFront, inspector, testActor}) {
+    let beforeSiblingFront = yield getNodeFront("#siblings-before-sibling",
+                                                inspector);
+    is(beforeSiblingFront, selectedNodeFront, "Sibling has been selected");
+
+    let text = yield testActor.getProperty("#siblings", "textContent");
+    is(text, "siblings (updated)", "New div has expected text content");
+
+    let beforeText = yield testActor.getProperty("#siblings-before-sibling",
+                                                 "textContent");
+    is(beforeText, "before sibling", "Sibling has been inserted");
+
+    let afterText = yield testActor.getProperty("#siblings-after-sibling",
+                                                "textContent");
+    is(afterText, "after sibling", "Sibling has been inserted");
+  }
+}];

 const TEST_URL = "data:text/html," +
  "<!DOCTYPE html>" +
@@ -70,7 +75,7 @@ const TEST_URL = "data:text/html," +
  "</body>" +
  "</html>";

-add_task(function*() {
+add_task(function* () {
  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
  inspector.markup._frame.focus();
  yield runEditOuterHTMLTests(TEST_DATA, inspector, testActor);
@@ -12,76 +12,94 @@ requestLongerTimeout(2);
 const TEST_DATA = [
  {
    selector: "#badMarkup1",
-    oldHTML: '<div id="badMarkup1">badMarkup1</div>',
-    newHTML: '<div id="badMarkup1">badMarkup1</div> hanging</div>',
-    validate: function*(pageNode, pageNodeFront, selectedNodeFront, inspector) {
+    oldHTML: "<div id=\"badMarkup1\">badMarkup1</div>",
+    newHTML: "<div id=\"badMarkup1\">badMarkup1</div> hanging</div>",
+    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
      is(pageNodeFront, selectedNodeFront, "Original element is selected");

-      let textNode = pageNode.nextSibling;
-
-      is(textNode.nodeName, "#text", "Sibling is a text element");
-      is(textNode.data, " hanging", "New text node has expected text content");
+      let textNodeName = yield testActor.eval(`
+        content.document.querySelector("#badMarkup1").nextSibling.nodeName
+      `);
+      let textNodeData = yield testActor.eval(`
+        content.document.querySelector("#badMarkup1").nextSibling.data
+      `);
+      is(textNodeName, "#text", "Sibling is a text element");
+      is(textNodeData, " hanging", "New text node has expected text content");
    }
  },
  {
    selector: "#badMarkup2",
-    oldHTML: '<div id="badMarkup2">badMarkup2</div>',
-    newHTML: '<div id="badMarkup2">badMarkup2</div> hanging<div></div></div></div></body>',
-    validate: function*(pageNode, pageNodeFront, selectedNodeFront, inspector) {
+    oldHTML: "<div id=\"badMarkup2\">badMarkup2</div>",
+    newHTML: "<div id=\"badMarkup2\">badMarkup2</div> hanging<div></div>" +
+             "</div></div></body>",
+    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
      is(pageNodeFront, selectedNodeFront, "Original element is selected");

-      let textNode = pageNode.nextSibling;
-
-      is(textNode.nodeName, "#text", "Sibling is a text element");
-      is(textNode.data, " hanging", "New text node has expected text content");
+      let textNodeName = yield testActor.eval(`
+        content.document.querySelector("#badMarkup2").nextSibling.nodeName
+      `);
+      let textNodeData = yield testActor.eval(`
+        content.document.querySelector("#badMarkup2").nextSibling.data
+      `);
+      is(textNodeName, "#text", "Sibling is a text element");
+      is(textNodeData, " hanging", "New text node has expected text content");
    }
  },
  {
    selector: "#badMarkup3",
-    oldHTML: '<div id="badMarkup3">badMarkup3</div>',
-    newHTML: '<div id="badMarkup3">badMarkup3 <em>Emphasized <strong> and strong</div>',
-    validate: function*(pageNode, pageNodeFront, selectedNodeFront, inspector) {
+    oldHTML: "<div id=\"badMarkup3\">badMarkup3</div>",
+    newHTML: "<div id=\"badMarkup3\">badMarkup3 <em>Emphasized <strong> " +
+             "and strong</div>",
+    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
      is(pageNodeFront, selectedNodeFront, "Original element is selected");

-      let em = getNode("#badMarkup3 em");
-      let strong = getNode("#badMarkup3 strong");
-
-      is(em.textContent, "Emphasized  and strong", "<em> was auto created");
-      is(strong.textContent, " and strong", "<strong> was auto created");
+      let emText = yield testActor.getProperty("#badMarkup3 em", "textContent");
+      let strongText = yield testActor.getProperty("#badMarkup3 strong",
+                                                   "textContent");
+      is(emText, "Emphasized  and strong", "<em> was auto created");
+      is(strongText, " and strong", "<strong> was auto created");
    }
  },
  {
    selector: "#badMarkup4",
-    oldHTML: '<div id="badMarkup4">badMarkup4</div>',
-    newHTML: '<div id="badMarkup4">badMarkup4</p>',
-    validate: function*(pageNode, pageNodeFront, selectedNodeFront, inspector) {
+    oldHTML: "<div id=\"badMarkup4\">badMarkup4</div>",
+    newHTML: "<div id=\"badMarkup4\">badMarkup4</p>",
+    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
      is(pageNodeFront, selectedNodeFront, "Original element is selected");

-      let div = getNode("#badMarkup4");
-      let p = getNode("#badMarkup4 p");
+      let divText = yield testActor.getProperty("#badMarkup4", "textContent");
+      let divTag = yield testActor.getProperty("#badMarkup4", "tagName");

-      is(div.textContent, "badMarkup4", "textContent is correct");
-      is(div.tagName, "DIV", "did not change to <p> tag");
-      is(p.textContent, "", "The <p> tag has no children");
-      is(p.tagName, "P", "Created an empty <p> tag");
+      let pText = yield testActor.getProperty("#badMarkup4 p", "textContent");
+      let pTag = yield testActor.getProperty("#badMarkup4 p", "tagName");
+
+      is(divText, "badMarkup4", "textContent is correct");
+      is(divTag, "DIV", "did not change to <p> tag");
+      is(pText, "", "The <p> tag has no children");
+      is(pTag, "P", "Created an empty <p> tag");
    }
  },
  {
    selector: "#badMarkup5",
-    oldHTML: '<p id="badMarkup5">badMarkup5</p>',
-    newHTML: '<p id="badMarkup5">badMarkup5 <div>with a nested div</div></p>',
-    validate: function*(pageNode, pageNodeFront, selectedNodeFront, inspector) {
+    oldHTML: "<p id=\"badMarkup5\">badMarkup5</p>",
+    newHTML: "<p id=\"badMarkup5\">badMarkup5 <div>with a nested div</div></p>",
+    validate: function* ({pageNodeFront, selectedNodeFront, testActor}) {
      is(pageNodeFront, selectedNodeFront, "Original element is selected");

-      let p = getNode("#badMarkup5");
-      let nodiv = getNode("#badMarkup5 div", {expectNoMatch: true});
-      let div = getNode("#badMarkup5 ~ div");
+      let num = yield testActor.getNumberOfElementMatches("#badMarkup5 div");

-      ok(!nodiv, "The invalid markup got created as a sibling");
-      is(p.textContent, "badMarkup5 ", "The <p> tag does not take in the <div> content");
-      is(p.tagName, "P", "Did not change to a <div> tag");
-      is(div.textContent, "with a nested div", "textContent is correct");
-      is(div.tagName, "DIV", "Did not change to <p> tag");
+      let pText = yield testActor.getProperty("#badMarkup5", "textContent");
+      let pTag = yield testActor.getProperty("#badMarkup5", "tagName");
+
+      let divText = yield testActor.getProperty("#badMarkup5 ~ div",
+                                                "textContent");
+      let divTag = yield testActor.getProperty("#badMarkup5 ~ div", "tagName");
+
+      is(num, 0, "The invalid markup got created as a sibling");
+      is(pText, "badMarkup5 ", "The p tag does not take in the div content");
+      is(pTag, "P", "Did not change to a <div> tag");
+      is(divText, "with a nested div", "textContent is correct");
+      is(divTag, "DIV", "Did not change to <p> tag");
    }
  }
 ];
@@ -94,7 +112,7 @@ const TEST_URL = "data:text/html," +
  "</body>" +
  "</html>";

-add_task(function*() {
+add_task(function* () {
  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
  inspector.markup._frame.focus();
  yield runEditOuterHTMLTests(TEST_DATA, inspector, testActor);
@@ -20,163 +20,181 @@ const NEW_HTML = '<div id="keyboard">Edited</div>';

 requestLongerTimeout(2);

-add_task(function*() {
-  let {inspector} = yield openInspectorForURL(TEST_URL);
+add_task(function* () {
+  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);

  inspector.markup._frame.focus();

-  info("Checking that pressing escape cancels edits");
-  yield testEscapeCancels(inspector);
+  info("Check that pressing escape cancels edits");
+  yield testEscapeCancels(inspector, testActor);

-  info("Checking that pressing F2 commits edits");
-  yield testF2Commits(inspector);
+  info("Check that pressing F2 commits edits");
+  yield testF2Commits(inspector, testActor);

-  info("Checking that editing the <body> element works like other nodes");
-  yield testBody(inspector);
+  info("Check that editing the <body> element works like other nodes");
+  yield testBody(inspector, testActor);

-  info("Checking that editing the <head> element works like other nodes");
-  yield testHead(inspector);
+  info("Check that editing the <head> element works like other nodes");
+  yield testHead(inspector, testActor);

-  info("Checking that editing the <html> element works like other nodes");
-  yield testDocumentElement(inspector);
+  info("Check that editing the <html> element works like other nodes");
+  yield testDocumentElement(inspector, testActor);

-  info("Checking (again) that editing the <html> element works like other nodes");
-  yield testDocumentElement2(inspector);
+  info("Check (again) that editing the <html> element works like other nodes");
+  yield testDocumentElement2(inspector, testActor);
 });

-function testEscapeCancels(inspector) {
-  let def = promise.defer();
-  let node = getNode(SELECTOR);
+function* testEscapeCancels(inspector, testActor) {
+  yield selectNode(SELECTOR, inspector);

-  selectNode(SELECTOR, inspector).then(() => {
-    inspector.markup.htmlEditor.on("popupshown", function onPopupShown() {
-      inspector.markup.htmlEditor.off("popupshown", onPopupShown);
+  let onEditorShown = once(inspector.markup.htmlEditor, "popupshown");
+  EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
+  yield onEditorShown;
+  ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");

-      ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
-      is(node.outerHTML, OLD_HTML, "The node is starting with old HTML.");
+  is((yield testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
+     "The node is starting with old HTML.");

-      inspector.markup.htmlEditor.on("popuphidden", function onPopupHidden() {
-        inspector.markup.htmlEditor.off("popuphidden", onPopupHidden);
-        ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+  inspector.markup.htmlEditor.editor.setText(NEW_HTML);

-        let node = getNode(SELECTOR);
-        is(node.outerHTML, OLD_HTML, "Escape cancels edits");
-        def.resolve();
-      });
+  let onEditorHiddem = once(inspector.markup.htmlEditor, "popuphidden");
+  EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
+  yield onEditorHiddem;
+  ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");

-      inspector.markup.htmlEditor.editor.setText(NEW_HTML);
-
-      EventUtils.sendKey("ESCAPE", inspector.markup.htmlEditor.doc.defaultView);
-    });
-
-    EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
-  });
-
-  return def.promise;
+  is((yield testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
+     "Escape cancels edits");
 }

-function testF2Commits(inspector) {
-  let def = promise.defer();
-  let node = getNode(SELECTOR);
-
-  inspector.markup.htmlEditor.on("popupshown", function onPopupShown() {
-    inspector.markup.htmlEditor.off("popupshown", onPopupShown);
-
-    ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");
-    is(node.outerHTML, OLD_HTML, "The node is starting with old HTML.");
-
-    inspector.once("markupmutation", (e, aMutations) => {
-      ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
-
-      let node = getNode(SELECTOR);
-      is(node.outerHTML, NEW_HTML, "F2 commits edits - the node has new HTML.");
-      def.resolve();
-    });
-
-    inspector.markup.htmlEditor.editor.setText(NEW_HTML);
-    EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
-  });
-
+function* testF2Commits(inspector, testActor) {
+  let onEditorShown = once(inspector.markup.htmlEditor, "popupshown");
  inspector.markup._frame.contentDocument.documentElement.focus();
  EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
+  yield onEditorShown;
+  ok(inspector.markup.htmlEditor._visible, "HTML Editor is visible");

-  return def.promise;
+  is((yield testActor.getProperty(SELECTOR, "outerHTML")), OLD_HTML,
+     "The node is starting with old HTML.");
+
+  let onMutations = inspector.once("markupmutation");
+  inspector.markup.htmlEditor.editor.setText(NEW_HTML);
+  EventUtils.sendKey("F2", inspector.markup._frame.contentWindow);
+  yield onMutations;
+
+  ok(!inspector.markup.htmlEditor._visible, "HTML Editor is not visible");
+
+  is((yield testActor.getProperty(SELECTOR, "outerHTML")), NEW_HTML,
+     "F2 commits edits - the node has new HTML.");
 }

-function* testBody(inspector) {
-  let body = getNode("body");
+function* testBody(inspector, testActor) {
+  let currentBodyHTML = yield testActor.getProperty("body", "outerHTML");
  let bodyHTML = '<body id="updated"><p></p></body>';
  let bodyFront = yield getNodeFront("body", inspector);
-  let doc = content.document;

  let onReselected = inspector.markup.once("reselectedonremoved");
-  yield inspector.markup.updateNodeOuterHTML(bodyFront, bodyHTML, body.outerHTML);
+  yield inspector.markup.updateNodeOuterHTML(bodyFront, bodyHTML,
+                                             currentBodyHTML);
  yield onReselected;

-  is(getNode("body").outerHTML, bodyHTML, "<body> HTML has been updated");
-  is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
+  let newBodyHTML = yield testActor.getProperty("body", "outerHTML");
+  is(newBodyHTML, bodyHTML, "<body> HTML has been updated");
+
+  let headsNum = yield testActor.getNumberOfElementMatches("head");
+  is(headsNum, 1, "no extra <head>s have been added");

  yield inspector.once("inspector-updated");
 }

-function* testHead(inspector) {
-  let head = getNode("head");
+function* testHead(inspector, testActor) {
  yield selectNode("head", inspector);

-  let headHTML = '<head id="updated"><title>New Title</title><script>window.foo="bar";</script></head>';
+  let currentHeadHTML = yield testActor.getProperty("head", "outerHTML");
+  let headHTML = "<head id=\"updated\"><title>New Title</title>" +
+                 "<script>window.foo=\"bar\";</script></head>";
  let headFront = yield getNodeFront("head", inspector);
-  let doc = content.document;

  let onReselected = inspector.markup.once("reselectedonremoved");
-  yield inspector.markup.updateNodeOuterHTML(headFront, headHTML, head.outerHTML);
+  yield inspector.markup.updateNodeOuterHTML(headFront, headHTML,
+                                             currentHeadHTML);
  yield onReselected;

-  is(doc.title, "New Title", "New title has been added");
-  is(doc.defaultView.foo, undefined, "Script has not been executed");
-  is(doc.querySelector("head").outerHTML, headHTML, "<head> HTML has been updated");
-  is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
+  is((yield testActor.eval("content.document.title")), "New Title",
+     "New title has been added");
+  is((yield testActor.eval("content.foo")), undefined,
+     "Script has not been executed");
+  is((yield testActor.getProperty("head", "outerHTML")), headHTML,
+     "<head> HTML has been updated");
+  is((yield testActor.getNumberOfElementMatches("body")), 1,
+     "no extra <body>s have been added");

  yield inspector.once("inspector-updated");
 }

-function* testDocumentElement(inspector) {
-  let doc = content.document;
-  let docElement = doc.documentElement;
-  let docElementHTML = '<html id="updated" foo="bar"><head><title>Updated from document element</title><script>window.foo="bar";</script></head><body><p>Hello</p></body></html>';
+function* testDocumentElement(inspector, testActor) {
+  let currentDocElementOuterHMTL = yield testActor.eval(
+    "content.document.documentElement.outerHMTL");
+  let docElementHTML = "<html id=\"updated\" foo=\"bar\"><head>" +
+                       "<title>Updated from document element</title>" +
+                       "<script>window.foo=\"bar\";</script></head><body>" +
+                       "<p>Hello</p></body></html>";
  let docElementFront = yield inspector.markup.walker.documentElement();

  let onReselected = inspector.markup.once("reselectedonremoved");
-  yield inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML);
+  yield inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML,
+    currentDocElementOuterHMTL);
  yield onReselected;

-  is(doc.title, "Updated from document element", "New title has been added");
-  is(doc.defaultView.foo, undefined, "Script has not been executed");
-  is(doc.documentElement.id, "updated", "<html> ID has been updated");
-  is(doc.documentElement.className, "", "<html> class has been updated");
-  is(doc.documentElement.getAttribute("foo"), "bar", "<html> attribute has been updated");
-  is(doc.documentElement.outerHTML, docElementHTML, "<html> HTML has been updated");
-  is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
-  is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
-  is(doc.body.textContent, "Hello", "document.body.textContent has been updated");
+  is((yield testActor.eval("content.document.title")),
+     "Updated from document element", "New title has been added");
+  is((yield testActor.eval("content.foo")),
+     undefined, "Script has not been executed");
+  is((yield testActor.getAttribute("html", "id")),
+     "updated", "<html> ID has been updated");
+  is((yield testActor.getAttribute("html", "class")),
+     null, "<html> class has been updated");
+  is((yield testActor.getAttribute("html", "foo")),
+     "bar", "<html> attribute has been updated");
+  is((yield testActor.getProperty("html", "outerHTML")),
+     docElementHTML, "<html> HTML has been updated");
+  is((yield testActor.getNumberOfElementMatches("head")),
+     1, "no extra <head>s have been added");
+  is((yield testActor.getNumberOfElementMatches("body")),
+     1, "no extra <body>s have been added");
+  is((yield testActor.getProperty("body", "textContent")),
+     "Hello", "document.body.textContent has been updated");
 }

-function* testDocumentElement2(inspector) {
-  let doc = content.document;
-  let docElement = doc.documentElement;
-  let docElementHTML = '<html class="updated" id="somethingelse"><head><title>Updated again from document element</title><script>window.foo="bar";</script></head><body><p>Hello again</p></body></html>';
+function* testDocumentElement2(inspector, testActor) {
+  let currentDocElementOuterHMTL = yield testActor.eval(
+    "content.document.documentElement.outerHMTL");
+  let docElementHTML = "<html class=\"updated\" id=\"somethingelse\"><head>" +
+                       "<title>Updated again from document element</title>" +
+                       "<script>window.foo=\"bar\";</script></head><body>" +
+                       "<p>Hello again</p></body></html>";
  let docElementFront = yield inspector.markup.walker.documentElement();

  let onReselected = inspector.markup.once("reselectedonremoved");
-  inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML, docElement.outerHTML);
+  inspector.markup.updateNodeOuterHTML(docElementFront, docElementHTML,
+    currentDocElementOuterHMTL);
  yield onReselected;

-  is(doc.title, "Updated again from document element", "New title has been added");
-  is(doc.defaultView.foo, undefined, "Script has not been executed");
-  is(doc.documentElement.id, "somethingelse", "<html> ID has been updated");
-  is(doc.documentElement.className, "updated", "<html> class has been updated");
-  is(doc.documentElement.getAttribute("foo"), null, "<html> attribute has been removed");
-  is(doc.documentElement.outerHTML, docElementHTML, "<html> HTML has been updated");
-  is(doc.querySelectorAll("head").length, 1, "no extra <head>s have been added");
-  is(doc.querySelectorAll("body").length, 1, "no extra <body>s have been added");
-  is(doc.body.textContent, "Hello again", "document.body.textContent has been updated");
+  is((yield testActor.eval("content.document.title")),
+     "Updated again from document element", "New title has been added");
+  is((yield testActor.eval("content.foo")),
+     undefined, "Script has not been executed");
+  is((yield testActor.getAttribute("html", "id")),
+     "somethingelse", "<html> ID has been updated");
+  is((yield testActor.getAttribute("html", "class")),
+     "updated", "<html> class has been updated");
+  is((yield testActor.getAttribute("html", "foo")),
+     null, "<html> attribute has been removed");
+  is((yield testActor.getProperty("html", "outerHTML")),
+     docElementHTML, "<html> HTML has been updated");
+  is((yield testActor.getNumberOfElementMatches("head")),
+     1, "no extra <head>s have been added");
+  is((yield testActor.getNumberOfElementMatches("body")),
+     1, "no extra <body>s have been added");
+  is((yield testActor.getProperty("body", "textContent")),
+     "Hello again", "document.body.textContent has been updated");
 }
@@ -1,20 +1,12 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */
-
 "use strict";

 // Test that image preview tooltips are shown on img and canvas tags in the
 // markup-view and that the tooltip actually contains an image and shows the
 // right dimension label

-const PAGE_CONTENT = [
-  '<img class="local" src="chrome://branding/content/about-logo.png" />',
-  '<img class="data" src="data:image/png;base64,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" />',
-  '<img class="remote" src="' + URL_ROOT + 'doc_markup_tooltip.png" />',
-  '<canvas class="canvas" width="600" height="600"></canvas>'
-].join("\n");
-
 const TEST_NODES = [
  {selector: "img.local", size: "192" + " \u00D7 " + "192"},
  {selector: "img.data", size: "64" + " \u00D7 " + "64"},
@@ -22,10 +14,8 @@ const TEST_NODES = [
  {selector: ".canvas", size: "600" + " \u00D7 " + "600"}
 ];

-add_task(function*() {
-  yield addTab("data:text/html,markup view tooltip test");
-  createPage();
-
+add_task(function* () {
+  yield addTab(URL_ROOT + "doc_markup_image_and_canvas_2.html");
  let {inspector} = yield openInspector();

  info("Selecting the first <img> tag");
@@ -38,23 +28,6 @@ add_task(function*() {
  }
 });

-function createPage() {
-  info("Fill the page with the test content");
-  content.document.body.innerHTML = PAGE_CONTENT;
-
-  info("Fill the canvas");
-  let doc = content.document;
-  let context = doc.querySelector(".canvas").getContext("2d");
-
-  context.beginPath();
-  context.moveTo(300, 0);
-  context.lineTo(600, 600);
-  context.lineTo(0, 600);
-  context.closePath();
-  context.fillStyle = "#ffc821";
-  context.fill();
-}
-
 function* getImageTooltipTarget({selector}, inspector) {
  let nodeFront = yield getNodeFront(selector, inspector);
  let isImg = nodeFront.tagName.toLowerCase() === "img";
@@ -79,7 +52,8 @@ function checkImageTooltip({selector, size}, {markup}) {
  is(images.length, 1, "Tooltip for [" + selector + "] contains an image");

  let label = markup.tooltip.panel.querySelector(".devtools-tooltip-caption");
-  is(label.textContent, size, "Tooltip label for [" + selector + "] displays the right image size");
+  is(label.textContent, size,
+     "Tooltip label for [" + selector + "] displays the right image size");

  markup.tooltip.hide();
 }
@@ -16,7 +16,7 @@ const UPDATED_SRC = URL_ROOT + "doc_markup_tooltip.png";
 const INITIAL_SRC_SIZE = "64" + " \u00D7 " + "64";
 const UPDATED_SRC_SIZE = "22" + " \u00D7 " + "23";

-add_task(function*() {
+add_task(function* () {
  let { inspector } = yield openInspectorForURL(
    "data:text/html,<p>markup view tooltip test</p><img>");

--- a/Show More
+++ b/Show More