--- a/.eslintignore
+++ b/.eslintignore
@@ -88,17 +88,16 @@ devtools/client/canvasdebugger/**
 devtools/client/commandline/**
 devtools/client/debugger/**
 devtools/client/eyedropper/**
 devtools/client/framework/**
 # devtools/client/inspector/shared/*.js files are eslint-clean, so they aren't
 # included in the ignore list.
 devtools/client/inspector/computed/**
 devtools/client/inspector/fonts/**
-devtools/client/inspector/layout/**
 devtools/client/inspector/markup/test/**
 devtools/client/inspector/rules/**
 devtools/client/inspector/shared/test/**
 devtools/client/inspector/test/**
 devtools/client/inspector/*.js
 devtools/client/jsonview/**
 devtools/client/memory/**
 devtools/client/netmonitor/**

--- a/devtools/client/inspector/layout/layout.js
+++ b/devtools/client/inspector/layout/layout.js
@@ -302,18 +302,18 @@ LayoutView.prototype = {
     let { property } = dimension;
     let session = new EditingSession(this.doc, this.elementRules);
     let initialValue = session.getProperty(property);
 
     let editor = new InplaceEditor({
       element: element,
       initial: initialValue,
 
-      start: editor => {
-        editor.elt.parentNode.classList.add("layout-editing");
+      start: self => {
+        self.elt.parentNode.classList.add("layout-editing");
       },
 
       change: value => {
         if (NUMERIC.test(value)) {
           value += "px";
         }
 
         let properties = [
@@ -452,17 +452,17 @@ LayoutView.prototype = {
   /**
    * Compute the dimensions of the node and update the values in
    * the layoutview/view.xhtml document.
    * @return a promise that will be resolved when complete.
    */
   update: function() {
     let lastRequest = Task.spawn((function*() {
       if (!this.isViewVisibleAndNodeValid()) {
-        return;
+        return null;
       }
 
       let node = this.inspector.selection.nodeFront;
       let layout = yield this.inspector.pageStyle.getLayout(node, {
         autoMargins: this.isActive
       });
       let styleEntries = yield this.inspector.pageStyle.getApplied(node, {});
 
@@ -541,17 +541,18 @@ LayoutView.prototype = {
         this.sizeLabel.textContent = newValue;
       }
 
       this.elementRules = styleEntries.map(e => e.rule);
 
       this.inspector.emit("layoutview-updated");
     }).bind(this)).then(null, console.error);
 
-    return this._lastRequest = lastRequest;
+    this._lastRequest = lastRequest;
+    return this._lastRequest;
   },
 
   /**
    * Update the text in the tooltip shown when hovering over a value to provide
    * information about the source CSS rule that sets this value.
    * @param {DOMNode} el The element that will receive the tooltip.
    * @param {String} property The name of the CSS property for the tooltip.
    * @param {Array} rules An array of applied rules retrieved by
@@ -582,17 +583,17 @@ LayoutView.prototype = {
     }
     el.setAttribute("title", title);
   },
 
   /**
    * Show the box-model highlighter on the currently selected element
    * @param {Object} options Options passed to the highlighter actor
    */
-  showBoxModel: function(options={}) {
+  showBoxModel: function(options = {}) {
     let toolbox = this.inspector.toolbox;
     let nodeFront = this.inspector.selection.nodeFront;
 
     toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
   },
 
   /**
    * Hide the box-model highlighter on the currently selected element

--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel.js
+++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel.js
@@ -14,163 +14,165 @@ const TEST_URI = "<style>" +
   "#div3 { padding: 2em; }" +
   "#div4 { margin: 1px; }" +
   "#div5 { margin: 1px; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div>" +
   "<div id='div3'></div><div id='div4'></div>" +
   "<div id='div5'></div>";
 
-function getStyle(node, property) {
-  return node.style.getPropertyValue(property);
-}
-
 add_task(function*() {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openLayoutView();
 
-  yield testEditingMargins(inspector, view);
-  yield testKeyBindings(inspector, view);
-  yield testEscapeToUndo(inspector, view);
-  yield testDeletingValue(inspector, view);
-  yield testRefocusingOnClick(inspector, view);
+  yield testEditingMargins(inspector, view, testActor);
+  yield testKeyBindings(inspector, view, testActor);
+  yield testEscapeToUndo(inspector, view, testActor);
+  yield testDeletingValue(inspector, view, testActor);
+  yield testRefocusingOnClick(inspector, view, testActor);
   yield testBluringOnClick(inspector, view);
 });
 
-function* testEditingMargins(inspector, view) {
+function* testEditingMargins(inspector, view, testActor) {
   info("Test that editing margin dynamically updates the document, pressing " +
        "escape cancels the changes");
 
-  let node = content.document.getElementById("div1");
-  is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
+  is((yield getStyle(testActor, "#div1", "margin-top")), "",
+     "Should be no margin-top on the element.");
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-margin.layout-top > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("3", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
-  is(getStyle(node, "margin-top"), "3px", "Should have updated the margin.");
+  is((yield getStyle(testActor, "#div1", "margin-top")), "3px",
+     "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
-  is(getStyle(node, "margin-top"), "", "Should be no margin-top on the element.")
+  is((yield getStyle(testActor, "#div1", "margin-top")), "",
+     "Should be no margin-top on the element.");
   is(span.textContent, 5, "Should have the right value in the box model.");
 }
 
-function* testKeyBindings(inspector, view) {
+function* testKeyBindings(inspector, view, testActor) {
   info("Test that arrow keys work correctly and pressing enter commits the " +
        "changes");
 
-  let node = content.document.getElementById("div1");
-  is(getStyle(node, "margin-left"), "", "Should be no margin-top on the element.")
+  is((yield getStyle(testActor, "#div1", "margin-left")), "",
+     "Should be no margin-top on the element.");
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-margin.layout-left > span");
   is(span.textContent, 10, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "10px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_UP", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "11px", "Should have the right value in the editor.");
-  is(getStyle(node, "margin-left"), "11px", "Should have updated the margin.");
+  is((yield getStyle(testActor, "#div1", "margin-left")), "11px",
+     "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_DOWN", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "10px", "Should have the right value in the editor.");
-  is(getStyle(node, "margin-left"), "10px", "Should have updated the margin.");
+  is((yield getStyle(testActor, "#div1", "margin-left")), "10px",
+     "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_UP", { shiftKey: true }, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "20px", "Should have the right value in the editor.");
-  is(getStyle(node, "margin-left"), "20px", "Should have updated the margin.");
+  is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
+     "Should have updated the margin.");
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
-  is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
+  is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
+     "Should be the right margin-top on the element.");
   is(span.textContent, 20, "Should have the right value in the box model.");
 }
 
-function* testEscapeToUndo(inspector, view) {
+function* testEscapeToUndo(inspector, view, testActor) {
   info("Test that deleting the value removes the property but escape undoes " +
        "that");
 
-  let node = content.document.getElementById("div1");
-  is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
+  is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
+     "Should be the right margin-top on the element.");
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-margin.layout-left > span");
   is(span.textContent, 20, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "20px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
-  is(getStyle(node, "margin-left"), "", "Should have updated the margin.");
+  is((yield getStyle(testActor, "#div1", "margin-left")), "",
+     "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
-  is(getStyle(node, "margin-left"), "20px", "Should be the right margin-top on the element.")
+  is((yield getStyle(testActor, "#div1", "margin-left")), "20px",
+     "Should be the right margin-top on the element.");
   is(span.textContent, 20, "Should have the right value in the box model.");
 }
 
-function* testDeletingValue(inspector, view) {
+function* testDeletingValue(inspector, view, testActor) {
   info("Test that deleting the value removes the property");
 
-  let node = content.document.getElementById("div1");
-
-  node.style.marginRight = "15px";
+  yield setStyle(testActor, "#div1", "marginRight", "15px");
   yield waitForUpdate(inspector);
 
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-margin.layout-right > span");
   is(span.textContent, 15, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "15px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
-  is(getStyle(node, "margin-right"), "", "Should have updated the margin.");
+  is((yield getStyle(testActor, "#div1", "margin-right")), "",
+     "Should have updated the margin.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
-  is(getStyle(node, "margin-right"), "", "Should be the right margin-top on the element.")
+  is((yield getStyle(testActor, "#div1", "margin-right")), "",
+     "Should be the right margin-top on the element.");
   is(span.textContent, 10, "Should have the right value in the box model.");
 }
 
-function* testRefocusingOnClick(inspector, view) {
+function* testRefocusingOnClick(inspector, view, testActor) {
   info("Test that clicking in the editor input does not remove focus");
 
-  let node = content.document.getElementById("div4");
-
   yield selectNode("#div4", inspector);
 
   let span = view.doc.querySelector(".layout-margin.layout-top > span");
   is(span.textContent, 1, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
@@ -180,29 +182,28 @@ function* testRefocusingOnClick(inspecto
   is(editor, view.doc.activeElement,
     "Inplace editor input should still have focus.");
 
   info("Check the input can still be used as expected");
   EventUtils.synthesizeKey("VK_UP", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "2px", "Should have the right value in the editor.");
-  is(getStyle(node, "margin-top"), "2px", "Should have updated the margin.");
+  is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
+     "Should have updated the margin.");
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
-  is(getStyle(node, "margin-top"), "2px",
-    "Should be the right margin-top on the element.");
+  is((yield getStyle(testActor, "#div4", "margin-top")), "2px",
+     "Should be the right margin-top on the element.");
   is(span.textContent, 2, "Should have the right value in the box model.");
 }
 
 function* testBluringOnClick(inspector, view) {
   info("Test that clicking outside the editor blurs it");
 
-  let node = content.document.getElementById("div5");
-
   yield selectNode("#div5", inspector);
 
   let span = view.doc.querySelector(".layout-margin.layout-top > span");
   is(span.textContent, 1, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");

--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js
+++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_allproperties.js
@@ -9,144 +9,138 @@
 const TEST_URI = "<style>" +
   "div { margin: 10px; padding: 3px }" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
-function getStyle(node, property) {
-  return node.style.getPropertyValue(property);
-}
-
 add_task(function*() {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openLayoutView();
 
-  yield testEditing(inspector, view);
-  yield testEditingAndCanceling(inspector, view);
-  yield testDeleting(inspector, view);
-  yield testDeletingAndCanceling(inspector, view);
+  yield testEditing(inspector, view, testActor);
+  yield testEditingAndCanceling(inspector, view, testActor);
+  yield testDeleting(inspector, view, testActor);
+  yield testDeletingAndCanceling(inspector, view, testActor);
 });
 
-function* testEditing(inspector, view) {
+function* testEditing(inspector, view, testActor) {
   info("When all properties are set on the node editing one should work");
 
-  let node = content.document.getElementById("div1");
-
-  node.style.padding = "5px";
+  yield setStyle(testActor, "#div1", "padding", "5px");
   yield waitForUpdate(inspector);
 
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-padding.layout-bottom > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("7", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "7", "Should have the right value in the editor.");
-  is(getStyle(node, "padding-bottom"), "7px", "Should have updated the padding");
+  is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
+     "Should have updated the padding");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
-  is(getStyle(node, "padding-bottom"), "7px", "Should be the right padding.")
+  is((yield getStyle(testActor, "#div1", "padding-bottom")), "7px",
+     "Should be the right padding.");
   is(span.textContent, 7, "Should have the right value in the box model.");
 }
 
-function* testEditingAndCanceling(inspector, view) {
+function* testEditingAndCanceling(inspector, view, testActor) {
   info("When all properties are set on the node editing one and then " +
        "cancelling with ESCAPE should work");
 
-  let node = content.document.getElementById("div1");
-
-  node.style.padding = "5px";
+  yield setStyle(testActor, "#div1", "padding", "5px");
   yield waitForUpdate(inspector);
 
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-padding.layout-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("8", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "8", "Should have the right value in the editor.");
-  is(getStyle(node, "padding-left"), "8px", "Should have updated the padding");
+  is((yield getStyle(testActor, "#div1", "padding-left")), "8px",
+     "Should have updated the padding");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
-  is(getStyle(node, "padding-left"), "5px", "Should be the right padding.")
+  is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
+     "Should be the right padding.");
   is(span.textContent, 5, "Should have the right value in the box model.");
 }
 
-function* testDeleting(inspector, view) {
+function* testDeleting(inspector, view, testActor) {
   info("When all properties are set on the node deleting one should work");
 
-  let node = content.document.getElementById("div1");
-
-  node.style.padding = "5px";
-
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-padding.layout-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
-  is(getStyle(node, "padding-left"), "", "Should have updated the padding");
+  is((yield getStyle(testActor, "#div1", "padding-left")), "",
+     "Should have updated the padding");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
-  is(getStyle(node, "padding-left"), "", "Should be the right padding.")
+  is((yield getStyle(testActor, "#div1", "padding-left")), "",
+     "Should be the right padding.");
   is(span.textContent, 3, "Should have the right value in the box model.");
 }
 
-function* testDeletingAndCanceling(inspector, view) {
+function* testDeletingAndCanceling(inspector, view, testActor) {
   info("When all properties are set on the node deleting one then cancelling " +
        "should work");
 
-  let node = content.document.getElementById("div1");
-
-  node.style.padding = "5px";
+  yield setStyle(testActor, "#div1", "padding", "5px");
   yield waitForUpdate(inspector);
 
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-padding.layout-left > span");
   is(span.textContent, 5, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "5px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_DELETE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "", "Should have the right value in the editor.");
-  is(getStyle(node, "padding-left"), "", "Should have updated the padding");
+  is((yield getStyle(testActor, "#div1", "padding-left")), "",
+     "Should have updated the padding");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
-  is(getStyle(node, "padding-left"), "5px", "Should be the right padding.")
+  is((yield getStyle(testActor, "#div1", "padding-left")), "5px",
+     "Should be the right padding.");
   is(span.textContent, 5, "Should have the right value in the box model.");
 }

--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js
+++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_border.js
@@ -9,43 +9,44 @@
 const TEST_URI = "<style>" +
   "div { margin: 10px; padding: 3px }" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
-function getStyle(node, property) {
-  return node.style.getPropertyValue(property);
-}
-
 add_task(function*() {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openLayoutView();
 
-  let node = content.document.getElementById("div1");
-  is(getStyle(node, "border-top-width"), "", "Should have the right border");
-  is(getStyle(node, "border-top-style"), "", "Should have the right border");
+  is((yield getStyle(testActor, "#div1", "border-top-width")), "",
+     "Should have the right border");
+  is((yield getStyle(testActor, "#div1", "border-top-style")), "",
+     "Should have the right border");
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-border.layout-top > span");
   is(span.textContent, 0, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "0", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("1", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "1", "Should have the right value in the editor.");
-  is(getStyle(node, "border-top-width"), "1px", "Should have the right border");
-  is(getStyle(node, "border-top-style"), "solid", "Should have the right border");
+  is((yield getStyle(testActor, "#div1", "border-top-width")), "1px",
+     "Should have the right border");
+  is((yield getStyle(testActor, "#div1", "border-top-style")), "solid",
+     "Should have the right border");
 
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
-  is(getStyle(node, "border-top-width"), "", "Should be the right padding.")
-  is(getStyle(node, "border-top-style"), "", "Should have the right border");
+  is((yield getStyle(testActor, "#div1", "border-top-width")), "",
+     "Should be the right padding.");
+  is((yield getStyle(testActor, "#div1", "border-top-style")), "",
+     "Should have the right border");
   is(span.textContent, 0, "Should have the right value in the box model.");
 });

--- a/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js
+++ b/devtools/client/inspector/layout/test/browser_layout_editablemodel_stylerules.js
@@ -10,105 +10,104 @@
 const TEST_URI = "<style>" +
   "div { margin: 10px; padding: 3px }" +
   "#div1 { margin-top: 5px }" +
   "#div2 { border-bottom: 1em solid black; }" +
   "#div3 { padding: 2em; }" +
   "</style>" +
   "<div id='div1'></div><div id='div2'></div><div id='div3'></div>";
 
-function getStyle(node, property) {
-  return node.style.getPropertyValue(property);
-}
-
 add_task(function*() {
   yield addTab("data:text/html," + encodeURIComponent(TEST_URI));
-  let {inspector, view} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openLayoutView();
 
-  yield testUnits(inspector, view);
-  yield testValueComesFromStyleRule(inspector, view);
-  yield testShorthandsAreParsed(inspector, view);
+  yield testUnits(inspector, view, testActor);
+  yield testValueComesFromStyleRule(inspector, view, testActor);
+  yield testShorthandsAreParsed(inspector, view, testActor);
 });
 
-function* testUnits(inspector, view) {
+function* testUnits(inspector, view, testActor) {
   info("Test that entering units works");
 
-  let node = content.document.getElementById("div1");
-  is(getStyle(node, "padding-top"), "", "Should have the right padding");
+  is((yield getStyle(testActor, "#div1", "padding-top")), "",
+     "Should have the right padding");
   yield selectNode("#div1", inspector);
 
   let span = view.doc.querySelector(".layout-padding.layout-top > span");
   is(span.textContent, 3, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "3px", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("1", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
   EventUtils.synthesizeKey("e", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
-  is(getStyle(node, "padding-top"), "", "An invalid value is handled cleanly");
+  is((yield getStyle(testActor, "#div1", "padding-top")), "",
+     "An invalid value is handled cleanly");
 
   EventUtils.synthesizeKey("m", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "1em", "Should have the right value in the editor.");
-  is(getStyle(node, "padding-top"), "1em", "Should have updated the padding.");
+  is((yield getStyle(testActor, "#div1", "padding-top")),
+     "1em", "Should have updated the padding.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
-  is(getStyle(node, "padding-top"), "1em", "Should be the right padding.")
+  is((yield getStyle(testActor, "#div1", "padding-top")), "1em",
+     "Should be the right padding.");
   is(span.textContent, 16, "Should have the right value in the box model.");
 }
 
-function* testValueComesFromStyleRule(inspector, view) {
+function* testValueComesFromStyleRule(inspector, view, testActor) {
   info("Test that we pick up the value from a higher style rule");
 
-  let node = content.document.getElementById("div2");
-  is(getStyle(node, "border-bottom-width"), "",
+  is((yield getStyle(testActor, "#div2", "border-bottom-width")), "",
      "Should have the right border-bottom-width");
   yield selectNode("#div2", inspector);
 
   let span = view.doc.querySelector(".layout-border.layout-bottom > span");
   is(span.textContent, 16, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "1em", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("0", {}, view.doc.defaultView);
   yield waitForUpdate(inspector);
 
   is(editor.value, "0", "Should have the right value in the editor.");
-  is(getStyle(node, "border-bottom-width"), "0px",
+  is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
      "Should have updated the border.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
-  is(getStyle(node, "border-bottom-width"), "0px",
+  is((yield getStyle(testActor, "#div2", "border-bottom-width")), "0px",
      "Should be the right border-bottom-width.");
   is(span.textContent, 0, "Should have the right value in the box model.");
 }
 
-function* testShorthandsAreParsed(inspector, view) {
+function* testShorthandsAreParsed(inspector, view, testActor) {
   info("Test that shorthand properties are parsed correctly");
 
-  let node = content.document.getElementById("div3");
-  is(getStyle(node, "padding-right"), "", "Should have the right padding");
+  is((yield getStyle(testActor, "#div3", "padding-right")), "",
+     "Should have the right padding");
   yield selectNode("#div3", inspector);
 
   let span = view.doc.querySelector(".layout-padding.layout-right > span");
   is(span.textContent, 32, "Should have the right value in the box model.");
 
   EventUtils.synthesizeMouseAtCenter(span, {}, view.doc.defaultView);
   let editor = view.doc.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
   is(editor.value, "2em", "Should have the right value in the editor.");
 
   EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
 
-  is(getStyle(node, "padding-right"), "", "Should be the right padding.")
+  is((yield getStyle(testActor, "#div3", "padding-right")), "",
+     "Should be the right padding.");
   is(span.textContent, 32, "Should have the right value in the box model.");
 }

--- a/devtools/client/inspector/layout/test/browser_layout_guides.js
+++ b/devtools/client/inspector/layout/test/browser_layout_guides.js
@@ -4,50 +4,51 @@
 "use strict";
 
 // Test that hovering over regions in the box-model shows the highlighter with
 // the right options.
 // Tests that actually check the highlighter is displayed and correct are in the
 // devtools/inspector/test folder. This test only cares about checking that the
 // layout-view does call the highlighter, and it does so by mocking it.
 
-const STYLE = "div { position: absolute; top: 50px; left: 50px; height: 10px; " +
-              "width: 10px; border: 10px solid black; padding: 10px; margin: 10px;}";
+const STYLE = "div { position: absolute; top: 50px; left: 50px; " +
+              "height: 10px; width: 10px; border: 10px solid black; " +
+              "padding: 10px; margin: 10px;}";
 const HTML = "<style>" + STYLE + "</style><div></div>";
 const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
 
 var highlightedNodeFront, highlighterOptions;
 
 add_task(function*() {
   yield addTab(TEST_URL);
   let {toolbox, inspector, view} = yield openLayoutView();
   yield selectNode("div", inspector);
 
   // Mock the highlighter by replacing the showBoxModel method.
   toolbox.highlighter.showBoxModel = function(nodeFront, options) {
     highlightedNodeFront = nodeFront;
     highlighterOptions = options;
-  }
+  };
 
   let elt = view.doc.getElementById("layout-margins");
   yield testGuideOnLayoutHover(elt, "margin", inspector, view);
 
   elt = view.doc.getElementById("layout-borders");
   yield testGuideOnLayoutHover(elt, "border", inspector, view);
 
   elt = view.doc.getElementById("layout-padding");
   yield testGuideOnLayoutHover(elt, "padding", inspector, view);
 
   elt = view.doc.getElementById("layout-content");
   yield testGuideOnLayoutHover(elt, "content", inspector, view);
 });
 
-function* testGuideOnLayoutHover(elt, expectedRegion, inspector, view) {
+function* testGuideOnLayoutHover(elt, expectedRegion, inspector) {
   info("Synthesizing mouseover on the layout-view");
-  EventUtils.synthesizeMouse(elt, 2, 2, {type:'mouseover'},
+  EventUtils.synthesizeMouse(elt, 2, 2, {type: "mouseover"},
     elt.ownerDocument.defaultView);
 
   info("Waiting for the node-highlight event from the toolbox");
   yield inspector.toolbox.once("node-highlight");
 
   is(highlightedNodeFront, inspector.selection.nodeFront,
     "The right nodeFront was highlighted");
   is(highlighterOptions.region, expectedRegion,

--- a/devtools/client/inspector/layout/test/browser_layout_rotate-labels-on-sides.js
+++ b/devtools/client/inspector/layout/test/browser_layout_rotate-labels-on-sides.js
@@ -2,41 +2,42 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that longer values are rotated on the side
 
 const res1 = [
-  {selector: ".layout-margin.layout-top > span",         value: 30},
-  {selector: ".layout-margin.layout-left > span",        value: "auto"},
-  {selector: ".layout-margin.layout-bottom > span",      value: 30},
-  {selector: ".layout-margin.layout-right > span",       value: "auto"},
-  {selector: ".layout-padding.layout-top > span",        value: 20},
-  {selector: ".layout-padding.layout-left > span",       value: 2000000},
-  {selector: ".layout-padding.layout-bottom > span",     value: 20},
-  {selector: ".layout-padding.layout-right > span",      value: 20},
-  {selector: ".layout-border.layout-top > span",         value: 10},
-  {selector: ".layout-border.layout-left > span",        value: 10},
-  {selector: ".layout-border.layout-bottom > span",      value: 10},
-  {selector: ".layout-border.layout-right > span",       value: 10},
+  {selector: ".layout-margin.layout-top > span", value: 30},
+  {selector: ".layout-margin.layout-left > span", value: "auto"},
+  {selector: ".layout-margin.layout-bottom > span", value: 30},
+  {selector: ".layout-margin.layout-right > span", value: "auto"},
+  {selector: ".layout-padding.layout-top > span", value: 20},
+  {selector: ".layout-padding.layout-left > span", value: 2000000},
+  {selector: ".layout-padding.layout-bottom > span", value: 20},
+  {selector: ".layout-padding.layout-right > span", value: 20},
+  {selector: ".layout-border.layout-top > span", value: 10},
+  {selector: ".layout-border.layout-left > span", value: 10},
+  {selector: ".layout-border.layout-bottom > span", value: 10},
+  {selector: ".layout-border.layout-right > span", value: 10},
 ];
 
 const TEST_URI = encodeURIComponent([
   "<style>",
-  "div{border:10px solid black; padding: 20px 20px 20px 2000000px; margin: 30px auto;}",
+  "div { border:10px solid black; padding: 20px 20px 20px 2000000px; " +
+  "margin: 30px auto; }",
   "</style>",
   "<div></div>"
 ].join(""));
 const LONG_TEXT_ROTATE_LIMIT = 3;
 
 add_task(function*() {
   yield addTab("data:text/html," + TEST_URI);
-  let {toolbox, inspector, view} = yield openLayoutView();
+  let {inspector, view} = yield openLayoutView();
   yield selectNode("div", inspector);
 
   for (let i = 0; i < res1.length; i++) {
     let elt = view.doc.querySelector(res1[i].selector);
     let isLong = elt.textContent.length > LONG_TEXT_ROTATE_LIMIT;
     let classList = elt.parentNode.classList;
     let canBeRotated = classList.contains("layout-left") ||
                        classList.contains("layout-right");

--- a/devtools/client/inspector/layout/test/browser_layout_tooltips.js
+++ b/devtools/client/inspector/layout/test/browser_layout_tooltips.js
@@ -37,24 +37,24 @@ const VALUES_TEST_DATA = [{
     name: "margin-bottom",
     ruleSelector: "#div1",
     styleSheetLocation: "null:1"
   }, {
     name: "margin-left",
     ruleSelector: "#div1",
     styleSheetLocation: "null:1"
   }]
-},{
+}, {
   selector: "#div2",
   values: [{
     name: "border-bottom-width",
     ruleSelector: "#div2",
     styleSheetLocation: "null:2"
   }]
-},{
+}, {
   selector: "#div3",
   values: [{
     name: "padding-top",
     ruleSelector: "html, body, #div3",
     styleSheetLocation: "null:3"
   }, {
     name: "padding-right",
     ruleSelector: "html, body, #div3",
@@ -67,17 +67,17 @@ const VALUES_TEST_DATA = [{
     name: "padding-left",
     ruleSelector: "html, body, #div3",
     styleSheetLocation: "null:3"
   }]
 }];
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {toolbox, inspector, view} = yield openLayoutView();
+  let {inspector, view} = yield openLayoutView();
 
   info("Checking the regions tooltips");
 
   ok(view.doc.querySelector("#layout-margins").hasAttribute("title"),
     "The margin region has a tooltip");
   is(view.doc.querySelector("#layout-margins").getAttribute("title"), "margin",
     "The margin region has the correct tooltip content");
 

--- a/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js
+++ b/devtools/client/inspector/layout/test/browser_layout_update-after-navigation.js
@@ -2,101 +2,90 @@
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the layout-view continues to work after a page navigation and that
 // it also works after going back
 
+const IFRAME1 = URL_ROOT + "doc_layout_iframe1.html";
+const IFRAME2 = URL_ROOT + "doc_layout_iframe2.html";
+
 add_task(function*() {
-  yield addTab(URL_ROOT + "doc_layout_iframe1.html");
-  let {inspector, view} = yield openLayoutView();
+  yield addTab(IFRAME1);
+  let {inspector, view, testActor} = yield openLayoutView();
 
-  yield testFirstPage(inspector, view);
+  yield testFirstPage(inspector, view, testActor);
 
   info("Navigate to the second page");
-  yield navigateTo(URL_ROOT + "doc_layout_iframe2.html");
+  yield testActor.eval(`content.location.href="${IFRAME2}"`);
   yield inspector.once("markuploaded");
 
-  yield testSecondPage(inspector, view);
+  yield testSecondPage(inspector, view, testActor);
 
   info("Go back to the first page");
-  content.history.back();
+  yield testActor.eval("content.history.back();");
   yield inspector.once("markuploaded");
 
-  yield testBackToFirstPage(inspector, view);
+  yield testBackToFirstPage(inspector, view, testActor);
 });
 
-function* testFirstPage(inspector, view) {
+function* testFirstPage(inspector, view, testActor) {
   info("Test that the layout-view works on the first page");
 
   info("Selecting the test node");
   yield selectNode("p", inspector);
 
   info("Checking that the layout-view shows the right value");
   let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
   is(paddingElt.textContent, "50");
 
   info("Listening for layout-view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
-  getNode("p").style.padding = "20px";
+  yield setStyle(testActor, "p", "padding", "20px");
   yield onUpdated;
   ok(true, "Layout-view got updated");
 
   info("Checking that the layout-view shows the right value after update");
   is(paddingElt.textContent, "20");
 }
 
-function* testSecondPage(inspector, view) {
+function* testSecondPage(inspector, view, testActor) {
   info("Test that the layout-view works on the second page");
 
   info("Selecting the test node");
   yield selectNode("p", inspector);
 
   info("Checking that the layout-view shows the right value");
   let sizeElt = view.doc.querySelector(".layout-size > span");
   is(sizeElt.textContent, "100" + "\u00D7" + "100");
 
   info("Listening for layout-view changes and modifying the size");
   let onUpdated = waitForUpdate(inspector);
-  getNode("p").style.width = "200px";
+  yield setStyle(testActor, "p", "width", "200px");
   yield onUpdated;
   ok(true, "Layout-view got updated");
 
   info("Checking that the layout-view shows the right value after update");
   is(sizeElt.textContent, "200" + "\u00D7" + "100");
 }
 
-function* testBackToFirstPage(inspector, view) {
+function* testBackToFirstPage(inspector, view, testActor) {
   info("Test that the layout-view works on the first page after going back");
 
   info("Selecting the test node");
   yield selectNode("p", inspector);
 
   info("Checking that the layout-view shows the right value, which is the" +
     "modified value from step one because of the bfcache");
   let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
   is(paddingElt.textContent, "20");
 
   info("Listening for layout-view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
-  getNode("p").style.padding = "100px";
+  yield setStyle(testActor, "p", "padding", "100px");
   yield onUpdated;
   ok(true, "Layout-view got updated");
 
   info("Checking that the layout-view shows the right value after update");
   is(paddingElt.textContent, "100");
 }
-
-function navigateTo(url) {
-  info("Navigating to " + url);
-
-  let def = promise.defer();
-  gBrowser.selectedBrowser.addEventListener("load", function onload() {
-    gBrowser.selectedBrowser.removeEventListener("load", onload, true);
-    info("URL " + url + " loading complete");
-    waitForFocus(def.resolve, content);
-  }, true);
-  content.location = url;
-
-  return def.promise;
-}

--- a/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js
+++ b/devtools/client/inspector/layout/test/browser_layout_update-after-reload.js
@@ -3,38 +3,38 @@
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that the layout-view continues to work after the page is reloaded
 
 add_task(function*() {
   yield addTab(URL_ROOT + "doc_layout_iframe1.html");
-  let {toolbox, inspector, view} = yield openLayoutView();
+  let {inspector, view, testActor} = yield openLayoutView();
 
   info("Test that the layout-view works on the first page");
-  yield assertLayoutView(inspector, view);
+  yield assertLayoutView(inspector, view, testActor);
 
   info("Reload the page");
-  content.location.reload();
+  yield testActor.eval("content.location.reload();");
   yield inspector.once("markuploaded");
 
   info("Test that the layout-view works on the reloaded page");
-  yield assertLayoutView(inspector, view);
+  yield assertLayoutView(inspector, view, testActor);
 });
 
-function* assertLayoutView(inspector, view) {
+function* assertLayoutView(inspector, view, testActor) {
   info("Selecting the test node");
   yield selectNode("p", inspector);
 
   info("Checking that the layout-view shows the right value");
   let paddingElt = view.doc.querySelector(".layout-padding.layout-top > span");
   is(paddingElt.textContent, "50");
 
   info("Listening for layout-view changes and modifying the padding");
   let onUpdated = waitForUpdate(inspector);
-  getNode("p").style.padding = "20px";
+  yield setStyle(testActor, "p", "padding", "20px");
   yield onUpdated;
   ok(true, "Layout-view got updated");
 
   info("Checking that the layout-view shows the right value after update");
   is(paddingElt.textContent, "20");
 }

--- a/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js
+++ b/devtools/client/inspector/layout/test/browser_layout_update-in-iframes.js
@@ -4,63 +4,60 @@
 
 "use strict";
 
 // Test that the layout-view for elements within iframes also updates when they
 // change
 
 add_task(function*() {
   yield addTab(URL_ROOT + "doc_layout_iframe1.html");
-  let iframe2 = getNode("iframe").contentDocument.querySelector("iframe");
+  let {inspector, view, testActor} = yield openLayoutView();
 
-  let {inspector, view} = yield openLayoutView();
-  yield testResizingInIframe(inspector, view, iframe2);
-  yield testReflowsAfterIframeDeletion(inspector, view, iframe2);
+  yield testResizingInIframe(inspector, view, testActor);
+  yield testReflowsAfterIframeDeletion(inspector, view, testActor);
 });
 
-function* testResizingInIframe(inspector, view, iframe2) {
+function* testResizingInIframe(inspector, view, testActor) {
   info("Test that resizing an element in an iframe updates its box model");
 
   info("Selecting the nested test node");
-  let node = iframe2.contentDocument.querySelector("div");
   yield selectNodeInIframe2("div", inspector);
 
   info("Checking that the layout-view shows the right value");
   let sizeElt = view.doc.querySelector(".layout-size > span");
   is(sizeElt.textContent, "400\u00D7200");
 
   info("Listening for layout-view changes and modifying its size");
   let onUpdated = waitForUpdate(inspector);
-  node.style.width = "200px";
+  yield setStyleInIframe2(testActor, "div", "width", "200px");
   yield onUpdated;
   ok(true, "Layout-view got updated");
 
   info("Checking that the layout-view shows the right value after update");
   is(sizeElt.textContent, "200\u00D7200");
 }
 
-function* testReflowsAfterIframeDeletion(inspector, view, iframe2) {
+function* testReflowsAfterIframeDeletion(inspector, view, testActor) {
   info("Test reflows are still sent to the layout-view after deleting an " +
        "iframe");
 
   info("Deleting the iframe2");
-  iframe2.remove();
+  yield removeIframe2(testActor);
   yield inspector.once("inspector-updated");
 
   info("Selecting the test node in iframe1");
-  let node = getNode("iframe").contentDocument.querySelector("p");
   yield selectNodeInIframe1("p", inspector);
 
   info("Checking that the layout-view shows the right value");
   let sizeElt = view.doc.querySelector(".layout-size > span");
   is(sizeElt.textContent, "100\u00D7100");
 
   info("Listening for layout-view changes and modifying its size");
   let onUpdated = waitForUpdate(inspector);
-  node.style.width = "200px";
+  yield setStyleInIframe1(testActor, "p", "width", "200px");
   yield onUpdated;
   ok(true, "Layout-view got updated");
 
   info("Checking that the layout-view shows the right value after update");
   is(sizeElt.textContent, "200\u00D7100");
 }
 
 function* selectNodeInIframe1(selector, inspector) {
@@ -70,8 +67,35 @@ function* selectNodeInIframe1(selector, 
 }
 
 function* selectNodeInIframe2(selector, inspector) {
   let iframe1 = yield getNodeFront("iframe", inspector);
   let iframe2 = yield getNodeFrontInFrame("iframe", iframe1, inspector);
   let node = yield getNodeFrontInFrame(selector, iframe2, inspector);
   yield selectNode(node, inspector);
 }
+
+function* setStyleInIframe1(testActor, selector, propertyName, value) {
+  yield testActor.eval(`
+    content.document.querySelector("iframe")
+           .contentDocument.querySelector("${selector}")
+           .style.${propertyName} = "${value}";
+  `);
+}
+
+function* setStyleInIframe2(testActor, selector, propertyName, value) {
+  yield testActor.eval(`
+    content.document.querySelector("iframe")
+           .contentDocument
+           .querySelector("iframe")
+           .contentDocument.querySelector("${selector}")
+           .style.${propertyName} = "${value}";
+  `);
+}
+
+function* removeIframe2(testActor) {
+  yield testActor.eval(`
+    content.document.querySelector("iframe")
+           .contentDocument
+           .querySelector("iframe")
+           .remove();
+  `);
+}

--- a/devtools/client/inspector/layout/test/head.js
+++ b/devtools/client/inspector/layout/test/head.js
@@ -1,11 +1,14 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+/* import-globals-from ../../../framework/test/shared-head.js */
+/* import-globals-from ../../test/head.js */
 "use strict";
 
 // Import the inspector's head.js first (which itself imports shared-head.js).
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
   this);
 
 Services.prefs.setIntPref("devtools.toolbox.footer.height", 350);
@@ -51,17 +54,17 @@ function selectAndHighlightNode(nodeOrSe
  * @return a promise that resolves when the inspector is ready and the layout
  * view is visible and ready
  */
 function openLayoutView() {
   return openInspectorSidebarTab("layoutview").then(data => {
     // The actual highligher show/hide methods are mocked in layoutview tests.
     // The highlighter is tested in devtools/inspector/test.
     function mockHighlighter({highlighter}) {
-      highlighter.showBoxModel = function(nodeFront) {
+      highlighter.showBoxModel = function() {
         return promise.resolve();
       };
       highlighter.hideBoxModel = function() {
         return promise.resolve();
       };
     }
     mockHighlighter(data.toolbox);
 
@@ -76,8 +79,22 @@ function openLayoutView() {
 
 /**
  * Wait for the layoutview-updated event.
  * @return a promise
  */
 function waitForUpdate(inspector) {
   return inspector.once("layoutview-updated");
 }
+
+function getStyle(testActor, selector, propertyName) {
+  return testActor.eval(`
+    content.document.querySelector("${selector}")
+                    .style.getPropertyValue("${propertyName}");
+  `);
+}
+
+function setStyle(testActor, selector, propertyName, value) {
+  return testActor.eval(`
+    content.document.querySelector("${selector}")
+                    .style.${propertyName} = "${value}";
+  `);
+}