Merge m-c to inbound. a=merge

CLOSED TREE

--HG--
extra : amend_source : e1e38af923a22bd1272c4bd1a0be6ff4782dd9b1

b2g/config/aries/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="e862ab9177af664f00b4522e2350f4cb13866d73">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/dolphin/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="e862ab9177af664f00b4522e2350f4cb13866d73">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/emulator-ics/sources.xml

@@ -19,7 +19,7 @@
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
   <project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
-  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="platform_hardware_ril" path="hardware/ril" remote="b2g" revision="2d58f4b9206b50b8fda0d5036da6f0c62608db7c"/>

b2g/config/emulator-jb/sources.xml

@@ -17,7 +17,7 @@
   </project>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="moztt" path="external/moztt" remote="b2g" revision="657894b4a1dc0a926117f4812e0940229f9f676f"/>
   <project name="apitrace" path="external/apitrace" remote="apitrace" revision="36b945cb98a4e9009d57b8c20a720fc1a5905452"/>

b2g/config/emulator-kk/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="e862ab9177af664f00b4522e2350f4cb13866d73">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/emulator-l/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="05a36844c1046a1eb07d5b1325f85ed741f961ea">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/emulator/sources.xml

@@ -19,7 +19,7 @@
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
   <project name="fake-dalvik" path="dalvik" remote="b2g" revision="ca1f327d5acc198bb4be62fa51db2c039032c9ce"/>
-  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia.git" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="platform_hardware_ril" path="hardware/ril" remote="b2g" revision="2d58f4b9206b50b8fda0d5036da6f0c62608db7c"/>

b2g/config/flame-kk/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="e862ab9177af664f00b4522e2350f4cb13866d73">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

b2g/config/gaia.json

@@ -1,9 +1,9 @@
 {
     "git": {
-        "git_revision": "9a8880a95ee4a4aea7895d4e2bcab31bc49ea281", 
+        "git_revision": "2d7f369fd923b6df3b00d76844c413c1202c04ba", 
         "remote": "https://git.mozilla.org/releases/gaia.git", 
         "branch": ""
     }, 
-    "revision": "aa0cf409f343d966a552839ab5d3bc85d1ebdda9", 
+    "revision": "5c86f4cf87b91d2bfe9a3e49aa8706b452e4f97e", 
     "repo_path": "integration/gaia-central"
 }

b2g/config/nexus-4/sources.xml

@@ -17,7 +17,7 @@
   </project>
   <project name="rilproxy" path="rilproxy" remote="b2g" revision="5ef30994f4778b4052e58a4383dbe7890048c87e"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="moztt" path="external/moztt" remote="b2g" revision="657894b4a1dc0a926117f4812e0940229f9f676f"/>
   <project name="apitrace" path="external/apitrace" remote="apitrace" revision="36b945cb98a4e9009d57b8c20a720fc1a5905452"/>

b2g/config/nexus-5-l/sources.xml

@@ -15,7 +15,7 @@
   <project name="platform_build" path="build" remote="b2g" revision="05a36844c1046a1eb07d5b1325f85ed741f961ea">
     <copyfile dest="Makefile" src="core/root.mk"/>
   </project>
-  <project name="gaia" path="gaia" remote="mozillaorg" revision="9a8880a95ee4a4aea7895d4e2bcab31bc49ea281"/>
+  <project name="gaia" path="gaia" remote="mozillaorg" revision="2d7f369fd923b6df3b00d76844c413c1202c04ba"/>
   <project name="fake-libdvm" path="dalvik" remote="b2g" revision="d50ae982b19f42f0b66d08b9eb306be81687869f"/>
   <project name="gonk-misc" path="gonk-misc" remote="b2g" revision="62cfa11ae7d77f6330de019a5aa79607e35be7d1"/>
   <project name="librecovery" path="librecovery" remote="b2g" revision="1b3591a50ed352fc6ddb77462b7b35d0bfa555a3"/>

browser/base/content/test/general/browser.ini

@@ -357,6 +357,7 @@ skip-if = buildapp == 'mulet' || e10s # Bug 1101973 - breaks the next test in e1
 skip-if = buildapp == 'mulet'
 [browser_private_no_prompt.js]
 skip-if = buildapp == 'mulet'
+[browser_purgehistory_clears_sh.js]
 [browser_PageMetaData_pushstate.js]
 [browser_relatedTabs.js]
 [browser_remoteTroubleshoot.js]

browser/base/content/test/general/browser_purgehistory_clears_sh.js

@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const url = "http://example.org/browser/browser/base/content/test/general/dummy_page.html";
+
+add_task(function* purgeHistoryTest() {
+  let tab = yield BrowserTestUtils.withNewTab({
+    gBrowser,
+    url,
+  }, function* purgeHistoryTestInner(browser) {
+    let backButton = browser.ownerDocument.getElementById("Browser:Back");
+    let forwardButton = browser.ownerDocument.getElementById("Browser:Forward");
+
+    ok(!browser.webNavigation.canGoBack,
+       "Initial value for webNavigation.canGoBack");
+    ok(!browser.webNavigation.canGoForward,
+       "Initial value for webNavigation.canGoBack");
+    ok(backButton.hasAttribute("disabled"), "Back button is disabled");
+    ok(forwardButton.hasAttribute("disabled"), "Forward button is disabled");
+
+    let pushState = ContentTask.spawn(browser, null, function*() {
+      let startHistory = content.history.length;
+      content.history.pushState({}, "");
+      content.history.pushState({}, "");
+      content.history.back();
+      let newHistory = content.history.length;
+      return [startHistory, newHistory];
+    });
+
+    let [startHistory, newHistory] = yield pushState;
+
+    is(startHistory, 1, "Initial SHistory size");
+    is(newHistory, 3, "New SHistory size");
+
+    ok(browser.webNavigation.canGoBack, true,
+       "New value for webNavigation.canGoBack");
+    ok(browser.webNavigation.canGoForward, true,
+       "New value for webNavigation.canGoForward");
+    ok(!backButton.hasAttribute("disabled"), "Back button was enabled");
+    ok(!forwardButton.hasAttribute("disabled"), "Forward button was enabled");
+
+
+    let tmp = {};
+    Cc["@mozilla.org/moz/jssubscript-loader;1"]
+      .getService(Ci.mozIJSSubScriptLoader)
+      .loadSubScript("chrome://browser/content/sanitize.js", tmp);
+
+    let {Sanitizer} = tmp;
+    let sanitizer = new Sanitizer();
+
+    yield sanitizer.sanitize(["history"]);
+
+    let historyAfterPurge = yield ContentTask.spawn(browser, null, function*() {
+      return content.history.length;
+    });
+
+    is(historyAfterPurge, 1, "SHistory correctly cleared");
+
+    ok(!browser.webNavigation.canGoBack,
+       "webNavigation.canGoBack correctly cleared");
+    ok(!browser.webNavigation.canGoForward,
+       "webNavigation.canGoForward correctly cleared");
+    ok(backButton.hasAttribute("disabled"), "Back button was disabled");
+    ok(forwardButton.hasAttribute("disabled"), "Forward button was disabled");
+  });
+});

browser/components/loop/content/css/contacts.css

@@ -2,6 +2,11 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+html {
+  font-size: 10px;
+  font-family: sans-serif; /* XXX will be changed to a system font in bug 1191398 */
+}
+
 .contact-import-spinner {
   display: none;
 }
@@ -281,8 +286,26 @@ html[dir="rtl"] .contact > .dropdown-menu {
   top: auto;
 }
 
-.contact-form > .button-group {
-  margin-top: 1rem;
+.contact-form {
+  padding: 14px; /* Override based on spacing in Mockup */
+}
+/* This will effect the header displayed at the top of the contact details form
+ */
+.contact-form header {
+  text-align: center;
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: #4a4a4a;
+}
+
+.contact-form .form-content-container {
+  height: 24.1rem; /* This height is needed to keep the panel height at 400px and
+                      the bottom elements at the bottom of the panel
+                      Can likely go away if we switched this pane to flexbox model */
+  padding-top: 4px; /* Based on spacing in Mockup
+                    replaced margin-top
+                    See http://stackoverflow.com/questions/6204670/css-clean-solution-to-the-margin-collapse-issue-when-floating-an-element
+                    */
 }
 
 .contacts-gravatar-promo {

browser/components/loop/content/css/panel.css

@@ -15,6 +15,8 @@ body {
 .panel {
   /* hide the extra margin space that the panel resizer now wants to show */
   overflow: hidden;
+  font: menu;
+  background-color: #fbfbfb;
 }
 
 /* Notifications displayed over tabs */
@@ -83,8 +85,6 @@ body {
 
 .tab-view > li {
   display: inline-block;
-  vertical-align: middle;
-  line-height: 1.2rem;
   text-align: center;
   padding: 0;
   cursor: pointer;
@@ -252,20 +252,26 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
   display: block;
   width: 100%;
   outline: none;
-  border-radius: 2px;
-  margin: 5px 0;
-  border: 1px solid #ccc;
-  height: 24px;
-  padding: 0 10px;
-}
-
-.content-area input:invalid {
+  border-radius: 4px;
+  margin: 10px 0;
+  border: 1px solid #c3c3c3;
+  height: 2.6rem;
+  padding: 0 6px;
+  font-size: 1.1rem;
+  color: #4a4a4a;
   box-shadow: none;
 }
 
+.content-area input::-moz-placeholder {
+  color: #999;
+}
+
 .content-area input:not(.pristine):invalid {
-  border-color: #d74345;
-  box-shadow: 0 0 4px #c43c3e;
+  border: 0.1rem solid #d13f1a;
+}
+
+.content-area input:focus {
+  border: 0.1rem solid #5cccee;
 }
 
 /* Rooms */
@@ -475,11 +481,17 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
   display: flex;
   flex-direction: row;
   width: 100%;
+  padding-top: 6px;
 }
 
 .button-group > .button {
   flex: 1;
-  margin: 0 7px;
+  margin: 0 5px;
+  min-height: 3rem;
+  font-size: 1.2rem;
+  line-height: 1rem;
+  font-weight: 300;
+  border-radius: 4px;
 }
 
 .button-group > .button:first-child {
@@ -494,11 +506,11 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
   padding: 2px 5px;
   background-color: #fbfbfb;
   color: #333;
-  border: 1px solid #c1c1c1;
   border-radius: 2px;
   min-height: 26px;
   font-size: 1.2rem;
   line-height: 1.2rem;
+  border: none;
 }
 
 .button:hover {
@@ -507,27 +519,39 @@ html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
 
 .button:hover:active {
   background-color: #ccc;
-  color: #111;
+  color: #fff;
 }
 
 .button.button-accept {
-  background-color: #5bc0a4;
-  border-color: #5bc0a4;
-  color: #fff;
-}
-
-.button.button-accept:hover {
-  background-color: #47b396;
-  border-color: #47b396;
+  background-color: #00a9dc;
   color: #fff;
 }
 
+.button.button-accept:hover,
 .button.button-accept:hover:active {
-  background-color: #3aa689;
-  border-color: #3aa689;
+  background-color: #5cccee;
   color: #fff;
 }
 
+.button.button-cancel {
+  background-color: #ebebeb;
+  border: 0;
+  color: #000;
+  width: 105px; /* based on fixed width of Cancel button from mockup */
+  flex: 0 0 auto;
+}
+
+.button.button-cancel:hover,
+.button.button-cancel:hover:active {
+  background-color: #dcd6d6;
+  color: #000;
+}
+
+.button.button-cancel:disabled {
+  background-color: #ebebeb;
+  color: #c3c3c3;
+}
+
 .button-close {
   background-color: transparent;
   background-image: url(../shared/img/icons-10x10.svg#close);

browser/components/loop/content/js/contacts.js

@@ -740,31 +740,40 @@ loop.contacts = (function(_, mozL10n) {
     render: function() {
       let cx = React.addons.classSet;
       let phoneOrEmailRequired = !this.state.email && !this.state.tel;
+      let contactFormMode = "contact-form-mode-" + this.props.mode;
+      let contentAreaClassesLiteral = {
+        "content-area": true,
+        "contact-form": true
+      };
+      contentAreaClassesLiteral[contactFormMode] = true;
+      let contentAreaClasses = cx(contentAreaClassesLiteral);
 
       return (
-        React.createElement("div", {className: "content-area contact-form"}, 
+        React.createElement("div", {className: contentAreaClasses}, 
           React.createElement("header", null, this.props.mode == "add"
-                   ? mozL10n.get("add_contact_button")
+                   ? mozL10n.get("add_contact_title")
                    : mozL10n.get("edit_contact_title")), 
-          React.createElement("label", null, mozL10n.get("edit_contact_name_label")), 
-          React.createElement("input", {className: cx({pristine: this.state.pristine}), 
-                 pattern: "\\s*\\S.*", 
-                 ref: "name", 
-                 required: true, 
-                 type: "text", 
-                 valueLink: this.linkState("name")}), 
-          React.createElement("label", null, mozL10n.get("edit_contact_email_label")), 
-          React.createElement("input", {className: cx({pristine: this.state.pristine}), 
-                 ref: "email", 
-                 required: phoneOrEmailRequired, 
-                 type: "email", 
-                 valueLink: this.linkState("email")}), 
-          React.createElement("label", null, mozL10n.get("new_contact_fxos_phone_placeholder")), 
-          React.createElement("input", {className: cx({pristine: this.state.pristine}), 
-                 ref: "tel", 
-                 required: phoneOrEmailRequired, 
-                 type: "tel", 
-                 valueLink: this.linkState("tel")}), 
+          React.createElement("div", {className: cx({"form-content-container": true})}, 
+            React.createElement("input", {className: cx({pristine: this.state.pristine}), 
+                   pattern: "\\s*\\S.*", 
+                   placeholder: mozL10n.get("contact_form_name_placeholder"), 
+                   ref: "name", 
+                   required: true, 
+                   type: "text", 
+                   valueLink: this.linkState("name")}), 
+            React.createElement("input", {className: cx({pristine: this.state.pristine}), 
+                   placeholder: mozL10n.get("contact_form_email_placeholder"), 
+                   ref: "email", 
+                   required: phoneOrEmailRequired, 
+                   type: "email", 
+                   valueLink: this.linkState("email")}), 
+            React.createElement("input", {className: cx({pristine: this.state.pristine}), 
+                   placeholder: mozL10n.get("contact_form_fxos_phone_placeholder"), 
+                   ref: "tel", 
+                   required: phoneOrEmailRequired, 
+                   type: "tel", 
+                   valueLink: this.linkState("tel")})
+          ), 
           React.createElement(ButtonGroup, null, 
             React.createElement(Button, {additionalClass: "button-cancel", 
                     caption: mozL10n.get("cancel_button"), 

browser/components/loop/content/js/contacts.jsx

@@ -740,31 +740,40 @@ loop.contacts = (function(_, mozL10n) {
     render: function() {
       let cx = React.addons.classSet;
       let phoneOrEmailRequired = !this.state.email && !this.state.tel;
+      let contactFormMode = "contact-form-mode-" + this.props.mode;
+      let contentAreaClassesLiteral = {
+        "content-area": true,
+        "contact-form": true
+      };
+      contentAreaClassesLiteral[contactFormMode] = true;
+      let contentAreaClasses = cx(contentAreaClassesLiteral);
 
       return (
-        <div className="content-area contact-form">
+        <div className={contentAreaClasses}>
           <header>{this.props.mode == "add"
-                   ? mozL10n.get("add_contact_button")
+                   ? mozL10n.get("add_contact_title")
                    : mozL10n.get("edit_contact_title")}</header>
-          <label>{mozL10n.get("edit_contact_name_label")}</label>
-          <input className={cx({pristine: this.state.pristine})}
-                 pattern="\s*\S.*"
-                 ref="name"
-                 required
-                 type="text"
-                 valueLink={this.linkState("name")} />
-          <label>{mozL10n.get("edit_contact_email_label")}</label>
-          <input className={cx({pristine: this.state.pristine})}
-                 ref="email"
-                 required={phoneOrEmailRequired}
-                 type="email"
-                 valueLink={this.linkState("email")} />
-          <label>{mozL10n.get("new_contact_fxos_phone_placeholder")}</label>
-          <input className={cx({pristine: this.state.pristine})}
-                 ref="tel"
-                 required={phoneOrEmailRequired}
-                 type="tel"
-                 valueLink={this.linkState("tel")} />
+          <div className={cx({"form-content-container": true})}>
+            <input className={cx({pristine: this.state.pristine})}
+                   pattern="\s*\S.*"
+                   placeholder={mozL10n.get("contact_form_name_placeholder")}
+                   ref="name"
+                   required
+                   type="text"
+                   valueLink={this.linkState("name")} />
+            <input className={cx({pristine: this.state.pristine})}
+                   placeholder={mozL10n.get("contact_form_email_placeholder")}
+                   ref="email"
+                   required={phoneOrEmailRequired}
+                   type="email"
+                   valueLink={this.linkState("email")} />
+            <input className={cx({pristine: this.state.pristine})}
+                   placeholder={mozL10n.get("contact_form_fxos_phone_placeholder")}
+                   ref="tel"
+                   required={phoneOrEmailRequired}
+                   type="tel"
+                   valueLink={this.linkState("tel")} />
+          </div>
           <ButtonGroup>
             <Button additionalClass="button-cancel"
                     caption={mozL10n.get("cancel_button")}

browser/components/loop/test/desktop-local/contacts_test.js

@@ -8,7 +8,8 @@ describe("loop.contacts", function() {
   var expect = chai.expect;
   var TestUtils = React.addons.TestUtils;
 
-  var fakeAddContactButtonText = "Fake Add Contact";
+  var fakeAddContactButtonText = "Fake Add Contact Button";
+  var fakeAddContactTitleText = "Fake Add Contact Title";
   var fakeEditContactButtonText = "Fake Edit Contact";
   var fakeDoneButtonText = "Fake Done";
   // The fake contacts array is copied each time mozLoop.contacts.getAll() is called.
@@ -86,7 +87,9 @@ describe("loop.contacts", function() {
     navigator.mozLoop = {
       getStrings: function(entityName) {
         var textContentValue = "fakeText";
-        if (entityName == "add_contact_button") {
+        if (entityName == "add_contact_title") {
+          textContentValue = fakeAddContactTitleText;
+        } else if (entityName == "add_contact_button") {
           textContentValue = fakeAddContactButtonText;
         } else if (entityName == "edit_contact_title") {
           textContentValue = fakeEditContactButtonText;
@@ -400,7 +403,7 @@ describe("loop.contacts", function() {
 
           var header = view.getDOMNode().querySelector("header");
           expect(header).to.not.equal(null);
-          expect(header.textContent).to.eql(fakeAddContactButtonText);
+          expect(header.textContent).to.eql(fakeAddContactTitleText);
         });
 
         it("should render name input", function() {

browser/components/loop/ui/ui-showcase.js

@@ -18,6 +18,7 @@
   var AvailabilityDropdown = loop.panel.AvailabilityDropdown;
   var PanelView = loop.panel.PanelView;
   var SignInRequestView = loop.panel.SignInRequestView;
+  var ContactDetailsForm = loop.contacts.ContactDetailsForm;
   var ContactDropdown = loop.contacts.ContactDropdown;
   var ContactDetail = loop.contacts.ContactDetail;
   // 1.2. Conversation Window
@@ -787,6 +788,18 @@
                          notifications: new loop.shared.models.NotificationCollection([{level: "error", message: "Import error"}]), 
                          roomStore: roomStore, 
                          selectedTab: "contacts"})
+            ), 
+            React.createElement(FramedExample, {cssClass: "fx-embedded-panel", dashed: true, height: 400, 
+                           summary: "Contact Form - Add", width: 332}, 
+              React.createElement("div", {className: "panel"}, 
+                React.createElement(PanelView, {client: mockClient, 
+                           dispatcher: dispatcher, 
+                           mozLoop: mockMozLoopLoggedIn, 
+                           notifications: notifications, 
+                           roomStore: roomStore, 
+                           selectedTab: "contacts_add", 
+                           userProfile: {email: "test@example.com"}})
+              )
             )
           ), 
 

browser/components/loop/ui/ui-showcase.jsx

@@ -18,6 +18,7 @@
   var AvailabilityDropdown = loop.panel.AvailabilityDropdown;
   var PanelView = loop.panel.PanelView;
   var SignInRequestView = loop.panel.SignInRequestView;
+  var ContactDetailsForm = loop.contacts.ContactDetailsForm;
   var ContactDropdown = loop.contacts.ContactDropdown;
   var ContactDetail = loop.contacts.ContactDetail;
   // 1.2. Conversation Window
@@ -788,6 +789,18 @@
                          roomStore={roomStore}
                          selectedTab="contacts" />
             </Example>
+            <FramedExample cssClass="fx-embedded-panel" dashed={true} height={400}
+                           summary="Contact Form - Add" width={332}>
+              <div className="panel">
+                <PanelView client={mockClient}
+                           dispatcher={dispatcher}
+                           mozLoop={mockMozLoopLoggedIn}
+                           notifications={notifications}
+                           roomStore={roomStore}
+                           selectedTab="contacts_add"
+                           userProfile={{email: "test@example.com"}} />
+              </div>
+            </FramedExample>
           </Section>
 
           <Section name="Availability Dropdown">

browser/components/sessionstore/SessionStorage.jsm

@@ -9,6 +9,7 @@ this.EXPORTED_SYMBOLS = ["SessionStorage"];
 const Cu = Components.utils;
 const Ci = Components.interfaces;
 
+Cu.import("resource://gre/modules/BrowserUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
@@ -72,9 +73,9 @@ let SessionStorageInternal = {
         return;
       }
 
-      // Get the root domain of the current history entry
-      // and use that as a key for the per-host storage data.
-      let origin = principal.jarPrefix + principal.originNoSuffix;
+      // Get the origin of the current history entry
+      // and use that as a key for the per-principal storage data.
+      let origin = principal.origin;
       if (visitedOrigins.has(origin)) {
         // Don't read a host twice.
         return;
@@ -102,10 +103,9 @@ let SessionStorageInternal = {
    *        {"example.com": {"key": "value", "my_number": 123}}
    */
   restore: function (aDocShell, aStorageData) {
-    for (let host of Object.keys(aStorageData)) {
-      let data = aStorageData[host];
-      let uri = Services.io.newURI(host, null, null);
-      let principal = Services.scriptSecurityManager.getDocShellCodebasePrincipal(uri, aDocShell);
+    for (let origin of Object.keys(aStorageData)) {
+      let data = aStorageData[origin];
+      let principal = BrowserUtils.principalFromOrigin(origin);
       let storageManager = aDocShell.QueryInterface(Ci.nsIDOMStorageManager);
       let window = aDocShell.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindow);
 

browser/devtools/animationinspector/test/browser_animation_target_highlight_select.js

@@ -19,19 +19,14 @@ add_task(function*() {
 
 function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
   info("Select the simple animated node");
-  yield selectNode(".animated", inspector);
 
-  // Make sure to wait for the target-retrieved event if the nodeFront hasn't
-  // yet been retrieved by the TargetNodeComponent.
-  let targetNodeComponent;
-  if (isNewUI) {
-    targetNodeComponent = panel.animationsTimelineComponent.targetNodes[0];
-  } else {
-    targetNodeComponent = panel.playerWidgets[0].targetNodeComponent;
-  }
-  if (!targetNodeComponent.nodeFront) {
-    yield targetNodeComponent.once("target-retrieved");
-  }
+  let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
+  yield selectNode(".animated", inspector);
+  yield onPanelUpdated;
+
+  let targets = yield waitForAllAnimationTargets(panel);
+  // Arbitrary select the first one
+  let targetNodeComponent = targets[0];
 
   info("Retrieve the part of the widget that highlights the node on hover");
   let highlightingEl = targetNodeComponent.previewEl;
@@ -42,6 +37,12 @@ function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
                              highlightingEl.ownerDocument.defaultView);
   let nodeFront = yield onHighlight;
 
+  // Do not forget to mouseout, otherwise we get random mouseover event
+  // when selecting another node, which triggers some requests in animation
+  // inspector
+  EventUtils.synthesizeMouse(highlightingEl, 10, 5, {type: "mouseout"},
+                             highlightingEl.ownerDocument.defaultView);
+
   ok(true, "The node-highlight event was fired");
   is(targetNodeComponent.nodeFront, nodeFront,
     "The highlighted node is the one stored on the animation widget");
@@ -53,23 +54,17 @@ function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
     "The highlighted node has the correct class");
 
   info("Select the body node in order to have the list of all animations");
+  onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
   yield selectNode("body", inspector);
+  yield onPanelUpdated;
 
-  // Make sure to wait for the target-retrieved event if the nodeFront hasn't
-  // yet been retrieved by the TargetNodeComponent.
-  if (isNewUI) {
-    targetNodeComponent = panel.animationsTimelineComponent.targetNodes[0];
-  } else {
-    targetNodeComponent = panel.playerWidgets[0].targetNodeComponent;
-  }
-  if (!targetNodeComponent.nodeFront) {
-    yield targetNodeComponent.once("target-retrieved");
-  }
+  targets = yield waitForAllAnimationTargets(panel);
+  targetNodeComponent = targets[0];
 
   info("Click on the first animation widget's selector icon and wait for the " +
     "selection to change");
   let onSelection = inspector.selection.once("new-node-front");
-  let onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
+  onPanelUpdated = panel.once(panel.UI_UPDATED_EVENT);
   let selectIconEl = targetNodeComponent.selectNodeEl;
   EventUtils.sendMouseEvent({type: "click"}, selectIconEl,
                             selectIconEl.ownerDocument.defaultView);
@@ -79,4 +74,6 @@ function* testTargetNode({toolbox, inspector, panel}, isNewUI) {
     "The selected node is the one stored on the animation widget");
 
   yield onPanelUpdated;
+
+  yield waitForAllAnimationTargets(panel);
 }

browser/devtools/animationinspector/test/head.js

@@ -462,3 +462,26 @@ let getAnimationPlayerState = Task.async(function*(selector, animationIndex=0) {
 function isNodeVisible(node) {
   return !!node.getClientRects().length;
 }
+
+/**
+ * Wait for all AnimationTargetNode instances to be fully loaded
+ * (fetched their related actor and rendered), and return them.
+ * @param {AnimationsPanel} panel
+ * @return {Array} all AnimationTargetNode instances
+ */
+let waitForAllAnimationTargets = Task.async(function*(panel) {
+  let targets = [];
+  if (panel.animationsTimelineComponent) {
+    targets = targets.concat(panel.animationsTimelineComponent.targetNodes);
+  }
+  if (panel.playerWidgets) {
+    targets = targets.concat(panel.playerWidgets.map(w => w.targetNodeComponent));
+  }
+  yield promise.all(targets.map(t => {
+    if (!t.nodeFront) {
+      return t.once("target-retrieved");
+    }
+    return false;
+  }));
+  return targets;
+});

browser/devtools/framework/toolbox.js

@@ -1743,52 +1743,52 @@ Toolbox.prototype = {
    * Returns a promise that resolves when the fronts are destroyed
    */
   destroyInspector: function() {
-    if (this._destroying) {
-      return this._destroying;
+    if (this._destroyingInspector) {
+      return this._destroyingInspector;
     }
 
-    if (!this._inspector) {
-      return promise.resolve();
-    }
+    return this._destroyingInspector = Task.spawn(function*() {
+      if (!this._inspector) {
+        return;
+      }
 
-    let outstanding = () => {
-      return Task.spawn(function*() {
-        yield this.highlighterUtils.stopPicker();
-        yield this._inspector.destroy();
-        if (this._highlighter) {
-          // Note that if the toolbox is closed, this will work fine, but will fail
-          // in case the browser is closed and will trigger a noSuchActor message.
-          // We ignore the promise that |_hideBoxModel| returns, since we should still
-          // proceed with the rest of destruction if it fails.
-          // FF42+ now does the cleanup from the actor.
-          if (!this.highlighter.traits.autoHideOnDestroy) {
-            this.highlighterUtils.unhighlight();
-          }
-          yield this._highlighter.destroy();
-        }
-        if (this._selection) {
-          this._selection.destroy();
+      // Releasing the walker (if it has been created)
+      // This can fail, but in any case, we want to continue destroying the
+      // inspector/highlighter/selection
+      // FF42+: Inspector actor starts managing Walker actor and auto destroy it.
+      if (this._walker && !this.walker.traits.autoReleased) {
+        try {
+          yield this._walker.release();
+        } catch(e) {}
+      }
+
+      yield this.highlighterUtils.stopPicker();
+      yield this._inspector.destroy();
+      if (this._highlighter) {
+        // Note that if the toolbox is closed, this will work fine, but will fail
+        // in case the browser is closed and will trigger a noSuchActor message.
+        // We ignore the promise that |_hideBoxModel| returns, since we should still
+        // proceed with the rest of destruction if it fails.
+        // FF42+ now does the cleanup from the actor.
+        if (!this.highlighter.traits.autoHideOnDestroy) {
+          this.highlighterUtils.unhighlight();
         }
+        yield this._highlighter.destroy();
+      }
+      if (this._selection) {
+        this._selection.destroy();
+      }
 
-        if (this.walker) {
-          this.walker.off("highlighter-ready", this._highlighterReady);
-          this.walker.off("highlighter-hide", this._highlighterHidden);
-        }
+      if (this.walker) {
+        this.walker.off("highlighter-ready", this._highlighterReady);
+        this.walker.off("highlighter-hide", this._highlighterHidden);
+      }
 
-        this._inspector = null;
-        this._highlighter = null;
-        this._selection = null;
-        this._walker = null;
-      }.bind(this));
-    };
-
-    // Releasing the walker (if it has been created)
-    // This can fail, but in any case, we want to continue destroying the
-    // inspector/highlighter/selection
-    let walker = (this._destroying = this._walker) ?
-                 this._walker.release() :
-                 promise.resolve();
-    return walker.then(outstanding, outstanding);
+      this._inspector = null;
+      this._highlighter = null;
+      this._selection = null;
+      this._walker = null;
+    }.bind(this));
   },
 
   /**

browser/devtools/styleinspector/computed-view.js

@@ -19,8 +19,10 @@ const {OutputParser} = require("devtools/output-parser");
 const {PrefObserver, PREF_ORIG_SOURCES} = require("devtools/styleeditor/utils");
 const {gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
 
-loader.lazyRequireGetter(this, "overlays", "devtools/styleinspector/style-inspector-overlays");
-loader.lazyRequireGetter(this, "StyleInspectorMenu", "devtools/styleinspector/style-inspector-menu");
+loader.lazyRequireGetter(this, "overlays",
+  "devtools/styleinspector/style-inspector-overlays");
+loader.lazyRequireGetter(this, "StyleInspectorMenu",
+  "devtools/styleinspector/style-inspector-menu");
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@@ -35,11 +37,11 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
  * Helper for long-running processes that should yield occasionally to
  * the mainloop.
  *
- * @param {Window} aWin
+ * @param {Window} win
  *        Timeouts will be set on this window when appropriate.
- * @param {Generator} aGenerator
+ * @param {Generator} generator
  *        Will iterate this generator.
- * @param {object} aOptions
+ * @param {Object} options
  *        Options for the update process:
  *          onItem {function} Will be called with the value of each iteration.
  *          onBatch {function} Will be called after each batch of iterations,
@@ -47,17 +49,15 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
  *          onDone {function} Will be called when iteration is complete.
  *          onCancel {function} Will be called if the process is canceled.
  *          threshold {int} How long to process before yielding, in ms.
- *
- * @constructor
  */
-function UpdateProcess(aWin, aGenerator, aOptions) {
-  this.win = aWin;
-  this.iter = _Iterator(aGenerator);
-  this.onItem = aOptions.onItem || function() {};
-  this.onBatch = aOptions.onBatch || function() {};
-  this.onDone = aOptions.onDone || function() {};
-  this.onCancel = aOptions.onCancel || function() {};
-  this.threshold = aOptions.threshold || 45;
+function UpdateProcess(win, generator, options) {
+  this.win = win;
+  this.iter = _Iterator(generator);
+  this.onItem = options.onItem || function() {};
+  this.onBatch = options.onBatch || function() {};
+  this.onDone = options.onDone || function() {};
+  this.onCancel = options.onCancel || function() {};
+  this.threshold = options.threshold || 45;
 
   this.canceled = false;
 }
@@ -121,13 +121,13 @@ UpdateProcess.prototype = {
  * sorted by style. There should be one instance of CssComputedView
  * per style display (of which there will generally only be one).
  *
- * @param {Inspector} inspector toolbox panel
- * @param {Document} document The document that will contain the computed view.
+ * @param {Inspector} inspector
+ *        Inspector toolbox panel
+ * @param {Document} document
+ *        The document that will contain the computed view.
  * @param {PageStyleFront} pageStyle
  *        Front for the page style actor that will be providing
  *        the style information.
- *
- * @constructor
  */
 function CssComputedView(inspector, document, pageStyle) {
   this.inspector = inspector;
@@ -153,14 +153,16 @@ function CssComputedView(inspector, document, pageStyle) {
   this._onFilterKeyPress = this._onFilterKeyPress.bind(this);
   this._onClearSearch = this._onClearSearch.bind(this);
   this._onIncludeBrowserStyles = this._onIncludeBrowserStyles.bind(this);
-  this._onFilterTextboxContextMenu = this._onFilterTextboxContextMenu.bind(this);
+  this._onFilterTextboxContextMenu =
+    this._onFilterTextboxContextMenu.bind(this);
 
   let doc = this.styleDocument;
   this.root = doc.getElementById("root");
   this.element = doc.getElementById("propertyContainer");
   this.searchField = doc.getElementById("computedview-searchbox");
   this.searchClearButton = doc.getElementById("computedview-searchinput-clear");
-  this.includeBrowserStylesCheckbox = doc.getElementById("browser-style-checkbox");
+  this.includeBrowserStylesCheckbox =
+    doc.getElementById("browser-style-checkbox");
 
   this.styleDocument.addEventListener("keypress", this._onKeypress);
   this.styleDocument.addEventListener("mousedown", this.focusWindow);
@@ -169,7 +171,8 @@ function CssComputedView(inspector, document, pageStyle) {
   this.element.addEventListener("contextmenu", this._onContextMenu);
   this.searchField.addEventListener("input", this._onFilterStyles);
   this.searchField.addEventListener("keypress", this._onFilterKeyPress);
-  this.searchField.addEventListener("contextmenu", this._onFilterTextboxContextMenu);
+  this.searchField.addEventListener("contextmenu",
+                                    this._onFilterTextboxContextMenu);
   this.searchClearButton.addEventListener("click", this._onClearSearch);
   this.includeBrowserStylesCheckbox.addEventListener("command",
     this._onIncludeBrowserStyles);
@@ -205,15 +208,17 @@ function CssComputedView(inspector, document, pageStyle) {
 
 /**
  * Memoized lookup of a l10n string from a string bundle.
- * @param {string} aName The key to lookup.
- * @returns A localized version of the given key.
+ *
+ * @param {String} name
+ *        The key to lookup.
+ * @returns {String} localized version of the given key.
  */
-CssComputedView.l10n = function(aName) {
+CssComputedView.l10n = function(name) {
   try {
-    return CssComputedView._strings.GetStringFromName(aName);
+    return CssComputedView._strings.GetStringFromName(name);
   } catch (ex) {
-    Services.console.logStringMessage("Error reading '" + aName + "'");
-    throw new Error("l10n error with " + aName);
+    Services.console.logStringMessage("Error reading '" + name + "'");
+    throw new Error("l10n error with " + name);
   }
 };
 
@@ -252,8 +257,8 @@ CssComputedView.prototype = {
   },
 
   _handlePrefChange: function(event, data) {
-    if (this._computed && (data.pref == "devtools.defaultColorUnit" ||
-        data.pref == PREF_ORIG_SOURCES)) {
+    if (this._computed && (data.pref === "devtools.defaultColorUnit" ||
+        data.pref === PREF_ORIG_SOURCES)) {
       this.refreshPanel();
     }
   },
@@ -262,11 +267,12 @@ CssComputedView.prototype = {
    * Update the view with a new selected element. The CssComputedView panel
    * will show the style information for the given element.
    *
-   * @param {NodeFront} aElement The highlighted node to get styles for.
+   * @param {NodeFront} element
+   *        The highlighted node to get styles for.
    * @returns a promise that will be resolved when highlighting is complete.
    */
-  selectElement: function(aElement) {
-    if (!aElement) {
+  selectElement: function(element) {
+    if (!element) {
       this.viewedElement = null;
       this.noResults.hidden = false;
 
@@ -280,11 +286,11 @@ CssComputedView.prototype = {
       return promise.resolve(undefined);
     }
 
-    if (aElement === this.viewedElement) {
+    if (element === this.viewedElement) {
       return promise.resolve(undefined);
     }
 
-    this.viewedElement = aElement;
+    this.viewedElement = element;
     this.refreshSourceFilter();
 
     return this.refreshPanel();
@@ -292,7 +298,9 @@ CssComputedView.prototype = {
 
   /**
    * Get the type of a given node in the computed-view
-   * @param {DOMNode} node The node which we want information about
+   *
+   * @param {DOMNode} node
+   *        The node which we want information about
    * @return {Object} The type information object contains the following props:
    * - type {String} One of the VIEW_NODE_XXX_TYPE const in
    *   style-inspector-overlays
@@ -393,9 +401,9 @@ CssComputedView.prototype = {
 
     this._createViewsProcess = new UpdateProcess(
       this.styleWindow, CssComputedView.propertyNames, {
-      onItem: (aPropertyName) => {
+      onItem: (propertyName) => {
         // Per-item callback.
-        let propView = new PropertyView(this, aPropertyName);
+        let propView = new PropertyView(this, propertyName);
         fragment.appendChild(propView.buildMain());
         fragment.appendChild(propView.buildSelectorContainer());
 
@@ -466,8 +474,8 @@ CssComputedView.prototype = {
       let deferred = promise.defer();
       this._refreshProcess = new UpdateProcess(
         this.styleWindow, this.propertyViews, {
-        onItem: (aPropView) => {
-          aPropView.refresh();
+        onItem: (propView) => {
+          propView.refresh();
         },
         onDone: () => {
           this._refreshProcess = null;
@@ -476,7 +484,8 @@ CssComputedView.prototype = {
           if (this.searchField.value.length > 0 && !this.numVisibleProperties) {
             this.searchField.classList.add("devtools-style-searchbox-no-match");
           } else {
-            this.searchField.classList.remove("devtools-style-searchbox-no-match");
+            this.searchField.classList
+              .remove("devtools-style-searchbox-no-match");
           }
 
           this.inspector.emit("computed-view-refreshed");
@@ -492,7 +501,7 @@ CssComputedView.prototype = {
    * Handle the keypress event in the computed view.
    */
   _onKeypress: function(event) {
-    let isOSX = Services.appinfo.OS == "Darwin";
+    let isOSX = Services.appinfo.OS === "Darwin";
 
     if (((isOSX && event.metaKey && !event.ctrlKey && !event.altKey) ||
         (!isOSX && event.ctrlKey && !event.metaKey && !event.altKey)) &&
@@ -504,10 +513,8 @@ CssComputedView.prototype = {
 
   /**
    * Called when the user enters a search term in the filter style search box.
-   *
-   * @param {Event} aEvent the DOM Event object.
    */
-  _onFilterStyles: function(aEvent) {
+  _onFilterStyles: function() {
     let win = this.styleWindow;
 
     if (this._filterChangedTimeout) {
@@ -534,11 +541,11 @@ CssComputedView.prototype = {
    * Handle the search box's keypress event. If the escape key is pressed,
    * clear the search box field.
    */
-  _onFilterKeyPress: function(aEvent) {
-    if (aEvent.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE &&
+  _onFilterKeyPress: function(event) {
+    if (event.keyCode === Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE &&
         this._onClearSearch()) {
-      aEvent.preventDefault();
-      aEvent.stopPropagation();
+      event.preventDefault();
+      event.stopPropagation();
     }
   },
 
@@ -572,10 +579,8 @@ CssComputedView.prototype = {
 
   /**
    * The change event handler for the includeBrowserStyles checkbox.
-   *
-   * @param {Event} aEvent the DOM Event object.
    */
-  _onIncludeBrowserStyles: function(aEvent) {
+  _onIncludeBrowserStyles: function() {
     this.refreshSourceFilter();
     this.refreshPanel();
   },
@@ -612,7 +617,8 @@ CssComputedView.prototype = {
 
     // Here we build and cache a list of css properties supported by the browser
     // We could use any element but let's use the main document's root element
-    let styles = this.styleWindow.getComputedStyle(this.styleDocument.documentElement);
+    let styles = this.styleWindow
+      .getComputedStyle(this.styleDocument.documentElement);
     let mozProps = [];
     for (let i = 0, numStyles = styles.length; i < numStyles; i++) {
       let prop = styles.item(i);
@@ -651,10 +657,8 @@ CssComputedView.prototype = {
 
   /**
    * Focus the window on mousedown.
-   *
-   * @param event The event object
    */
-  focusWindow: function(event) {
+  focusWindow: function() {
     let win = this.styleDocument.defaultView;
     win.focus();
   },
@@ -679,13 +683,13 @@ CssComputedView.prototype = {
 
   /**
    * Callback for copy event. Copy selected text.
-   * @param {Event} event copy event object.
+   *
+   * @param {Event} event
+   *        copy event object.
    */
   _onCopy: function(event) {
     this.copySelection();
-    if (event) {
-      event.preventDefault();
-    }
+    event.preventDefault();
   },
 
   /**
@@ -759,7 +763,8 @@ CssComputedView.prototype = {
     this.element.removeEventListener("contextmenu", this._onContextMenu);
     this.searchField.removeEventListener("input", this._onFilterStyles);
     this.searchField.removeEventListener("keypress", this._onFilterKeyPress);
-    this.searchField.removeEventListener("contextmenu", this._onFilterTextboxContextMenu);
+    this.searchField.removeEventListener("contextmenu",
+                                         this._onFilterTextboxContextMenu);
     this.searchClearButton.removeEventListener("click", this._onClearSearch);
     this.includeBrowserStylesCheckbox.removeEventListener("command",
       this.includeBrowserStylesChanged);
@@ -786,10 +791,11 @@ CssComputedView.prototype = {
   }
 };
 
-function PropertyInfo(aTree, aName) {
-  this.tree = aTree;
-  this.name = aName;
+function PropertyInfo(tree, name) {
+  this.tree = tree;
+  this.name = name;
 }
+
 PropertyInfo.prototype = {
   get value() {
     if (this.tree._computed) {
@@ -802,19 +808,20 @@ PropertyInfo.prototype = {
 /**
  * A container to give easy access to property data from the template engine.
  *
- * @constructor
- * @param {CssComputedView} aTree the CssComputedView instance we are working with.
- * @param {string} aName the CSS property name for which this PropertyView
- * instance will render the rules.
+ * @param {CssComputedView} tree
+ *        The CssComputedView instance we are working with.
+ * @param {String} name
+ *        The CSS property name for which this PropertyView
+ *        instance will render the rules.
  */
-function PropertyView(aTree, aName) {
-  this.tree = aTree;
-  this.name = aName;
-  this.getRTLAttr = aTree.getRTLAttr;
+function PropertyView(tree, name) {
+  this.tree = tree;
+  this.name = name;
+  this.getRTLAttr = tree.getRTLAttr;
 
-  this.link = "https://developer.mozilla.org/CSS/" + aName;
+  this.link = "https://developer.mozilla.org/CSS/" + name;
 
-  this._propertyInfo = new PropertyInfo(aTree, aName);
+  this._propertyInfo = new PropertyInfo(tree, name);
 }
 
 PropertyView.prototype = {
@@ -848,7 +855,7 @@ PropertyView.prototype = {
   /**
    * Get the computed style for the current property.
    *
-   * @return {string} the computed style for the current property of the
+   * @return {String} the computed style for the current property of the
    * currently highlighted element.
    */
   get value() {
@@ -884,8 +891,8 @@ PropertyView.prototype = {
     let searchTerm = this.tree.searchField.value.toLowerCase();
     let isValidSearchTerm = searchTerm.trim().length > 0;
     if (isValidSearchTerm &&
-        this.name.toLowerCase().indexOf(searchTerm) == -1 &&
-        this.value.toLowerCase().indexOf(searchTerm) == -1) {
+        this.name.toLowerCase().indexOf(searchTerm) === -1 &&
+        this.value.toLowerCase().indexOf(searchTerm) === -1) {
       return false;
     }
 
@@ -894,7 +901,8 @@ PropertyView.prototype = {
 
   /**
    * Returns the className that should be assigned to the propertyView.
-   * @return string
+   *
+   * @return {String}
    */
   get propertyHeaderClassName() {
     if (this.visible) {
@@ -907,7 +915,8 @@ PropertyView.prototype = {
   /**
    * Returns the className that should be assigned to the propertyView content
    * container.
-   * @return string
+   *
+   * @return {String}
    */
   get propertyContentClassName() {
     if (this.visible) {
@@ -919,7 +928,8 @@ PropertyView.prototype = {
 
   /**
    * Build the markup for on computed style
-   * @return Element
+   *
+   * @return {Element}
    */
   buildMain: function() {
     let doc = this.tree.styleDocument;
@@ -932,14 +942,14 @@ PropertyView.prototype = {
 
     // Make it keyboard navigable
     this.element.setAttribute("tabindex", "0");
-    this.onKeyDown = (aEvent) => {
+    this.onKeyDown = (event) => {
       let keyEvent = Ci.nsIDOMKeyEvent;
-      if (aEvent.keyCode == keyEvent.DOM_VK_F1) {
+      if (event.keyCode === keyEvent.DOM_VK_F1) {
         this.mdnLinkClick();
       }
-      if (aEvent.keyCode == keyEvent.DOM_VK_RETURN ||
-        aEvent.keyCode == keyEvent.DOM_VK_SPACE) {
-        this.onMatchedToggle(aEvent);
+      if (event.keyCode === keyEvent.DOM_VK_RETURN ||
+        event.keyCode === keyEvent.DOM_VK_SPACE) {
+        this.onMatchedToggle(event);
       }
     };
     this.element.addEventListener("keydown", this.onKeyDown, false);
@@ -996,7 +1006,7 @@ PropertyView.prototype = {
     this.element.className = this.propertyHeaderClassName;
     this.element.nextElementSibling.className = this.propertyContentClassName;
 
-    if (this.prevViewedElement != this.tree.viewedElement) {
+    if (this.prevViewedElement !== this.tree.viewedElement) {
       this._matchedSelectorViews = null;
       this.prevViewedElement = this.tree.viewedElement;
     }
@@ -1112,8 +1122,8 @@ PropertyView.prototype = {
     if (!this._matchedSelectorViews) {
       this._matchedSelectorViews = [];
       this._matchedSelectorResponse.forEach(
-        function(aSelectorInfo) {
-          let selectorView = new SelectorView(this.tree, aSelectorInfo);
+        function(selectorInfo) {
+          let selectorView = new SelectorView(this.tree, selectorInfo);
           this._matchedSelectorViews.push(selectorView);
         }, this);
     }
@@ -1136,29 +1146,30 @@ PropertyView.prototype = {
   /**
    * The action when a user expands matched selectors.
    *
-   * @param {Event} aEvent Used to determine the class name of the targets click
-   * event.
+   * @param {Event} event
+   *        Used to determine the class name of the targets click
+   *        event.
    */
-  onMatchedToggle: function(aEvent) {
-    if (aEvent.shiftKey) {
+  onMatchedToggle: function(event) {
+    if (event.shiftKey) {
       return;
     }
     this.matchedExpanded = !this.matchedExpanded;
     this.refreshMatchedSelectors();
-    aEvent.preventDefault();
+    event.preventDefault();
   },
 
   /**
    * The action when a user clicks on the MDN help link for a property.
    */
-  mdnLinkClick: function(aEvent) {
+  mdnLinkClick: function(event) {
     let inspector = this.tree.inspector;
 
     if (inspector.target.tab) {
       let browserWin = inspector.target.tab.ownerDocument.defaultView;
       browserWin.openUILinkIn(this.link, "tab");
     }
-    aEvent.preventDefault();
+    event.preventDefault();
   },
 
   /**
@@ -1169,7 +1180,8 @@ PropertyView.prototype = {
     this.element.removeEventListener("keydown", this.onKeyDown, false);
     this.element = null;
 
-    this.matchedExpander.removeEventListener("click", this.onMatchedToggle, false);
+    this.matchedExpander.removeEventListener("click", this.onMatchedToggle,
+                                             false);
     this.matchedExpander = null;
 
     this.nameNode.removeEventListener("click", this.onFocus, false);
@@ -1182,12 +1194,14 @@ PropertyView.prototype = {
 
 /**
  * A container to give us easy access to display data from a CssRule
- * @param CssComputedView aTree, the owning CssComputedView
- * @param aSelectorInfo
+ *
+ * @param CssComputedView tree
+ *        the owning CssComputedView
+ * @param selectorInfo
  */
-function SelectorView(aTree, aSelectorInfo) {
-  this.tree = aTree;
-  this.selectorInfo = aSelectorInfo;
+function SelectorView(tree, selectorInfo) {
+  this.tree = tree;
+  this.selectorInfo = selectorInfo;
   this._cacheStatusNames();
 
   this.openStyleEditor = this.openStyleEditor.bind(this);
@@ -1216,8 +1230,6 @@ SelectorView.prototype = {
    * These statuses are localized inside the styleinspector.properties string
    * bundle.
    * @see css-logic.js - the CssLogic.STATUS array.
-   *
-   * @return {void}
    */
   _cacheStatusNames: function() {
     if (SelectorView.STATUS_NAMES.length) {
@@ -1288,7 +1300,7 @@ SelectorView.prototype = {
    */
   updateSourceLink: function() {
     return this.updateSource().then((oldSource) => {
-      if (oldSource != this.source && this.tree.element) {
+      if (oldSource !== this.source && this.tree.element) {
         let selector = '[sourcelocation="' + oldSource + '"]';
         let link = this.tree.element.querySelector(selector);
         if (link) {
@@ -1314,13 +1326,13 @@ SelectorView.prototype = {
 
     let showOrig = Services.prefs.getBoolPref(PREF_ORIG_SOURCES);
 
-    if (showOrig && rule.type != ELEMENT_STYLE) {
+    if (showOrig && rule.type !== ELEMENT_STYLE) {
       let deferred = promise.defer();
 
       // set as this first so we show something while we're fetching
       this.source = CssLogic.shortSource(this.sheet) + ":" + rule.line;
 
-      rule.getOriginalLocation().then(({href, line, column}) => {
+      rule.getOriginalLocation().then(({href, line}) => {
         let oldSource = this.source;
         this.source = CssLogic.shortSource({href: href}) + ":" + line;
         deferred.resolve(oldSource);
@@ -1337,9 +1349,9 @@ SelectorView.prototype = {
   /**
    * Open the style editor if the RETURN key was pressed.
    */
-  maybeOpenStyleEditor: function(aEvent) {
+  maybeOpenStyleEditor: function(event) {
     let keyEvent = Ci.nsIDOMKeyEvent;
-    if (aEvent.keyCode == keyEvent.DOM_VK_RETURN) {
+    if (event.keyCode === keyEvent.DOM_VK_RETURN) {
       this.openStyleEditor();
     }
   },
@@ -1351,10 +1363,8 @@ SelectorView.prototype = {
    *
    *   We can only view stylesheets contained in document.styleSheets inside the
    *   style editor.
-   *
-   * @param aEvent The click event
    */
-  openStyleEditor: function(aEvent) {
+  openStyleEditor: function() {
     let inspector = this.tree.inspector;
     let rule = this.selectorInfo.rule;
 
@@ -1374,6 +1384,7 @@ SelectorView.prototype = {
     if (Services.prefs.getBoolPref(PREF_ORIG_SOURCES)) {
       location = rule.getOriginalLocation();
     }
+
     location.then(({source, href, line, column}) => {
       let target = inspector.target;
       if (ToolDefinitions.styleEditor.isTargetSupported(target)) {
@@ -1389,27 +1400,27 @@ SelectorView.prototype = {
 /**
  * Create a child element with a set of attributes.
  *
- * @param {Element} aParent
+ * @param {Element} parent
  *        The parent node.
- * @param {string} aTag
+ * @param {String} tag
  *        The tag name.
- * @param {object} aAttributes
+ * @param {Object} attributes
  *        A set of attributes to set on the node.
  */
-function createChild(aParent, aTag, aAttributes={}) {
-  let elt = aParent.ownerDocument.createElementNS(HTML_NS, aTag);
-  for (let attr in aAttributes) {
-    if (aAttributes.hasOwnProperty(attr)) {
+function createChild(parent, tag, attributes={}) {
+  let elt = parent.ownerDocument.createElementNS(HTML_NS, tag);
+  for (let attr in attributes) {
+    if (attributes.hasOwnProperty(attr)) {
       if (attr === "textContent") {
-        elt.textContent = aAttributes[attr];
+        elt.textContent = attributes[attr];
       } else if (attr === "child") {
-        elt.appendChild(aAttributes[attr]);
+        elt.appendChild(attributes[attr]);
       } else {
-        elt.setAttribute(attr, aAttributes[attr]);
+        elt.setAttribute(attr, attributes[attr]);
       }
     }
   }
-  aParent.appendChild(elt);
+  parent.appendChild(elt);
   return elt;
 }
 

browser/devtools/styleinspector/computedview.xhtml

@@ -37,7 +37,7 @@
       window.setPanel = function(panel, iframe) {
         let {require} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
         let inspector = require("devtools/styleinspector/style-inspector");
-        this.computedview = new inspector.ComputedViewTool(panel, window, iframe);
+        this.computedview = new inspector.ComputedViewTool(panel, window);
       }
       window.onunload = function() {
         if (this.computedview) {

browser/devtools/styleinspector/css-parsing-utils.js

@@ -17,11 +17,11 @@ const SELECTOR_PSEUDO_CLASS = exports.SELECTOR_PSEUDO_CLASS = 3;
  * For example, parseDeclarations("width: 1px; height: 1px") would return
  * [{name:"width", value: "1px"}, {name: "height", "value": "1px"}]
  *
- * The input string is assumed to only contain declarations so { and } characters
- * will be treated as part of either the property or value, depending where it's
- * found.
+ * The input string is assumed to only contain declarations so { and }
+ * characters will be treated as part of either the property or value,
+ * depending where it's found.
  *
- * @param {string} inputString
+ * @param {String} inputString
  *        An input string of CSS
  * @return {Array} an array of objects with the following signature:
  *         [{"name": string, "value": string, "priority": string}, ...]
@@ -106,7 +106,7 @@ function parseDeclarations(inputString) {
  * (2) SELECTOR_ELEMENT
  * (3) SELECTOR_PSEUDO_CLASS
  *
- * @param {string} value
+ * @param {String} value
  *        The CSS selector text.
  * @return {Array} an array of objects with the following signature:
  *         [{ "value": string, "type": integer }, ...]
@@ -201,8 +201,9 @@ function parsePseudoClassesAndAttributes(value) {
  * Expects a single CSS value to be passed as the input and parses the value
  * and priority.
  *
- * @param {string} value The value from the text editor.
- * @return {object} an object with 'value' and 'priority' properties.
+ * @param {String} value
+ *        The value from the text editor.
+ * @return {Object} an object with 'value' and 'priority' properties.
  */
 function parseSingleValue(value) {
   let declaration = parseDeclarations("a: " + value + ";")[0];

browser/devtools/styleinspector/cssruleview.xhtml

@@ -8,25 +8,21 @@
   %inspectorDTD;
 ]>
 
-
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       class="theme-sidebar">
-
   <head>
     <title>&ruleViewTitle;</title>
     <link rel="stylesheet" href="chrome://global/skin/global.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/content/devtools/ruleview.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://browser/skin/devtools/ruleview.css"  type="text/css"/>
-
     <script type="application/javascript;version=1.8" src="theme-switching.js"/>
-
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
         let {require} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
         let inspector = require("devtools/styleinspector/style-inspector");
-        this.ruleview = new inspector.RuleViewTool(panel, window, iframe);
+        this.ruleview = new inspector.RuleViewTool(panel, window);
       }
       window.onunload = function() {
         if (this.ruleview) {
@@ -36,7 +32,6 @@
     </script>
   </head>
   <body>
-
     <div id="root" class="devtools-monospace">
       <div id="ruleview-toolbar" class="devtools-toolbar">
         <div class="devtools-searchbox">
@@ -57,6 +52,5 @@
 
     <div id="ruleview-container" class="ruleview devtools-monospace">
     </div>
-
   </body>
 </html>

browser/devtools/styleinspector/style-inspector-menu.js

@@ -11,21 +11,27 @@
 const {Cc, Ci, Cu} = require("chrome");
 const {PREF_ORIG_SOURCES} = require("devtools/styleeditor/utils");
 
-loader.lazyRequireGetter(this, "overlays", "devtools/styleinspector/style-inspector-overlays");
+loader.lazyRequireGetter(this, "overlays",
+  "devtools/styleinspector/style-inspector-overlays");
 loader.lazyImporter(this, "Services", "resource://gre/modules/Services.jsm");
-loader.lazyServiceGetter(this, "clipboardHelper", "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
+loader.lazyServiceGetter(this, "clipboardHelper",
+  "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
 loader.lazyGetter(this, "_strings", () => {
   return Services.strings
   .createBundle("chrome://global/locale/devtools/styleinspector.properties");
 });
 
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-const PREF_ENABLE_MDN_DOCS_TOOLTIP = "devtools.inspector.mdnDocsTooltip.enabled";
+const PREF_ENABLE_MDN_DOCS_TOOLTIP =
+  "devtools.inspector.mdnDocsTooltip.enabled";
 
 /**
  * Style inspector context menu
- * @param {RuleView|ComputedView} view RuleView or ComputedView instance controlling this menu
- * @param {Object} options menu configuration
+ *
+ * @param {RuleView|ComputedView} view
+ *        RuleView or ComputedView instance controlling this menu
+ * @param {Object} options
+ *        Option menu configuration
  */
 function StyleInspectorMenu(view, options) {
   this.view = view;
@@ -189,7 +195,8 @@ StyleInspectorMenu.prototype = {
 
     item.setAttribute("label", _strings.GetStringFromName(attributes.label));
     if (attributes.accesskey) {
-      item.setAttribute("accesskey", _strings.GetStringFromName(attributes.accesskey));
+      item.setAttribute("accesskey",
+        _strings.GetStringFromName(attributes.accesskey));
     }
     item.addEventListener("command", attributes.command);
 
@@ -217,11 +224,14 @@ StyleInspectorMenu.prototype = {
     let showOrig = Services.prefs.getBoolPref(PREF_ORIG_SOURCES);
     this.menuitemSources.setAttribute("checked", showOrig);
 
-    let enableMdnDocsTooltip = Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
-    this.menuitemShowMdnDocs.hidden = !(enableMdnDocsTooltip && this._isPropertyName());
+    let enableMdnDocsTooltip =
+      Services.prefs.getBoolPref(PREF_ENABLE_MDN_DOCS_TOOLTIP);
+    this.menuitemShowMdnDocs.hidden = !(enableMdnDocsTooltip &&
+                                        this._isPropertyName());
 
     this.menuitemAddRule.hidden = !this.isRuleView;
-    this.menuitemAddRule.disabled = !(this.isRuleView && !this.inspector.selection.isAnonymousNode());
+    this.menuitemAddRule.disabled = !this.isRuleView ||
+                                    this.inspector.selection.isAnonymousNode();
   },
 
   /**
@@ -326,6 +336,7 @@ StyleInspectorMenu.prototype = {
 
   /**
    * Check if the current node (clicked node) is an image URL
+   *
    * @return {Boolean} true if the node is an image url
    */
   _isImageUrl: function() {
@@ -338,7 +349,9 @@ StyleInspectorMenu.prototype = {
 
   /**
    * Get the DOM Node container for the current popupNode.
-   * If popupNode is a textNode, return the parent node, otherwise return popupNode itself.
+   * If popupNode is a textNode, return the parent node, otherwise return
+   * popupNode itself.
+   *
    * @return {DOMNode}
    */
   _getClickedNode: function() {
@@ -364,7 +377,7 @@ StyleInspectorMenu.prototype = {
   /**
    * Copy the most recently selected color value to clipboard.
    */
-  _onCopy: function(event) {
+  _onCopy: function() {
     this.view.copySelection(this.styleDocument.popupNode);
   },
 
@@ -387,7 +400,8 @@ StyleInspectorMenu.prototype = {
   },
 
   /**
-   * Retrieve the image data for the selected image url and copy it to the clipboard
+   * Retrieve the image data for the selected image url and copy it to the
+   * clipboard
    */
   _onCopyImageDataUrl: Task.async(function*() {
     if (!this._clickedNodeInfo) {
@@ -401,7 +415,8 @@ StyleInspectorMenu.prototype = {
       let data = yield inspectorFront.getImageDataFromURL(imageUrl);
       message = yield data.data.string();
     } catch (e) {
-      message = _strings.GetStringFromName("styleinspector.copyImageDataUrlError");
+      message =
+        _strings.GetStringFromName("styleinspector.copyImageDataUrlError");
     }
 
     clipboardHelper.copyString(message);
@@ -473,7 +488,8 @@ StyleInspectorMenu.prototype = {
    * Copy the rule of the current clicked node.
    */
   _onCopyRule: function() {
-    let ruleEditor = this.styleDocument.popupNode.parentNode.offsetParent._ruleEditor;
+    let ruleEditor =
+      this.styleDocument.popupNode.parentNode.offsetParent._ruleEditor;
     let rule = ruleEditor.rule;
     clipboardHelper.copyString(rule.stringifyRule());
   },
@@ -517,11 +533,15 @@ StyleInspectorMenu.prototype = {
     this._removeContextMenuItem("menuitemAddRule", this._onAddNewRule);
     this._removeContextMenuItem("menuitemCopy", this._onCopy);
     this._removeContextMenuItem("menuitemCopyColor", this._onCopyColor);
-    this._removeContextMenuItem("menuitemCopyImageDataUrl", this._onCopyImageDataUrl);
+    this._removeContextMenuItem("menuitemCopyImageDataUrl",
+      this._onCopyImageDataUrl);
     this._removeContextMenuItem("menuitemCopyLocation", this._onCopyLocation);
-    this._removeContextMenuItem("menuitemCopyPropertyDeclaration", this._onCopyPropertyDeclaration);
-    this._removeContextMenuItem("menuitemCopyPropertyName", this._onCopyPropertyName);
-    this._removeContextMenuItem("menuitemCopyPropertyValue", this._onCopyPropertyValue);
+    this._removeContextMenuItem("menuitemCopyPropertyDeclaration",
+      this._onCopyPropertyDeclaration);
+    this._removeContextMenuItem("menuitemCopyPropertyName",
+      this._onCopyPropertyName);
+    this._removeContextMenuItem("menuitemCopyPropertyValue",
+      this._onCopyPropertyValue);
     this._removeContextMenuItem("menuitemCopyRule", this._onCopyRule);
     this._removeContextMenuItem("menuitemCopySelector", this._onCopySelector);
     this._removeContextMenuItem("menuitemCopyUrl", this._onCopyUrl);

browser/devtools/styleinspector/style-inspector-overlays.js

@@ -20,9 +20,8 @@ const {
   CssDocsTooltip,
   SwatchFilterTooltip
 } = require("devtools/shared/widgets/Tooltip");
-const {CssLogic} = require("devtools/styleinspector/css-logic");
 const EventEmitter = require("devtools/toolkit/event-emitter");
-const {Promise:promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
+const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
 Cu.import("resource://gre/modules/Task.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
 
@@ -41,8 +40,9 @@ const VIEW_NODE_LOCATION_TYPE = exports.VIEW_NODE_LOCATION_TYPE = 5;
 
 /**
  * Manages all highlighters in the style-inspector.
- * @param {CssRuleView|CssComputedView} view Either the rule-view or computed-view
- * panel
+ *
+ * @param {CssRuleView|CssComputedView} view
+ *        Either the rule-view or computed-view panel
  */
 function HighlightersOverlay(view) {
   this.view = view;
@@ -60,7 +60,8 @@ function HighlightersOverlay(view) {
 
   // Only initialize the overlay if at least one of the highlighter types is
   // supported
-  this.supportsHighlighters = this.highlighterUtils.supportsCustomHighlighters();
+  this.supportsHighlighters =
+    this.highlighterUtils.supportsCustomHighlighters();
 
   EventEmitter.decorate(this);
 }
@@ -138,13 +139,14 @@ HighlightersOverlay.prototype = {
     }
   },
 
-  _onMouseLeave: function(event) {
+  _onMouseLeave: function() {
     this._lastHovered = null;
     this._hideCurrent();
   },
 
   /**
    * Is the current hovered node a css transform property value in the rule-view
+   *
    * @param {Object} nodeInfo
    * @return {Boolean}
    */
@@ -160,6 +162,7 @@ HighlightersOverlay.prototype = {
   /**
    * Is the current hovered node a css transform property value in the
    * computed-view
+   *
    * @param {Object} nodeInfo
    * @return {Boolean}
    */
@@ -231,8 +234,9 @@ HighlightersOverlay.prototype = {
 
 /**
  * Manages all tooltips in the style-inspector.
- * @param {CssRuleView|CssComputedView} view Either the rule-view or computed-view
- * panel
+ *
+ * @param {CssRuleView|CssComputedView} view
+ *        Either the rule-view or computed-view panel
  */
 function TooltipsOverlay(view) {
   this.view = view;
@@ -263,21 +267,23 @@ TooltipsOverlay.prototype = {
       return;
     }
 
+    let panelDoc = this.view.inspector.panelDoc;
+
     // Image, fonts, ... preview tooltip
-    this.previewTooltip = new Tooltip(this.view.inspector.panelDoc);
+    this.previewTooltip = new Tooltip(panelDoc);
     this.previewTooltip.startTogglingOnHover(this.view.element,
       this._onPreviewTooltipTargetHover.bind(this));
 
     // MDN CSS help tooltip
-    this.cssDocs = new CssDocsTooltip(this.view.inspector.panelDoc);
+    this.cssDocs = new CssDocsTooltip(panelDoc);
 
     if (this.isRuleView) {
       // Color picker tooltip
-      this.colorPicker = new SwatchColorPickerTooltip(this.view.inspector.panelDoc);
+      this.colorPicker = new SwatchColorPickerTooltip(panelDoc);
       // Cubic bezier tooltip
-      this.cubicBezier = new SwatchCubicBezierTooltip(this.view.inspector.panelDoc);
+      this.cubicBezier = new SwatchCubicBezierTooltip(panelDoc);
       // Filter editor tooltip
-      this.filterEditor = new SwatchFilterTooltip(this.view.inspector.panelDoc);
+      this.filterEditor = new SwatchFilterTooltip(panelDoc);
     }
 
     this._isStarted = true;
@@ -317,15 +323,17 @@ TooltipsOverlay.prototype = {
   /**
    * Given a hovered node info, find out which type of tooltip should be shown,
    * if any
+   *
    * @param {Object} nodeInfo
    * @return {String} The tooltip type to be shown, or null
    */
-  _getTooltipType: function({type, value:prop}) {
+  _getTooltipType: function({type, value: prop}) {
     let tooltipType = null;
     let inspector = this.view.inspector;
 
     // Image preview tooltip
-    if (type === VIEW_NODE_IMAGE_URL_TYPE && inspector.hasUrlToImageDataResolver) {
+    if (type === VIEW_NODE_IMAGE_URL_TYPE &&
+        inspector.hasUrlToImageDataResolver) {
       tooltipType = TOOLTIP_IMAGE_TYPE;
     }
 
@@ -341,10 +349,11 @@ TooltipsOverlay.prototype = {
   },
 
   /**
-   * Executed by the tooltip when the pointer hovers over an element of the view.
-   * Used to decide whether the tooltip should be shown or not and to actually
-   * put content in it.
+   * Executed by the tooltip when the pointer hovers over an element of the
+   * view. Used to decide whether the tooltip should be shown or not and to
+   * actually put content in it.
    * Checks if the hovered target is a css value we support tooltips for.
+   *
    * @param {DOMNode} target The currently hovered node
    */
   _onPreviewTooltipTargetHover: function(target) {

browser/devtools/styleinspector/style-inspector.js

@@ -4,22 +4,29 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* globals RuleView, ComputedView, gDevTools */
+
+"use strict";
+
 const {Cc, Cu, Ci} = require("chrome");
 const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
 const {Tools} = require("main");
 Cu.import("resource://gre/modules/Services.jsm");
 const {PREF_ORIG_SOURCES} = require("devtools/styleeditor/utils");
 
-loader.lazyGetter(this, "gDevTools", () => Cu.import("resource:///modules/devtools/gDevTools.jsm", {}).gDevTools);
-loader.lazyGetter(this, "RuleView", () => require("devtools/styleinspector/rule-view"));
-loader.lazyGetter(this, "ComputedView", () => require("devtools/styleinspector/computed-view"));
+loader.lazyGetter(this, "gDevTools", () =>
+  Cu.import("resource:///modules/devtools/gDevTools.jsm", {}).gDevTools);
+loader.lazyGetter(this, "RuleView",
+  () => require("devtools/styleinspector/rule-view"));
+loader.lazyGetter(this, "ComputedView",
+  () => require("devtools/styleinspector/computed-view"));
 loader.lazyGetter(this, "_strings", () => Services.strings
   .createBundle("chrome://global/locale/devtools/styleinspector.properties"));
 
 // This module doesn't currently export any symbols directly, it only
 // registers inspector tools.
 
-function RuleViewTool(inspector, window, iframe) {
+function RuleViewTool(inspector, window) {
   this.inspector = inspector;
   this.document = window.document;
 
@@ -47,7 +54,6 @@ function RuleViewTool(inspector, window, iframe) {
   this.onSelected();
 }
 
-
 RuleViewTool.prototype = {
   isSidebarActive: function() {
     if (!this.view) {
@@ -59,12 +65,14 @@ RuleViewTool.prototype = {
   onSelected: function(event) {
     // Ignore the event if the view has been destroyed, or if it's inactive.
     // But only if the current selection isn't null. If it's been set to null,
-    // let the update go through as this is needed to empty the view on navigation.
+    // let the update go through as this is needed to empty the view on
+    // navigation.
     if (!this.view) {
       return;
     }
 
-    let isInactive = !this.isSidebarActive() && this.inspector.selection.nodeFront;
+    let isInactive = !this.isSidebarActive() &&
+                     this.inspector.selection.nodeFront;
     if (isInactive) {
       return;
     }
@@ -79,7 +87,8 @@ RuleViewTool.prototype = {
 
     if (!event || event == "new-node-front") {
       let done = this.inspector.updating("rule-view");
-      this.view.selectElement(this.inspector.selection.nodeFront).then(done, done);
+      this.view.selectElement(this.inspector.selection.nodeFront)
+        .then(done, done);
     }
   },
 
@@ -109,7 +118,6 @@ RuleViewTool.prototype = {
     // Chrome stylesheets are not listed in the style editor, so show
     // these sheets in the view source window instead.
     if (!sheet || sheet.isSystem) {
-      let contentDoc = this.inspector.selection.document;
       let href = rule.nodeHref || rule.href;
       let toolbox = gDevTools.getToolbox(this.inspector.target);
       toolbox.viewSource(href, rule.line);
@@ -129,7 +137,7 @@ RuleViewTool.prototype = {
         });
       }
       return;
-    })
+    });
   },
 
   onPropertyChanged: function() {
@@ -157,11 +165,12 @@ RuleViewTool.prototype = {
   }
 };
 
-function ComputedViewTool(inspector, window, iframe) {
+function ComputedViewTool(inspector, window) {
   this.inspector = inspector;
   this.document = window.document;
 
-  this.view = new ComputedView.CssComputedView(this.inspector, this.document, this.inspector.pageStyle);
+  this.view = new ComputedView.CssComputedView(this.inspector, this.document,
+                                               this.inspector.pageStyle);
 
   this.onSelected = this.onSelected.bind(this);
   this.refresh = this.refresh.bind(this);
@@ -181,7 +190,7 @@ function ComputedViewTool(inspector, window, iframe) {
 ComputedViewTool.prototype = {
   isSidebarActive: function() {
     if (!this.view) {
-      return;
+      return false;
     }
     return this.inspector.sidebar.getCurrentTabID() == "computedview";
   },
@@ -189,12 +198,14 @@ ComputedViewTool.prototype = {
   onSelected: function(event) {
     // Ignore the event if the view has been destroyed, or if it's inactive.
     // But only if the current selection isn't null. If it's been set to null,
-    // let the update go through as this is needed to empty the view on navigation.
+    // let the update go through as this is needed to empty the view on
+    // navigation.
     if (!this.view) {
       return;
     }
 
-    let isInactive = !this.isSidebarActive() && this.inspector.selection.nodeFront;
+    let isInactive = !this.isSidebarActive() &&
+                     this.inspector.selection.nodeFront;
     if (isInactive) {
       return;
     }

browser/devtools/styleinspector/test/browser.ini

@@ -74,8 +74,8 @@ support-files =
 [browser_ruleview_completion-existing-property_02.js]
 [browser_ruleview_completion-new-property_01.js]
 [browser_ruleview_completion-new-property_02.js]
-[browser_ruleview_computed_01.js]
-[browser_ruleview_computed_02.js]
+[browser_ruleview_computed-lists_01.js]
+[browser_ruleview_computed-lists_02.js]
 [browser_ruleview_completion-popup-hidden-after-navigation.js]
 [browser_ruleview_content_01.js]
 [browser_ruleview_content_02.js]
@@ -117,7 +117,9 @@ skip-if = e10s # Bug 1039528: "inspect element" contextual-menu doesn't work wit
 [browser_ruleview_filtereditor-commit-on-ENTER.js]
 [browser_ruleview_filtereditor-revert-on-ESC.js]
 skip-if = (os == "win" && debug) || e10s # bug 963492: win. bug 1040653: e10s.
-[browser_ruleview_inherit.js]
+[browser_ruleview_inherited-properties_01.js]
+[browser_ruleview_inherited-properties_02.js]
+[browser_ruleview_inherited-properties_03.js]
 [browser_ruleview_keybindings.js]
 [browser_ruleview_keyframes-rule_01.js]
 [browser_ruleview_keyframes-rule_02.js]

browser/devtools/styleinspector/test/browser_computedview_browser-styles.js

@@ -6,20 +6,18 @@
 
 // Tests that the checkbox to include browser styles works properly.
 
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,default styles test");
-
-  info("Creating the test document");
-  content.document.body.innerHTML = '<style type="text/css"> ' +
-    '.matches {color: #F00;}</style>' +
-    '<span id="matches" class="matches">Some styled text</span>' +
-    '</div>';
-  content.document.title = "Style Inspector Default Styles Test";
-
-  info("Opening the computed view");
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
 
   info("Checking the default styles");

browser/devtools/styleinspector/test/browser_computedview_cycle_color.js

@@ -6,22 +6,18 @@
 
 // Computed view color cycling test.
 
-const PAGE_CONTENT = [
-  "<style type=\"text/css\">",
-  ".matches {color: #F00;}</style>",
-  "<span id=\"matches\" class=\"matches\">Some styled text</span>",
-  "</div>"
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8," +
-               "Computed view color cycling test.");
-  content.document.body.innerHTML = PAGE_CONTENT;
-
-  info("Opening the computed view");
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
 
   info("Checking the property itself");
@@ -42,27 +38,32 @@ function checkColorCycling(container, inspector) {
   is(valueNode.textContent, "#F00", "Color displayed as a hex value.");
 
   // HSL
-  EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
+  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);
+  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);
+  EventUtils.synthesizeMouseAtCenter(swatch,
+                                     {type: "mousedown", shiftKey: true}, win);
   is(valueNode.textContent, "red",
                             "Color displayed as a color name.");
 
   // "Authored" (currently the computed value)
-  EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
+  EventUtils.synthesizeMouseAtCenter(swatch,
+                                     {type: "mousedown", shiftKey: true}, win);
   is(valueNode.textContent, "rgb(255, 0, 0)",
                             "Color displayed as an RGB value.");
 
   // Back to hex
-  EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
+  EventUtils.synthesizeMouseAtCenter(swatch,
+                                     {type: "mousedown", shiftKey: true}, win);
   is(valueNode.textContent, "#F00",
                             "Color displayed as hex again.");
 }

browser/devtools/styleinspector/test/browser_computedview_getNodeInfo.js

@@ -4,15 +4,15 @@
 
 "use strict";
 
-// Test various output of the computed-view's getNodeInfo method.
+// Tests various output of the computed-view's getNodeInfo method.
 // This method is used by the style-inspector-overlay on mouseover to decide
-// which tooltip or highlighter to show when hovering over a value/name/selector
-// if any.
+// which tooltip or highlighter to show when hovering over a
+// value/name/selector if any.
 // For instance, browser_ruleview_selector-highlighter_01.js and
 // browser_ruleview_selector-highlighter_02.js test that the selector
 // highlighter appear when hovering over a selector in the rule-view.
-// Since the code to make this work for the computed-view is 90% the same, there
-// is no need for testing it again here.
+// Since the code to make this work for the computed-view is 90% the same,
+// there is no need for testing it again here.
 // This test however serves as a unit test for getNodeInfo.
 
 const {
@@ -22,23 +22,23 @@ const {
   VIEW_NODE_IMAGE_URL_TYPE
 } = require("devtools/styleinspector/style-inspector-overlays");
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    background: red;',
-  '    color: white;',
-  '  }',
-  '  div {',
-  '    background: green;',
-  '  }',
-  '  div div {',
-  '    background-color: yellow;',
-  '    background-image: url(chrome://global/skin/icons/warning-64.png);',
-  '    color: red;',
-  '  }',
-  '</style>',
-  '<div><div id="testElement">Test element</div></div>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red;
+      color: white;
+    }
+    div {
+      background: green;
+    }
+    div div {
+      background-color: yellow;
+      background-image: url(chrome://global/skin/icons/warning-64.png);
+      color: red;
+    }
+  </style>
+  <div><div id="testElement">Test element</div></div>
+`;
 
 // Each item in this array must have the following properties:
 // - desc {String} will be logged for information
@@ -102,7 +102,8 @@ const TEST_DATA = [
       ok("property" in nodeInfo.value);
       ok("value" in nodeInfo.value);
       is(nodeInfo.value.property, "background-image");
-      is(nodeInfo.value.value, "url(\"chrome://global/skin/icons/warning-64.png\")");
+      is(nodeInfo.value.value,
+         "url(\"chrome://global/skin/icons/warning-64.png\")");
       is(nodeInfo.value.url, "chrome://global/skin/icons/warning-64.png");
     }
   },
@@ -164,8 +165,7 @@ const TEST_DATA = [
 ];
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8," + PAGE_CONTENT);
-
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openComputedView();
   yield selectNode("#testElement", inspector);
 

browser/devtools/styleinspector/test/browser_computedview_keybindings_01.js

@@ -4,20 +4,20 @@
 
 "use strict";
 
-// Test computed view key bindings
+// Tests computed view key bindings.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span class="matches">Some styled text</span>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,default styles test");
-
-  info("Adding content to the test page");
-  content.document.body.innerHTML = '<style type="text/css"> ' +
-    '.matches {color: #F00;}</style>' +
-    '<span class="matches">Some styled text</span>' +
-    '</div>';
-
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode(".matches", inspector);
 
   let propView = getFirstVisiblePropertyView(view);
@@ -29,8 +29,10 @@ add_task(function*() {
   EventUtils.synthesizeMouseAtCenter(matchedExpander, {}, view.styleWindow);
   yield onMatchedExpanderFocus;
 
-  yield checkToggleKeyBinding(view.styleWindow, "VK_SPACE", rulesTable, inspector);
-  yield checkToggleKeyBinding(view.styleWindow, "VK_RETURN", rulesTable, inspector);
+  yield checkToggleKeyBinding(view.styleWindow, "VK_SPACE", rulesTable,
+                              inspector);
+  yield checkToggleKeyBinding(view.styleWindow, "VK_RETURN", rulesTable,
+                              inspector);
   yield checkHelpLinkKeybinding(view);
 });
 
@@ -48,7 +50,8 @@ function getFirstVisiblePropertyView(view) {
 }
 
 function* checkToggleKeyBinding(win, key, rulesTable, inspector) {
-  info("Pressing " + key + " key a couple of times to check that the property gets expanded/collapsed");
+  info("Pressing " + key + " key a couple of times to check that the " +
+    "property gets expanded/collapsed");
 
   let onExpand = inspector.once("computed-view-property-expanded");
   let onCollapse = inspector.once("computed-view-property-collapsed");
@@ -69,7 +72,7 @@ function checkHelpLinkKeybinding(view) {
   let def = promise.defer();
 
   let propView = getFirstVisiblePropertyView(view);
-  propView.mdnLinkClick = function(aEvent) {
+  propView.mdnLinkClick = function() {
     ok(true, "Pressing F1 opened the MDN link");
     def.resolve();
   };

browser/devtools/styleinspector/test/browser_computedview_keybindings_02.js

@@ -4,33 +4,37 @@
 
 "use strict";
 
-// Tests the computed-view keyboard navigation
+// Tests the computed-view keyboard navigation.
+
+const TEST_URI = `
+  <style type="text/css">
+    span {
+      font-variant: small-caps;
+      color: #000000;
+    }
+    .nomatches {
+      color: #ff0000;
+    }
+  </style>
+  <div id="first" style="margin: 10em;
+    font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+    <h1>Some header text</h1>
+    <p id="salutation" style="font-size: 12pt">hi.</p>
+    <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+    solely to provide some things to <span style="color: yellow">
+    highlight</span> and <span style="font-weight: bold">count</span>
+    style list-items in the box at right. If you are reading this,
+    you should go do something else instead. Maybe read a book. Or better
+    yet, write some test-cases for another bit of code.
+    <span style="font-style: italic">some text</span></p>
+    <p id="closing">more text</p>
+    <p>even more text</p>
+  </div>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,computed view keyboard nav test");
-
-  content.document.body.innerHTML = '<style type="text/css"> ' +
-    'span { font-variant: small-caps; color: #000000; } ' +
-    '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ' +
-    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">\n' +
-    '<h1>Some header text</h1>\n' +
-    '<p id="salutation" style="font-size: 12pt">hi.</p>\n' +
-    '<p id="body" style="font-size: 12pt">I am a test-case. This text exists ' +
-    'solely to provide some things to <span style="color: yellow">' +
-    'highlight</span> and <span style="font-weight: bold">count</span> ' +
-    'style list-items in the box at right. If you are reading this, ' +
-    'you should go do something else instead. Maybe read a book. Or better ' +
-    'yet, write some test-cases for another bit of code. ' +
-    '<span style="font-style: italic">some text</span></p>\n' +
-    '<p id="closing">more text</p>\n' +
-    '<p>even more text</p>' +
-    '</div>';
-  content.document.title = "Computed view keyboard navigation test";
-
-  info("Opening the computed-view");
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode("span", inspector);
 
   info("Selecting the first computed style in the list");

browser/devtools/styleinspector/test/browser_computedview_matched-selectors-toggle.js

@@ -4,29 +4,20 @@
 
 "use strict";
 
-// Test that the computed view properties can be expanded and collapsed with
-// either the twisty or by dbl-clicking on the container
+// Tests that the computed view properties can be expanded and collapsed with
+// either the twisty or by dbl-clicking on the container.
 
-const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent([
-  '<html>' +
-  '<head>' +
-  '  <title>Computed view toggling test</title>',
-  '  <style type="text/css"> ',
-  '    html { color: #000000; font-size: 15pt; } ',
-  '    h1 { color: red; } ',
-  '  </style>',
-  '</head>',
-  '<body>',
-  '  <h1>Some header text</h1>',
-  '</body>',
-  '</html>'
-].join("\n"));
+const TEST_URI = `
+  <style type="text/css"> ,
+    html { color: #000000; font-size: 15pt; }
+    h1 { color: red; }
+  </style>
+  <h1>Some header text</h1>
+`;
 
 add_task(function*() {
-  yield addTab(TEST_URL);
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode("h1", inspector);
 
   yield testExpandOnTwistyClick(view, inspector);
@@ -50,7 +41,8 @@ function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
 
   // Expanded means the matchedselectors div is not empty
   let div = styleDocument.querySelector(".property-content .matchedselectors");
-  ok(div.childNodes.length > 0, "Matched selectors are expanded on twisty click");
+  ok(div.childNodes.length > 0,
+    "Matched selectors are expanded on twisty click");
 }
 
 function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
@@ -68,7 +60,8 @@ function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
 
   // Collapsed means the matchedselectors div is empty
   let div = styleDocument.querySelector(".property-content .matchedselectors");
-  ok(div.childNodes.length === 0, "Matched selectors are collapsed on twisty click");
+  ok(div.childNodes.length === 0,
+    "Matched selectors are collapsed on twisty click");
 }
 
 function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
@@ -104,5 +97,6 @@ function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
 
   // Collapsed means the matchedselectors div is empty
   let div = styleDocument.querySelector(".property-content .matchedselectors");
-  ok(div.childNodes.length === 0, "Matched selectors are collapsed on dblclick");
+  ok(div.childNodes.length === 0,
+    "Matched selectors are collapsed on dblclick");
 }

browser/devtools/styleinspector/test/browser_computedview_matched-selectors_01.js

@@ -4,14 +4,14 @@
 
 "use strict";
 
-// Checking selector counts, matched rules and titles in the computed-view
+// Checking selector counts, matched rules and titles in the computed-view.
 
 const {PropertyView} = require("devtools/styleinspector/computed-view");
 const TEST_URI = TEST_URL_ROOT + "doc_matched_selectors.html";
 
 add_task(function*() {
   yield addTab(TEST_URI);
-  let {toolbox, inspector, view} = yield openComputedView();
+  let {inspector, view} = yield openComputedView();
 
   yield selectNode("#test", inspector);
   yield testMatchedSelectors(view, inspector);
@@ -21,7 +21,8 @@ function* testMatchedSelectors(view, inspector) {
   info("checking selector counts, matched rules and titles");
 
   let nodeFront = yield getNodeFront("#test", inspector);
-  is(nodeFront, view.viewedElement, "style inspector node matches the selected node");
+  is(nodeFront, view.viewedElement,
+    "style inspector node matches the selected node");
 
   let propertyView = new PropertyView(view, "color");
   propertyView.buildMain();
@@ -31,6 +32,8 @@ function* testMatchedSelectors(view, inspector) {
   yield propertyView.refreshMatchedSelectors();
 
   let numMatchedSelectors = propertyView.matchedSelectors.length;
-  is(numMatchedSelectors, 6, "CssLogic returns the correct number of matched selectors for div");
-  is(propertyView.hasMatchedSelectors, true, "hasMatchedSelectors returns true");
+  is(numMatchedSelectors, 6,
+    "CssLogic returns the correct number of matched selectors for div");
+  is(propertyView.hasMatchedSelectors, true,
+    "hasMatchedSelectors returns true");
 }

browser/devtools/styleinspector/test/browser_computedview_matched-selectors_02.js

@@ -4,15 +4,11 @@
 
 "use strict";
 
-// Tests for matched selector texts in the computed view
+// Tests for matched selector texts in the computed view.
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>");
-
-  info("Opening the computed view");
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  let {inspector, view} = yield openComputedView();
   yield selectNode("div", inspector);
 
   info("Checking the color property view");
@@ -24,7 +20,8 @@ add_task(function*() {
   propertyView.matchedExpanded = true;
   yield propertyView.refreshMatchedSelectors();
 
-  let span = propertyView.matchedSelectorsContainer.querySelector("span.rule-text");
+  let span = propertyView.matchedSelectorsContainer
+    .querySelector("span.rule-text");
   ok(span, "Found the first table row");
 
   let selector = propertyView.matchedSelectorViews[0];

browser/devtools/styleinspector/test/browser_computedview_media-queries.js

@@ -14,12 +14,8 @@ let {CssLogic} = require("devtools/styleinspector/css-logic");
 
 add_task(function*() {
   yield addTab(TEST_URI);
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test element");
+  let {inspector, view} = yield openComputedView();
   yield selectNode("div", inspector);
-
-  info("Checking property view");
   yield checkPropertyView(view);
 });
 

browser/devtools/styleinspector/test/browser_computedview_no-results-placeholder.js

@@ -6,19 +6,18 @@
 
 // Tests that the no results placeholder works properly.
 
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,no results placeholder test");
-
-  info("Creating the test document");
-  content.document.body.innerHTML = '<style type="text/css"> ' +
-    '.matches {color: #F00;}</style>' +
-    '<span id="matches" class="matches">Some styled text</span>';
-  content.document.title = "Tests that the no results placeholder works properly";
-
-  info("Opening the computed view");
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
 
   yield enterInvalidFilter(inspector, view);
@@ -36,7 +35,7 @@ function* enterInvalidFilter(inspector, computedView) {
 
   let onRefreshed = inspector.once("computed-view-refreshed");
   searchbar.focus();
-  synthesizeKeys(searchTerm, computedView.styleWindow)
+  synthesizeKeys(searchTerm, computedView.styleWindow);
   yield onRefreshed;
 }
 

browser/devtools/styleinspector/test/browser_computedview_original-source-link.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-// Test that the computed view shows the original source link when source maps
-// are enabled
+// Tests that the computed view shows the original source link when source maps
+// are enabled.
 
 const TESTCASE_URI = TEST_URL_ROOT_SSL + "doc_sourcemaps.html";
 const PREF = "devtools.styleeditor.source-maps-enabled";
@@ -18,8 +18,6 @@ add_task(function*() {
 
   yield addTab(TESTCASE_URI);
   let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Select the test node");
   yield selectNode("div", inspector);
 
   info("Expanding the first property");
@@ -64,11 +62,12 @@ function* testClickingLink(toolbox, view) {
 
   let editor = yield onEditor;
 
-  let {line, col} = editor.sourceEditor.getCursor();
+  let {line} = editor.sourceEditor.getCursor();
   is(line, 3, "cursor is at correct line number in original source");
 }
 
 function verifyLinkText(view, text) {
   let link = getComputedViewLinkByIndex(view, 0);
-  is(link.textContent, text, "Linked text changed to display the correct location");
+  is(link.textContent, text,
+    "Linked text changed to display the correct location");
 }

browser/devtools/styleinspector/test/browser_computedview_pseudo-element_01.js

@@ -4,14 +4,13 @@
 
 "use strict";
 
-// Test that pseudoelements are displayed correctly in the rule view
+// Tests that pseudoelements are displayed correctly in the rule view.
 
 const TEST_URI = TEST_URL_ROOT + "doc_pseudoelement.html";
 
 add_task(function*() {
   yield addTab(TEST_URI);
-  let {toolbox, inspector, view} = yield openComputedView();
-
+  let {inspector, view} = yield openComputedView();
   yield testTopLeft(inspector, view);
 });
 
@@ -22,7 +21,7 @@ function* testTopLeft(inspector, view) {
   is(float, "left", "The computed view shows the correct float");
 
   let children = yield inspector.markup.walker.children(node);
-  is (children.nodes.length, 3, "Element has correct number of children");
+  is(children.nodes.length, 3, "Element has correct number of children");
 
   let beforeElement = children.nodes[0];
   yield selectNode(beforeElement, inspector);
@@ -31,11 +30,10 @@ function* testTopLeft(inspector, view) {
   let left = getComputedViewPropertyValue(view, "left");
   is(left, "0px", "The computed view shows the correct left");
 
-  let afterElement = children.nodes[children.nodes.length-1];
+  let afterElement = children.nodes[children.nodes.length - 1];
   yield selectNode(afterElement, inspector);
   top = getComputedViewPropertyValue(view, "top");
   is(top, "50%", "The computed view shows the correct top");
   left = getComputedViewPropertyValue(view, "left");
   is(left, "50%", "The computed view shows the correct left");
 }
-

browser/devtools/styleinspector/test/browser_computedview_refresh-on-style-change_01.js

@@ -4,17 +4,14 @@
 
 "use strict";
 
-// Test that the computed view refreshes when the current node has its style
-// changed
+// Tests that the computed view refreshes when the current node has its style
+// changed.
 
-const TESTCASE_URI = 'data:text/html;charset=utf-8,' +
-                     '<div id="testdiv" style="font-size:10px;">Test div!</div>';
+const TEST_URI = "<div id='testdiv' style='font-size:10px;'>Test div!</div>";
 
 add_task(function*() {
-  yield addTab(TESTCASE_URI);
-
-  info("Opening the computed view and selecting the test node");
-  let {toolbox, inspector, view} = yield openComputedView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode("#testdiv", inspector);
 
   let fontSize = getComputedViewPropertyValue(view, "font-size");

browser/devtools/styleinspector/test/browser_computedview_search-filter.js

@@ -6,31 +6,25 @@
 
 // Tests that the search filter works properly.
 
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,default styles test");
-
-  info("Creating the test document");
-  content.document.body.innerHTML = '<style type="text/css"> ' +
-    '.matches {color: #F00;}</style>' +
-    '<span id="matches" class="matches">Some styled text</span>' +
-    '</div>';
-  content.document.title = "Style Inspector Search Filter Test";
-
-  info("Opening the computed-view");
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
-
   yield testToggleDefaultStyles(inspector, view);
   yield testAddTextInFilter(inspector, view);
 });
 
-
 function* testToggleDefaultStyles(inspector, computedView) {
   info("checking \"Browser styles\" checkbox");
-
-  let doc = computedView.styleDocument;
   let checkbox = computedView.includeBrowserStylesCheckbox;
   let onRefreshed = inspector.once("computed-view-refreshed");
   checkbox.click();
@@ -39,8 +33,6 @@ function* testToggleDefaultStyles(inspector, computedView) {
 
 function* testAddTextInFilter(inspector, computedView) {
   info("setting filter text to \"color\"");
-
-  let doc = computedView.styleDocument;
   let searchField = computedView.searchField;
   let onRefreshed = inspector.once("computed-view-refreshed");
   searchField.focus();

browser/devtools/styleinspector/test/browser_computedview_search-filter_clear.js

@@ -6,18 +6,18 @@
 
 // Tests that the search filter clear button works properly.
 
-let TEST_URI = [
-  '<style type="text/css">',
-  '  .matches {',
-  '    color: #F00;',
-  '  }',
-  '</style>',
-  '<span id="matches" class="matches">Some styled text</span>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {toolbox, inspector, view} = yield openComputedView();
+  let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
   yield testAddTextInFilter(inspector, view);
   yield testClearSearchFilter(inspector, view);
@@ -27,7 +27,6 @@ function* testAddTextInFilter(inspector, computedView) {
   info("Setting filter text to \"background-color\"");
 
   let win = computedView.styleWindow;
-  let doc = computedView.styleDocument;
   let propertyViews = computedView.propertyViews;
   let searchField = computedView.searchField;
   let checkbox = computedView.includeBrowserStylesCheckbox;
@@ -53,7 +52,6 @@ function* testClearSearchFilter(inspector, computedView) {
   info("Clearing the search filter");
 
   let win = computedView.styleWindow;
-  let doc = computedView.styleDocument;
   let propertyViews = computedView.propertyViews;
   let searchField = computedView.searchField;
   let searchClearButton = computedView.searchClearButton;

browser/devtools/styleinspector/test/browser_computedview_search-filter_context-menu.js

@@ -4,17 +4,15 @@
 
 "use strict";
 
-// Test computed view search filter context menu works properly.
+// Tests computed view search filter context menu works properly.
 
 const TEST_INPUT = "h1";
 
+const TEST_URI = "<h1>test filter context menu</h1>";
+
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,<h1>test filter context menu</h1>");
-
-  info("Opening the computed-view");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
   yield selectNode("h1", inspector);
 
   let win = view.styleWindow;

browser/devtools/styleinspector/test/browser_computedview_search-filter_escape-keypress.js

@@ -6,18 +6,18 @@
 
 // Tests that search filter escape keypress will clear the search field.
 
-let TEST_URI = [
-  '<style type="text/css">',
-  '  .matches {',
-  '    color: #F00;',
-  '  }',
-  '</style>',
-  '<span id="matches" class="matches">Some styled text</span>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-  let {toolbox, inspector, view} = yield openComputedView();
+  let {inspector, view} = yield openComputedView();
   yield selectNode("#matches", inspector);
   yield testAddTextInFilter(inspector, view);
   yield testEscapeKeypress(inspector, view);

browser/devtools/styleinspector/test/browser_computedview_select-and-copy-styles.js

@@ -4,40 +4,42 @@
 
 "use strict";
 
-// Tests that properties can be selected and copied from the computed view
+// Tests that properties can be selected and copied from the computed view.
 
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
 
+const TEST_URI = `
+  <style type="text/css">
+    span {
+      font-variant-caps: small-caps;
+      color: #000000;
+    }
+    .nomatches {
+      color: #ff0000;
+    }
+  </style>
+  <div id="first" style="margin: 10em;
+    font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+    <h1>Some header text</h1>
+    <p id="salutation" style="font-size: 12pt">hi.</p>
+    <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+    solely to provide some things to <span style="color: yellow">
+    highlight</span> and <span style="font-weight: bold">count</span>
+    style list-items in the box at right. If you are reading this,
+    you should go do something else instead. Maybe read a book. Or better
+    yet, write some test-cases for another bit of code.
+    <span style="font-style: italic">some text</span></p>
+    <p id="closing">more text</p>
+    <p>even more text</p>
+  </div>
+`;
+
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,computed view copy test");
-
-  info("Creating the test document");
-  content.document.body.innerHTML = '<style type="text/css"> ' +
-    'span { font-variant-caps: small-caps; color: #000000; } ' +
-    '.nomatches {color: #ff0000;}</style> <div id="first" style="margin: 10em; ' +
-    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">\n' +
-    '<h1>Some header text</h1>\n' +
-    '<p id="salutation" style="font-size: 12pt">hi.</p>\n' +
-    '<p id="body" style="font-size: 12pt">I am a test-case. This text exists ' +
-    'solely to provide some things to <span style="color: yellow">' +
-    'highlight</span> and <span style="font-weight: bold">count</span> ' +
-    'style list-items in the box at right. If you are reading this, ' +
-    'you should go do something else instead. Maybe read a book. Or better ' +
-    'yet, write some test-cases for another bit of code. ' +
-    '<span style="font-style: italic">some text</span></p>\n' +
-    '<p id="closing">more text</p>\n' +
-    '<p>even more text</p>' +
-    '</div>';
-  content.document.title = "Computed view context menu test";
-
-  info("Opening the computed view");
-  let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
   yield selectNode("span", inspector);
-
   yield checkCopySelection(view);
   yield checkSelectAll(view);
 });
@@ -54,7 +56,8 @@ function checkCopySelection(view) {
   range.setEnd(props[3], 3);
   contentDocument.defaultView.getSelection().addRange(range);
 
-  info("Checking that cssHtmlTree.siBoundCopy() returns the correct clipboard value");
+  info("Checking that cssHtmlTree.siBoundCopy() returns the correct " +
+    "clipboard value");
 
   let expectedPattern = "font-family: helvetica,sans-serif;[\\r\\n]+" +
                         "font-size: 16px;[\\r\\n]+" +
@@ -75,7 +78,8 @@ function checkSelectAll(view) {
   let contentDoc = view.styleDocument;
   let prop = contentDoc.querySelector(".property-view");
 
-  info("Checking that _onSelectAll() then copy returns the correct clipboard value");
+  info("Checking that _onSelectAll() then copy returns the correct " +
+    "clipboard value");
   view._contextmenu._onSelectAll();
   let expectedPattern = "color: #FF0;[\\r\\n]+" +
                         "font-family: helvetica,sans-serif;[\\r\\n]+" +

browser/devtools/styleinspector/test/browser_computedview_style-editor-link.js

@@ -11,14 +11,14 @@
 //
 thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Unknown sheet source");
 
-// Test the links from the computed view to the style editor
+// Tests the links from the computed view to the style editor.
 
-const STYLESHEET_URL = "data:text/css,"+encodeURIComponent(
+const STYLESHEET_URL = "data:text/css," + encodeURIComponent(
   [".highlight {",
    "color: blue",
    "}"].join("\n"));
 
-const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
+const DOCUMENT_URL = "data:text/html;charset=utf-8," + encodeURIComponent(
   ['<html>' +
    '<head>' +
    '<title>Computed view style editor link test</title>',
@@ -31,7 +31,7 @@ const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
    '<style>',
    'div { color: #f06; }',
    '</style>',
-   '<link rel="stylesheet" type="text/css" href="'+STYLESHEET_URL+'">',
+   '<link rel="stylesheet" type="text/css" href="' + STYLESHEET_URL + '">',
    '</head>',
    '<body>',
    '<h1>Some header text</h1>',
@@ -52,20 +52,16 @@ const DOCUMENT_URL = "data:text/html;charset=utf-8,"+encodeURIComponent(
 
 add_task(function*() {
   yield addTab(DOCUMENT_URL);
-
-  info("Opening the computed-view");
   let {toolbox, inspector, view} = yield openComputedView();
-
-  info("Selecting the test node");
   yield selectNode("span", inspector);
 
-  yield testInlineStyle(view, inspector);
+  yield testInlineStyle(view);
   yield testFirstInlineStyleSheet(view, toolbox);
   yield testSecondInlineStyleSheet(view, toolbox);
   yield testExternalStyleSheet(view, toolbox);
 });
 
-function* testInlineStyle(view, inspector) {
+function* testInlineStyle(view) {
   info("Testing inline style");
 
   yield expandComputedViewPropertyByIndex(view, 0);
@@ -111,7 +107,8 @@ function* testSecondInlineStyleSheet(view, toolbox) {
   clickLinkByIndex(view, 4);
   let editor = yield onSelected;
 
-  is(toolbox.currentToolId, "styleeditor", "The style editor is selected again");
+  is(toolbox.currentToolId, "styleeditor",
+    "The style editor is selected again");
   validateStyleEditorSheet(editor, 1);
 }
 
@@ -129,14 +126,16 @@ function* testExternalStyleSheet(view, toolbox) {
   clickLinkByIndex(view, 1);
   let editor = yield onSelected;
 
-  is(toolbox.currentToolId, "styleeditor", "The style editor is selected again");
+  is(toolbox.currentToolId, "styleeditor",
+    "The style editor is selected again");
   validateStyleEditorSheet(editor, 2);
 }
 
 function validateStyleEditorSheet(editor, expectedSheetIndex) {
   info("Validating style editor stylesheet");
   let sheet = content.document.styleSheets[expectedSheetIndex];
-  is(editor.styleSheet.href, sheet.href, "loaded stylesheet matches document stylesheet");
+  is(editor.styleSheet.href, sheet.href,
+    "loaded stylesheet matches document stylesheet");
 }
 
 function clickLinkByIndex(view, index) {

browser/devtools/styleinspector/test/browser_ruleview_add-property-and-reselect.js

@@ -5,16 +5,13 @@
 "use strict";
 
 // Tests that adding properties to rules work and reselecting the element still
-// show them
+// show them.
 
 const TEST_URI = TEST_URL_ROOT + "doc_content_stylesheet.html";
 
 add_task(function*() {
   yield addTab(TEST_URI);
-
-  let target = getNode("#target");
-
-  let {toolbox, inspector, view} = yield openRuleView();
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#target", inspector);
 
   info("Setting a font-weight property on all rules");

browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_01.js

@@ -4,19 +4,19 @@
 
 "use strict";
 
-// Tests adding a new property and escapes the new empty property name editor
+// Tests adding a new property and escapes the new empty property name editor.
 
-let TEST_URI = [
-  "<style type='text/css'>",
-  "  #testid {",
-  "    background-color: blue;",
-  "  }",
-  "  .testclass {",
-  "    background-color: green;",
-  "  }",
-  "</style>",
-  "<div id='testid' class='testclass'>Styled Node</div>"
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_02.js

@@ -4,16 +4,16 @@
 
 "use strict";
 
-// Tests adding a new property and escapes the new empty property value editor
+// Tests adding a new property and escapes the new empty property value editor.
 
-let TEST_URI = [
-  "<style type='text/css'>",
-  "  #testid {",
-  "    background-color: blue;",
-  "  }",
-  "</style>",
-  "<div id='testid'>Styled Node</div>"
-].join("\n");
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_add-property-cancel_03.js

@@ -4,19 +4,20 @@
 
 "use strict";
 
-// Tests adding a new property and escapes the property name editor with a value
+// Tests adding a new property and escapes the property name editor with a
+// value.
 
-let TEST_URI = [
-  "<style type='text/css'>",
-  "  #testid {",
-  "    background-color: blue;",
-  "  }",
-  "  .testclass {",
-  "    background-color: green;",
-  "  }",
-  "</style>",
-  "<div id='testid' class='testclass'>Styled Node</div>"
-].join("\n");
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_add-property-svg.js

@@ -4,20 +4,15 @@
 
 "use strict";
 
-// Tests editing SVG styles using the rules view
+// Tests editing SVG styles using the rules view.
 
 let TEST_URL = "chrome://global/skin/icons/warning.svg";
 let TEST_SELECTOR = "path";
 
 add_task(function*() {
   yield addTab(TEST_URL);
-
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Selecting the test element");
+  let {inspector, view} = yield openRuleView();
   yield selectNode(TEST_SELECTOR, inspector);
-
   yield testCreateNew(view);
 });
 
@@ -45,10 +40,13 @@ function* testCreateNew(ruleView) {
 
   editor = inplaceEditor(ruleView.styleDocument.activeElement);
 
-  is(elementRuleEditor.rule.textProps.length,  1, "Should have created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 1, "Should have created a property editor.");
+  is(elementRuleEditor.rule.textProps.length, 1,
+    "Should have created a new text property.");
+  is(elementRuleEditor.propertyList.children.length, 1,
+    "Should have created a property editor.");
   let textProp = elementRuleEditor.rule.textProps[0];
-  is(editor, inplaceEditor(textProp.editor.valueSpan), "Should be editing the value span now.");
+  is(editor, inplaceEditor(textProp.editor.valueSpan),
+    "Should be editing the value span now.");
 
   editor.input.value = "red";
   let onBlur = once(editor.input, "blur");
@@ -58,5 +56,6 @@ function* testCreateNew(ruleView) {
 
   is(textProp.value, "red", "Text prop should have been changed.");
 
-  is((yield getComputedStyleProperty(TEST_SELECTOR, null, "fill")), "rgb(255, 0, 0)", "The fill was changed to red");
+  is((yield getComputedStyleProperty(TEST_SELECTOR, null, "fill")),
+    "rgb(255, 0, 0)", "The fill was changed to red");
 }

browser/devtools/styleinspector/test/browser_ruleview_add-property_01.js

@@ -8,31 +8,22 @@
 // FIXME: To be split in several test files, and some of the inplace-editor
 // focus/blur/commit/revert stuff should be factored out in head.js
 
-let TEST_URL = 'url("' + TEST_URL_ROOT + 'doc_test_image.png")';
-let PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  #testid {',
-  '    background-color: blue;',
-  '  }',
-  '  .testclass {',
-  '    background-color: green;',
-  '  }',
-  '</style>',
-  '<div id="testid" class="testclass">Styled Node</div>'
-].join("\n");
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,test rule view user changes");
-
-  info("Creating the test document");
-  content.document.body.innerHTML = PAGE_CONTENT;
-
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Selecting the test element");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
-
   yield testCreateNew(view);
 });
 
@@ -44,7 +35,8 @@ function* testCreateNew(view) {
   info("Focusing a new property name in the rule-view");
   let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
 
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused");
+  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
+    "The new property editor got focused");
   let input = editor.input;
 
   info("Entering background-color in the property name editor");
@@ -61,9 +53,12 @@ function* testCreateNew(view) {
   editor = inplaceEditor(view.styleDocument.activeElement);
   let textProp = elementRuleEditor.rule.textProps[0];
 
-  is(elementRuleEditor.rule.textProps.length,  1, "Created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 1, "Created a property editor.");
-  is(editor, inplaceEditor(textProp.editor.valueSpan), "Editing the value span now.");
+  is(elementRuleEditor.rule.textProps.length, 1,
+    "Created a new text property.");
+  is(elementRuleEditor.propertyList.children.length, 1,
+    "Created a property editor.");
+  is(editor, inplaceEditor(textProp.editor.valueSpan),
+    "Editing the value span now.");
 
   info("Entering a value and bluring the field to expect a rule change");
   editor.input.value = "#XYZ";

browser/devtools/styleinspector/test/browser_ruleview_add-property_02.js

@@ -4,25 +4,25 @@
 
 "use strict";
 
-// Test all sorts of additions and updates of properties in the rule-view
+// Tests all sorts of additions and updates of properties in the rule-view.
 // FIXME: TO BE SPLIT IN *MANY* SMALLER TESTS
 
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: blue;
+    }
+    .testclass, .unmatched {
+      background-color: green;
+    };
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+  <div id='testid2'>Styled Node</div>
+`;
+
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Creating the test document");
-  let style = "" +
-    "#testid {" +
-    "  background-color: blue;" +
-    "}" +
-    ".testclass, .unmatched {" +
-    "  background-color: green;" +
-    "}";
-  let styleNode = addStyle(content.document, style);
-  content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
-                                    "<div id='testid2'>Styled Node</div>";
-
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield testCreateNew(inspector, view);
 });
 
@@ -39,7 +39,8 @@ function* testCreateNew(inspector, ruleView) {
   ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
     "Editor contents are selected.");
 
-  // Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
+  // Try clicking on the editor's input again, shouldn't cause trouble
+  // (see bug 761665).
   EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
   input.select();
 
@@ -54,10 +55,13 @@ function* testCreateNew(inspector, ruleView) {
 
   editor = inplaceEditor(ruleView.styleDocument.activeElement);
 
-  is(elementRuleEditor.rule.textProps.length,  1, "Should have created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 1, "Should have created a property editor.");
+  is(elementRuleEditor.rule.textProps.length, 1,
+    "Should have created a new text property.");
+  is(elementRuleEditor.propertyList.children.length, 1,
+    "Should have created a property editor.");
   let textProp = elementRuleEditor.rule.textProps[0];
-  is(editor, inplaceEditor(textProp.editor.valueSpan), "Should be editing the value span now.");
+  is(editor, inplaceEditor(textProp.editor.valueSpan),
+    "Should be editing the value span now.");
 
   let onMutated = inspector.once("markupmutation");
   editor.input.value = "purple";

browser/devtools/styleinspector/test/browser_ruleview_add-rule_01.js

@@ -5,22 +5,22 @@
 "use strict";
 
 // Tests the behaviour of adding a new rule to the rule view and the
-// various inplace-editor behaviours in the new rule editor
+// various inplace-editor behaviours in the new rule editor.
 
-let PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  .testclass {',
-  '    text-align: center;',
-  '  }',
-  '</style>',
-  '<div id="testid" class="testclass">Styled Node</div>',
-  '<span class="testclass2">This is a span</span>',
-  '<span class="class1 class2">Multiple classes</span>',
-  '<span class="class3      class4">Multiple classes</span>',
-  '<p>Empty<p>',
-  '<h1 class="asd@@@@a!!!!:::@asd">Invalid characters in class</h1>',
-  '<h2 id="asd@@@a!!2a">Invalid characters in id</h2>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <span class="testclass2">This is a span</span>
+  <span class="class1 class2">Multiple classes</span>
+  <span class="class3      class4">Multiple classes</span>
+  <p>Empty<p>
+  <h1 class="asd@@@@a!!!!:::@asd">Invalid characters in class</h1>
+  <h2 id="asd@@@a!!2a">Invalid characters in id</h2>
+`;
 
 const TEST_DATA = [
   { node: "#testid", expected: "#testid" },
@@ -33,12 +33,9 @@ const TEST_DATA = [
 ];
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
 
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Iterating over the test data");
   for (let data of TEST_DATA) {
     yield runTestData(inspector, view, data, "context-menu");
     yield runTestData(inspector, view, data, "button");
@@ -47,15 +44,12 @@ add_task(function*() {
 
 function* runTestData(inspector, view, data, method) {
   let {node, expected} = data;
-  info("Selecting the test element");
   yield selectNode(node, inspector);
-
   yield addNewRule(inspector, view, method);
-
   yield testNewRule(view, expected, 1);
 
   info("Resetting page content");
-  content.document.body.innerHTML = PAGE_CONTENT;
+  content.document.body.innerHTML = TEST_URI;
 }
 
 function* addNewRule(inspector, view, method) {
@@ -73,11 +67,11 @@ function* addNewRule(inspector, view, method) {
     info("Adding the new rule");
     view._contextmenu.menuitemAddRule.click();
     view._contextmenu._menupopup.hidePopup();
-  }
-  else {
+  } else {
     info("Adding the new rule using the button");
     view.addRuleButton.click();
   }
+
   info("Waiting for rule view to change");
   yield view.once("ruleview-changed");
 }
@@ -94,7 +88,7 @@ function* testNewRule(view, expected, index) {
   is(idRuleEditor.selectorText.textContent, expected,
       "Selector text value is as expected: " + expected);
 
-  info("Adding new properties to new rule: " + expected)
+  info("Adding new properties to new rule: " + expected);
   let onRuleViewChanged = view.once("ruleview-changed");
   idRuleEditor.addProperty("font-weight", "bold", "");
   yield onRuleViewChanged;

browser/devtools/styleinspector/test/browser_ruleview_add-rule_02.js

@@ -5,33 +5,25 @@
 "use strict";
 
 // Tests the behaviour of adding a new rule to the rule view and editing
-// its selector
+// its selector.
 
-let PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  #testid {',
-  '    text-align: center;',
-  '  }',
-  '</style>',
-  '<div id="testid">Styled Node</div>',
-  '<span>This is a span</span>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      text-align: center;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span>This is a span</span>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
-
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Selecting the test element");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
-  info("Waiting for rule view to update");
   let onRuleViewChanged = once(view, "ruleview-changed");
-
-  info("Adding the new rule");
   view.addRuleButton.click();
-
   yield onRuleViewChanged;
 
   yield testEditSelector(view, "span");

browser/devtools/styleinspector/test/browser_ruleview_add-rule_03.js

@@ -5,33 +5,25 @@
 "use strict";
 
 // Tests the behaviour of adding a new rule to the rule view, adding a new
-// property and editing the selector
+// property and editing the selector.
 
-let PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  #testid {',
-  '    text-align: center;',
-  '  }',
-  '</style>',
-  '<div id="testid">Styled Node</div>',
-  '<span>This is a span</span>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      text-align: center;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span>This is a span</span>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
-
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Selecting the test element");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
-  info("Waiting for rule view to change");
   let onRuleViewChanged = once(view, "ruleview-changed");
-
-  info("Adding the new rule");
   view.addRuleButton.click();
-
   yield onRuleViewChanged;
 
   info("Adding new properties to the new rule");
@@ -59,7 +51,7 @@ function* testNewRule(view, expected, index) {
   is(idRuleEditor.selectorText.textContent, expected,
       "Selector text value is as expected: " + expected);
 
-  info("Adding new properties to new rule: " + expected)
+  info("Adding new properties to new rule: " + expected);
   idRuleEditor.addProperty("font-weight", "bold", "");
   let textProps = idRuleEditor.rule.textProps;
   let lastRule = textProps[textProps.length - 1];

browser/devtools/styleinspector/test/browser_ruleview_add-rule_04.js

@@ -5,24 +5,21 @@
 "use strict";
 
 // Tests if the `Add rule` button disables itself properly for non-element nodes
-// and anonymous element
+// and anonymous element.
 
-let PAGE_CONTENT = `
+const TEST_URI = `
   <style type="text/css">
     #pseudo::before {
       content: "before";
     }
   </style>
   <div id="pseudo"></div>
-  <div id="testid">Test Node</div>`;
+  <div id="testid">Test Node</div>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
-
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Running test");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield testDisabledButton(inspector, view);
 });
 

browser/devtools/styleinspector/test/browser_ruleview_add-rule_pseudo_class.js

@@ -4,9 +4,9 @@
 
 "use strict";
 
-// Tests adding a rule with pseudo class locks on
+// Tests adding a rule with pseudo class locks on.
 
-let PAGE_CONTENT = "<p id='element'>Test element</p>";
+const TEST_URI = "<p id='element'>Test element</p>";
 
 const EXPECTED_SELECTOR = "#element";
 const TEST_DATA = [
@@ -20,15 +20,10 @@ const TEST_DATA = [
 ];
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(PAGE_CONTENT));
-
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Selecting the test element");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#element", inspector);
 
-  info("Iterating over the test data");
   for (let data of TEST_DATA) {
     yield runTestData(inspector, view, data);
   }
@@ -68,7 +63,8 @@ function* setPseudoLocks(inspector, view, pseudoClasses) {
   if (pseudoClasses.length == 0) {
     return;
   }
-  for (var pseudoClass of pseudoClasses) {
+
+  for (let pseudoClass of pseudoClasses) {
     switch (pseudoClass) {
       case ":hover":
         view.hoverCheckbox.click();

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_01.js

@@ -4,24 +4,22 @@
 
 "use strict";
 
-// Test that after a color change, the image preview tooltip in the same
+// Tests that after a color change, the image preview tooltip in the same
 // property is displayed and positioned correctly.
 // See bug 979292
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    background: url("chrome://global/skin/icons/warning-64.png"), linear-gradient(white, #F06 400px);',
-  '  }',
-  '</style>',
-  'Testing the color picker tooltip!'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: url("chrome://global/skin/icons/warning-64.png"), linear-gradient(white, #F06 400px);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
-
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
   let value = getRuleViewProperty(view, "body", "background").valueSpan;
   let swatch = value.querySelectorAll(".ruleview-colorswatch")[1];
   let url = value.querySelector(".theme-link");
@@ -30,7 +28,8 @@ add_task(function*() {
 
 function* testImageTooltipAfterColorChange(swatch, url, ruleView) {
   info("First, verify that the image preview tooltip works");
-  let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
+  let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip,
+                                          url);
   ok(anchor, "The image preview tooltip is shown on the url span");
   is(anchor, url, "The anchor returned by the showOnHover callback is correct");
 
@@ -53,7 +52,8 @@ function* testImageTooltipAfterColorChange(swatch, url, ruleView) {
   info("Verify again that the image preview tooltip works");
   // After a color change, the property is re-populated, we need to get the new
   // dom node
-  url = getRuleViewProperty(ruleView, "body", "background").valueSpan.querySelector(".theme-link");
+  url = getRuleViewProperty(ruleView, "body", "background").valueSpan
+    .querySelector(".theme-link");
   anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
   ok(anchor, "The image preview tooltip is shown on the url span");
   is(anchor, url, "The anchor returned by the showOnHover callback is correct");

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-and-image-tooltip_02.js

@@ -4,25 +4,29 @@
 
 "use strict";
 
-// Test that after a color change, opening another tooltip, like the image
-// preview doesn't revert the color change in the ruleView.
+// Tests that after a color change, opening another tooltip, like the image
+// preview doesn't revert the color change in the rule view.
 // This used to happen when the activeSwatch wasn't reset when the colorpicker
 // would hide.
 // See bug 979292
 
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red url("chrome://global/skin/icons/warning-64.png")
+        no-repeat center center;
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
 const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    background: red url("chrome://global/skin/icons/warning-64.png") no-repeat center center;',
-  '  }',
-  '</style>',
-  'Testing the color picker tooltip!'
+
 ].join("\n");
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
   yield testColorChangeIsntRevertedWhenOtherTooltipIsShown(view);
 });
 
@@ -50,12 +54,14 @@ function* testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
   let value = getRuleViewProperty(ruleView, "body", "background").valueSpan;
   let url = value.querySelector(".theme-link");
   onShown = ruleView.tooltips.previewTooltip.once("shown");
-  let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip, url);
+  let anchor = yield isHoverTooltipTarget(ruleView.tooltips.previewTooltip,
+                                          url);
   ruleView.tooltips.previewTooltip.show(anchor);
   yield onShown;
 
   info("Image tooltip is shown, verify that the swatch is still correct");
   swatch = value.querySelector(".ruleview-colorswatch");
-  is(swatch.style.backgroundColor, "rgb(0, 0, 0)", "The swatch's color is correct");
+  is(swatch.style.backgroundColor, "rgb(0, 0, 0)",
+    "The swatch's color is correct");
   is(swatch.nextSibling.textContent, "#000", "The color name is correct");
 }

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-appears-on-swatch-click.js

@@ -4,24 +4,23 @@
 
 "use strict";
 
-// Test that color pickers appear when clicking on color swatches
+// Tests that color pickers appear when clicking on color swatches.
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    color: red;',
-  '    background-color: #ededed;',
-  '    background-image: url(chrome://global/skin/icons/warning-64.png);',
-  '    border: 2em solid rgba(120, 120, 120, .5);',
-  '  }',
-  '</style>',
-  'Testing the color picker tooltip!'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://global/skin/icons/warning-64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
 
   let cSwatch = getRuleViewProperty(view, "body", "color").valueSpan
     .querySelector(".ruleview-colorswatch");

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-commit-on-ENTER.js

@@ -4,23 +4,23 @@
 
 "use strict";
 
-// Test that a color change in the color picker is committed when ENTER is pressed
+// Tests that a color change in the color picker is committed when ENTER is
+// pressed.
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    border: 2em solid rgba(120, 120, 120, .5);',
-  '  }',
-  '</style>',
-  'Testing the color picker tooltip!'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
 
-  let swatch = getRuleViewProperty(view, "body" , "border").valueSpan
+  let swatch = getRuleViewProperty(view, "body", "border").valueSpan
     .querySelector(".ruleview-colorswatch");
   yield testPressingEnterCommitsChanges(swatch, view);
 });
@@ -42,7 +42,7 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) {
     "The color swatch's background was updated");
   is(getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
     "2em solid rgba(0, 255, 0, 0.5)",
-    "The text of the border css property was updated");;
+    "The text of the border css property was updated");
 
   let spectrum = yield cPicker.spectrum;
   let onHidden = cPicker.tooltip.once("hidden");

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-edit-gradient.js

@@ -4,26 +4,21 @@
 
 "use strict";
 
-// Test that changing a color in a gradient css declaration using the tooltip
-// color picker works
+// Tests that changing a color in a gradient css declaration using the tooltip
+// color picker works.
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    background-image: linear-gradient(to left, #f06 25%, #333 95%, #000 100%);',
-  '  }',
-  '</style>',
-  'Updating a gradient declaration with the color picker tooltip'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-image: linear-gradient(to left, #f06 25%, #333 95%, #000 100%);
+    }
+  </style>
+  Updating a gradient declaration with the color picker tooltip
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
-
-  info("Creating the test document");
-  content.document.body.innerHTML = PAGE_CONTENT;
-
-  info("Opening the rule-view")
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
 
   info("Testing that the colors in gradient properties are parsed correctly");
   testColorParsing(view);
@@ -45,7 +40,7 @@ function testColorParsing(view) {
   is(colorEls.length, 3, "There are 3 color values");
 
   let colors = ["#F06", "#333", "#000"];
-  for (let i = 0; i < colors.length; i ++) {
+  for (let i = 0; i < colors.length; i++) {
     is(colorEls[i].textContent, colors[i], "The right color value was found");
   }
 }
@@ -73,7 +68,8 @@ function* testPickingNewColor(view) {
     "The color swatch's background was updated");
   is(colorEl.textContent, "#010101", "The color text was updated");
   is(content.getComputedStyle(content.document.body).backgroundImage,
-    "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)",
+    "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, " +
+      "rgb(0, 0, 0) 100%)",
     "The gradient has been updated correctly");
 
   cPicker.hide();

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-hides-on-tooltip.js

@@ -4,24 +4,23 @@
 
 "use strict";
 
-// Test that the color picker tooltip hides when an image tooltip appears
+// Tests that the color picker tooltip hides when an image tooltip appears.
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    color: red;',
-  '    background-color: #ededed;',
-  '    background-image: url(chrome://global/skin/icons/warning-64.png);',
-  '    border: 2em solid rgba(120, 120, 120, .5);',
-  '  }',
-  '</style>',
-  'Testing the color picker tooltip!'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://global/skin/icons/warning-64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
 
   let swatch = getRuleViewProperty(view, "body", "color").valueSpan
     .querySelector(".ruleview-colorswatch");
@@ -30,7 +29,8 @@ add_task(function*() {
 });
 
 function* testColorPickerHidesWhenImageTooltipAppears(view, swatch) {
-  let bgImageSpan = getRuleViewProperty(view, "body", "background-image").valueSpan;
+  let bgImageSpan = getRuleViewProperty(view, "body", "background-image")
+    .valueSpan;
   let uriSpan = bgImageSpan.querySelector(".theme-link");
   let tooltip = view.tooltips.colorPicker.tooltip;
 

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-multiple-changes.js

@@ -4,30 +4,30 @@
 
 "use strict";
 
-// Test that the color in the colorpicker tooltip can be changed several times
+// Tests that the color in the colorpicker tooltip can be changed several times.
 // without causing error in various cases:
 // - simple single-color property (color)
 // - color and image property (background-image)
 // - overridden property
 // See bug 979292 and bug 980225
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    color: green;',
-  '    background: red url("chrome://global/skin/icons/warning-64.png") no-repeat center center;',
-  '  }',
-  '  p {',
-  '    color: blue;',
-  '  }',
-  '</style>',
-  '<p>Testing the color picker tooltip!</p>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: green;
+      background: red url("chrome://global/skin/icons/warning-64.png")
+        no-repeat center center;
+    }
+    p {
+      color: blue;
+    }
+  </style>
+  <p>Testing the color picker tooltip!</p>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
 
   yield testSimpleMultipleColorChanges(inspector, view);
   yield testComplexMultipleColorChanges(inspector, view);

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-release-outside-frame.js

@@ -4,15 +4,14 @@
 
 "use strict";
 
-// Test that color pickers stops following the pointer if the pointer is
+// Tests that color pickers stops following the pointer if the pointer is
 // released outside the tooltip frame (bug 1160720).
 
-const PAGE_CONTENT = "data:text/html;charset=utf-8," +
-  '<body style="color: red">Test page for bug 1160720';
+const TEST_URI = "<body style='color: red'>Test page for bug 1160720";
 
 add_task(function*() {
-  yield addTab(PAGE_CONTENT);
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
 
   let cSwatch = getRuleViewProperty(view, "element", "color").valueSpan
     .querySelector(".ruleview-colorswatch");

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-revert-on-ESC.js

@@ -4,15 +4,16 @@
 
 "use strict";
 
-// Test that a color change in the color picker is reverted when ESC is pressed
+// Tests that a color change in the color picker is reverted when ESC is
+// pressed.
 
-let TEST_URI = [
-  "<style type='text/css'>",
-  "  body {",
-  "    background-color: #EDEDED;",
-  "  }",
-  "</style>",
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-color: #EDEDED;
+    }
+  </style>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_colorpicker-swatch-displayed.js

@@ -4,25 +4,25 @@
 
 "use strict";
 
-// Test that color swatches are displayed next to colors in the rule-view
+// Tests that color swatches are displayed next to colors in the rule-view.
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    color: red;',
-  '    background-color: #ededed;',
-  '    background-image: url(chrome://global/skin/icons/warning-64.png);',
-  '    border: 2em solid rgba(120, 120, 120, .5);',
-  '  }',
-  '  * {',
-  '    color: blue;',
-  '    box-shadow: inset 0 0 2px 20px red, inset 0 0 2px 40px blue;',
-  '  }',
-  '</style>',
-  'Testing the color picker tooltip!'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://global/skin/icons/warning-64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+    * {
+      color: blue;
+      box-shadow: inset 0 0 2px 20px red, inset 0 0 2px 40px blue;
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
 
-// Tests that properties in the rule-view contain color swatches
+// Tests that properties in the rule-view contain color swatches.
 // Each entry in the test array should contain:
 // {
 //   selector: the rule-view selector to look for the property in
@@ -38,9 +38,8 @@ const TESTS = [
 ];
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view color picker tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
 
   for (let {selector, propertyName, nb} of TESTS) {
     info("Looking for color swatches in property " + propertyName +

browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_01.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-// Test that CSS property names are autocompleted and cycled correctly when
-// editing an existing property in the rule view
+// Tests that CSS property names are autocompleted and cycled correctly when
+// editing an existing property in the rule view.
 
 const MAX_ENTRIES = 10;
 
@@ -18,8 +18,8 @@ const MAX_ENTRIES = 10;
 //  ]
 let testData = [
   ["VK_RIGHT", "font", -1, 0],
-  ["-","font-family", 0, MAX_ENTRIES],
-  ["f","font-family", 0, 2],
+  ["-", "font-family", 0, MAX_ENTRIES],
+  ["f", "font-family", 0, 2],
   ["VK_BACK_SPACE", "font-f", -1, 0],
   ["VK_BACK_SPACE", "font-", -1, 0],
   ["VK_BACK_SPACE", "font", -1, 0],
@@ -54,11 +54,10 @@ let testData = [
   ["VK_ESCAPE", null, -1, 0],
 ];
 
-let TEST_URL = "data:text/html;charset=utf-8,<h1 style='font: 24px serif'>Filename" +
-               ": browser_bug893965_css_property_completion_existing_property.js</h1>";
+const TEST_URI = "<h1 style='font: 24px serif'>Header</h1>";
 
 add_task(function*() {
-  yield addTab(TEST_URL);
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Test autocompletion after 1st page load");
@@ -74,7 +73,8 @@ function* runAutocompletionTest(toolbox, inspector, view) {
   yield selectNode("h1", inspector);
 
   info("Focusing the css property editable field");
-  let propertyName = view.styleDocument.querySelectorAll(".ruleview-propertyname")[0];
+  let propertyName = view.styleDocument
+    .querySelectorAll(".ruleview-propertyname")[0];
   let editor = yield focusEditableField(view, propertyName);
 
   info("Starting to test for css property completion");
@@ -90,7 +90,8 @@ function* testCompletion([key, completion, index, total], editor, view) {
   let onSuggest;
 
   if (/(left|right|back_space|escape|home|end|page_up|page_down)/ig.test(key)) {
-    info("Adding event listener for left|right|back_space|escape|home|end|page_up|page_down keys");
+    info("Adding event listener for " +
+      "left|right|back_space|escape|home|end|page_up|page_down keys");
     onSuggest = once(editor.input, "keypress");
   } else {
     info("Waiting for after-suggest event on the editor");
@@ -110,7 +111,8 @@ function* testCompletion([key, completion, index, total], editor, view) {
   if (total == 0) {
     ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
   } else {
-    ok(editor.popup._panel.state == "open" || editor.popup._panel.state == "showing", "Popup is open");
+    ok(editor.popup._panel.state == "open" ||
+       editor.popup._panel.state == "showing", "Popup is open");
     is(editor.popup.getItems().length, total, "Number of suggestions match");
     is(editor.popup.selectedIndex, index, "Correct item is selected");
   }

browser/devtools/styleinspector/test/browser_ruleview_completion-existing-property_02.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-// Test that CSS property names and values are autocompleted and cycled correctly
-// when editing existing properties in the rule view
+// Tests that CSS property names and values are autocompleted and cycled
+// correctly when editing existing properties in the rule view.
 
 // format :
 //  [
@@ -36,11 +36,10 @@ let testData = [
   ["VK_RETURN", {}, null, -1, 0]
 ];
 
-let TEST_URL = "data:text/html;charset=utf-8,<h1 style='color: red'>Filename: " +
-               "browser_bug894376_css_value_completion_existing_property_value_pair.js</h1>";
+const TEST_URI = "<h1 style='color: red'>Header</h1>";
 
 add_task(function*() {
-  yield addTab(TEST_URL);
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Test autocompletion after 1st page load");
@@ -68,7 +67,8 @@ function* runAutocompletionTest(toolbox, inspector, view) {
   }
 }
 
-function* testCompletion([key, modifiers, completion, index, total], editor, view) {
+function* testCompletion([key, modifiers, completion, index, total], editor,
+    view) {
   info("Pressing key " + key);
   info("Expecting " + completion + ", " + index + ", " + total);
 
@@ -103,7 +103,8 @@ function* testCompletion([key, modifiers, completion, index, total], editor, vie
   if (total == 0) {
     ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
   } else {
-    ok(editor.popup._panel.state == "open" || editor.popup._panel.state == "showing", "Popup is open");
+    ok(editor.popup._panel.state == "open" ||
+       editor.popup._panel.state == "showing", "Popup is open");
     is(editor.popup.getItems().length, total, "Number of suggestions match");
     is(editor.popup.selectedIndex, index, "Correct item is selected");
   }

browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_01.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-// Test that CSS property names are autocompleted and cycled correctly when
-// creating a new property in the ruleview
+// Tests that CSS property names are autocompleted and cycled correctly when
+// creating a new property in the rule view.
 
 const MAX_ENTRIES = 10;
 
@@ -37,11 +37,10 @@ let testData = [
   ["VK_ESCAPE", null, -1, 0],
 ];
 
-let TEST_URL = "data:text/html;charset=utf-8,<h1 style='border: 1px solid red'>Filename:" +
-               "browser_bug893965_css_property_completion_new_property.js</h1>";
+const TEST_URI = "<h1 style='border: 1px solid red'>Header</h1>";
 
 add_task(function*() {
-  yield addTab(TEST_URL);
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Test autocompletion after 1st page load");
@@ -93,7 +92,8 @@ function* testCompletion([key, completion, index, total], editor, view) {
   if (total == 0) {
     ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
   } else {
-    ok(editor.popup._panel.state == "open" || editor.popup._panel.state == "showing", "Popup is open");
+    ok(editor.popup._panel.state == "open" ||
+       editor.popup._panel.state == "showing", "Popup is open");
     is(editor.popup.getItems().length, total, "Number of suggestions match");
     is(editor.popup.selectedIndex, index, "Correct item is selected");
   }

browser/devtools/styleinspector/test/browser_ruleview_completion-new-property_02.js

@@ -4,8 +4,8 @@
 
 "use strict";
 
-// Test that CSS property names and values are autocompleted and cycled correctly
-// when editing new properties in the rule view
+// Tests that CSS property names and values are autocompleted and cycled
+// correctly when editing new properties in the rule view.
 
 // format :
 //  [
@@ -39,11 +39,17 @@ let testData = [
   ["VK_ESCAPE", {}, null, -1, 0]
 ];
 
-let TEST_URL = "data:text/html;charset=utf-8,<style>h1{border: 1px solid red}</style>" +
-  "<h1>Test element</h1>";
+const TEST_URI = `
+  <style type="text/css">
+    h1 {
+      border: 1px solid red;
+    }
+  </style>
+  <h1>Test element</h1>
+`;
 
 add_task(function*() {
-  yield addTab(TEST_URL);
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {toolbox, inspector, view} = yield openRuleView();
 
   info("Test autocompletion after 1st page load");
@@ -63,7 +69,7 @@ function* runAutocompletionTest(toolbox, inspector, view) {
   let editor = yield focusEditableField(view, brace);
 
   info("Starting to test for css property completion");
-  for (let i = 0; i < testData.length; i ++) {
+  for (let i = 0; i < testData.length; i++) {
     // Re-define the editor at each iteration, because the focus may have moved
     // from property to value and back
     editor = inplaceEditor(view.styleDocument.activeElement);
@@ -71,7 +77,8 @@ function* runAutocompletionTest(toolbox, inspector, view) {
   }
 }
 
-function* testCompletion([key, modifiers, completion, index, total], editor, view) {
+function* testCompletion([key, modifiers, completion, index, total], editor,
+    view) {
   info("Pressing key " + key);
   info("Expecting " + completion + ", " + index + ", " + total);
 
@@ -106,7 +113,8 @@ function* testCompletion([key, modifiers, completion, index, total], editor, vie
   if (total == 0) {
     ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
   } else {
-    ok(editor.popup._panel.state == "open" || editor.popup._panel.state == "showing", "Popup is open");
+    ok(editor.popup._panel.state == "open" ||
+       editor.popup._panel.state == "showing", "Popup is open");
     is(editor.popup.getItems().length, total, "Number of suggestions match");
     is(editor.popup.selectedIndex, index, "Correct item is selected");
   }

browser/devtools/styleinspector/test/browser_ruleview_completion-popup-hidden-after-navigation.js

@@ -4,12 +4,12 @@
 
 "use strict";
 
-// Test that the ruleview autocomplete popup is hidden after page navigation
+// Tests that the ruleview autocomplete popup is hidden after page navigation.
 
-let TEST_URL = "data:text/html;charset=utf-8,<h1 style='font: 24px serif'></h1>";
+const TEST_URI = "<h1 style='font: 24px serif'></h1>";
 
 add_task(function*() {
-  yield addTab(TEST_URL);
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   info("Test autocompletion popup is hidden after page navigation");
@@ -18,7 +18,8 @@ add_task(function*() {
   yield selectNode("h1", inspector);
 
   info("Focusing the css property editable field");
-  let propertyName = view.styleDocument.querySelectorAll(".ruleview-propertyname")[0];
+  let propertyName = view.styleDocument
+    .querySelectorAll(".ruleview-propertyname")[0];
   let editor = yield focusEditableField(view, propertyName);
 
   info("Pressing key VK_DOWN");

browser/devtools/styleinspector/test/browser_ruleview_context-menu-show-mdn-docs-01.js

@@ -23,31 +23,29 @@ const {setBaseCssDocsUrl} = require("devtools/shared/widgets/MdnDocsWidget");
  * code by having a tag called "padding" and a property
  * value called "margin".
  */
-const TEST_DOC =`
-<html>
-  <head>
-    <style>
-      padding {font-family: margin;}
-    </style>
-  </head>
+const TEST_URI = `
+  <html>
+    <head>
+      <style>
+        padding {font-family: margin;}
+      </style>
+    </head>
 
-  <body>
-    <padding>MDN tooltip testing</padding>
-  </body>
-</html>`;
+    <body>
+      <padding>MDN tooltip testing</padding>
+    </body>
+  </html>
+`;
 
 add_task(function* () {
-
-  yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_DOC));
-
+  yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("padding", inspector);
-
   yield testMdnContextMenuItemVisibility(view);
 });
 
 /**
- * Test that the MDN context menu item is shown when it should be,
+ * Tests that the MDN context menu item is shown when it should be,
  * and hidden when it should be.
  *   - iterate through every node in the rule view
  *   - set that node as popupNode (the node that the context menu
@@ -68,9 +66,10 @@ function* testMdnContextMenuItemVisibility(view) {
     view._contextmenu._updateMenuItems();
     let isVisible = !view._contextmenu.menuitemShowMdnDocs.hidden;
     let shouldBeVisible = isPropertyNameNode(node);
-    let message = shouldBeVisible? "shown": "hidden";
+    let message = shouldBeVisible ? "shown" : "hidden";
     is(isVisible, shouldBeVisible,
-       "The MDN context menu item is " + message + " ; content : " + node.textContent + " ; type : " + node.nodeType);
+       "The MDN context menu item is " + message + " ; content : " +
+       node.textContent + " ; type : " + node.nodeType);
   }
 }
 

browser/devtools/styleinspector/test/browser_ruleview_context-menu-show-mdn-docs-02.js

@@ -22,21 +22,19 @@ const {setBaseCssDocsUrl} = require("devtools/shared/widgets/MdnDocsWidget");
 const PROPERTYNAME = "color";
 
 const TEST_DOC = `
-<html>
-  <body>
-    <div style="color: red">
-      Test "Show MDN Docs" context menu option
-    </div>
-  </body>
-</html>`;
+  <html>
+    <body>
+      <div style="color: red">
+        Test "Show MDN Docs" context menu option
+      </div>
+    </body>
+  </html>
+`;
 
 add_task(function* () {
-
   yield addTab("data:text/html;charset=utf8," + encodeURIComponent(TEST_DOC));
-
   let {inspector, view} = yield openRuleView();
   yield selectNode("div", inspector);
-
   yield testShowAndHideMdnTooltip(view);
 });
 

browser/devtools/styleinspector/test/browser_ruleview_context-menu-show-mdn-docs-03.js

@@ -15,17 +15,19 @@
 "use strict";
 
 const { PrefObserver } = require("devtools/styleeditor/utils");
-const PREF_ENABLE_MDN_DOCS_TOOLTIP = "devtools.inspector.mdnDocsTooltip.enabled";
+const PREF_ENABLE_MDN_DOCS_TOOLTIP =
+  "devtools.inspector.mdnDocsTooltip.enabled";
 const PROPERTY_NAME_CLASS = "ruleview-propertyname";
 
 const TEST_DOC = `
-<html>
-  <body>
-    <div style="color: red">
-      Test the pref to enable/disable the "Show MDN Docs" context menu option
-    </div>
-  </body>
-</html>`;
+  <html>
+    <body>
+      <div style="color: red">
+        Test the pref to enable/disable the "Show MDN Docs" context menu option
+      </div>
+    </body>
+  </html>
+`;
 
 add_task(function* () {
   info("Ensure the pref is true to begin with");
@@ -95,7 +97,7 @@ function* setBooleanPref(pref, state) {
  * menu item to be visible or not.
  */
 function* testMdnContextMenuItemVisibility(view, shouldBeVisible) {
-  let message = shouldBeVisible? "shown": "hidden";
+  let message = shouldBeVisible ? "shown" : "hidden";
   info("Test that MDN context menu item is " + message);
 
   info("Set a CSS property name as popupNode");

browser/devtools/styleinspector/test/browser_ruleview_copy_styles.js

@@ -6,14 +6,14 @@
 
 /**
  * Tests the behaviour of the copy styles context menu items in the rule
- * view
+ * view.
  */
 
 XPCOMUtils.defineLazyGetter(this, "osString", function() {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
 
-let TEST_URI = TEST_URL_ROOT + "doc_copystyles.html";
+const TEST_URI = TEST_URL_ROOT + "doc_copystyles.html";
 
 add_task(function*() {
   yield addTab(TEST_URI);

browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-appears-on-swatch-click.js

@@ -4,26 +4,26 @@
 
 "use strict";
 
-// Test that cubic-bezier pickers appear when clicking on cubic-bezier swatches
+// Tests that cubic-bezier pickers appear when clicking on cubic-bezier
+// swatches.
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  div {',
-  '    animation: move 3s linear;',
-  '    transition: top 4s cubic-bezier(.1, 1.45, 1, -1.2);',
-  '  }',
-  '  .test {',
-  '    animation-timing-function: ease-in-out;',
-  '    transition-timing-function: ease-out;',
-  '  }',
-  '</style>',
-  '<div class="test">Testing the cubic-bezier tooltip!</div>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      animation: move 3s linear;
+      transition: top 4s cubic-bezier(.1, 1.45, 1, -1.2);
+    }
+    .test {
+      animation-timing-function: ease-in-out;
+      transition-timing-function: ease-out;
+    }
+  </style>
+  <div class="test">Testing the cubic-bezier tooltip!</div>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view cubic-bezier tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("div", inspector);
 
   let swatches = [];

browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-commit-on-ENTER.js

@@ -4,24 +4,23 @@
 
 "use strict";
 
-// Test that a curve change in the cubic-bezier tooltip is committed when ENTER
-// is pressed
+// Tests that a curve change in the cubic-bezier tooltip is committed when ENTER
+// is pressed.
 
-const PAGE_CONTENT = [
-  '<style type="text/css">',
-  '  body {',
-  '    transition: top 2s linear;',
-  '  }',
-  '</style>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      transition: top 2s linear;
+    }
+  </style>
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,rule view cubic-bezier tooltip test");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {view} = yield openRuleView();
 
   info("Getting the bezier swatch element");
-  let swatch = getRuleViewProperty(view, "body" , "transition").valueSpan
+  let swatch = getRuleViewProperty(view, "body", "transition").valueSpan
     .querySelector(".ruleview-bezierswatch");
 
   yield testPressingEnterCommitsChanges(swatch, view);
@@ -41,7 +40,8 @@ function* testPressingEnterCommitsChanges(swatch, ruleView) {
   let expected = "cubic-bezier(0.1, 2, 0.9, -1)";
 
   yield waitForSuccess(() => {
-    return content.getComputedStyle(content.document.body).transitionTimingFunction === expected;
+    return content.getComputedStyle(content.document.body)
+      .transitionTimingFunction === expected;
   }, "Waiting for the change to be previewed on the element");
 
   ok(getRuleViewProperty(ruleView, "body", "transition").valueSpan.textContent

browser/devtools/styleinspector/test/browser_ruleview_cubicbezier-revert-on-ESC.js

@@ -4,16 +4,16 @@
 
 "use strict";
 
-// Test that changes made to the cubic-bezier timing-function in the
-// cubic-bezier tooltip are reverted when ESC is pressed
+// Tests that changes made to the cubic-bezier timing-function in the
+// cubic-bezier tooltip are reverted when ESC is pressed.
 
-let TEST_URI = [
-  "<style type='text/css'>",
-  "  body {",
-  "    animation-timing-function: linear;",
-  "  }",
-  "</style>",
-].join("\n");
+const TEST_URI = `
+  <style type='text/css'>
+    body {
+      animation-timing-function: linear;
+    }
+  </style>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_custom.js

@@ -6,7 +6,7 @@
 
 const TEST_URI = TEST_URL_ROOT + "doc_custom.html";
 
-// Test the display of custom declarations in the rule-view
+// Tests the display of custom declarations in the rule-view.
 
 add_task(function*() {
   yield addTab(TEST_URI);

browser/devtools/styleinspector/test/browser_ruleview_cycle-color.js

@@ -6,21 +6,18 @@
 
 // Test cycling color types in the rule view.
 
-const PAGE_CONTENT = [
-  "<style type=\"text/css\">",
-  "  body {",
-  "    color: #F00;",
-  "  }",
-  "</style>",
-  "Test cycling color types in the rule view!"
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: #F00;
+    }
+  </style>
+  Test cycling color types in the rule view!
+`;
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,Test cycling color types in the " +
-               "rule view.");
-  content.document.body.innerHTML = PAGE_CONTENT;
-  let {toolbox, inspector, view} = yield openRuleView();
-
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   let container = getRuleViewProperty(view, "body", "color").valueSpan;
   checkColorCycling(container, inspector);
 });
@@ -34,27 +31,32 @@ function checkColorCycling(container, inspector) {
   is(valueNode.textContent, "#F00", "Color displayed as a hex value.");
 
   // HSL
-  EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
+  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);
+  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);
+  EventUtils.synthesizeMouseAtCenter(swatch,
+                                     {type: "mousedown", shiftKey: true}, win);
   is(valueNode.textContent, "red",
                             "Color displayed as a color name.");
 
   // "Authored" (currently the computed value)
-  EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
+  EventUtils.synthesizeMouseAtCenter(swatch,
+                                     {type: "mousedown", shiftKey: true}, win);
   is(valueNode.textContent, "rgb(255, 0, 0)",
                             "Color displayed as an RGB value.");
 
   // Back to hex
-  EventUtils.synthesizeMouseAtCenter(swatch, {type: "mousedown", shiftKey: true}, win);
+  EventUtils.synthesizeMouseAtCenter(swatch,
+                                     {type: "mousedown", shiftKey: true}, win);
   is(valueNode.textContent, "#F00",
                             "Color displayed as hex again.");
 }

browser/devtools/styleinspector/test/browser_ruleview_edit-property-cancel.js

@@ -7,14 +7,14 @@
 // Tests editing a property name or value and escaping will revert the
 // changes and restore the original value.
 
-let TEST_URI = [
-  "<style type='text/css'>",
-  "#testid {",
-  "  background-color: #00F;",
-  "}",
-  "</style>",
-  "<div id='testid'>Styled Node</div>",
-].join("\n");
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_edit-property-commit.js

@@ -7,7 +7,14 @@
 // Test original value is correctly displayed when ESCaping out of the
 // inplace editor in the style inspector.
 
-const originalValue = "#00F";
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
 
 // Test data format
 // {
@@ -17,44 +24,41 @@ const originalValue = "#00F";
 //  expected: what value is expected as a result
 // }
 const testData = [
-  {value: "red", commitKey: "VK_ESCAPE", modifiers: {}, expected: originalValue},
-  {value: "red", commitKey: "VK_RETURN", modifiers: {}, expected: "red"},
-  {value: "invalid", commitKey: "VK_RETURN", modifiers: {}, expected: "invalid"},
-  {value: "blue", commitKey: "VK_TAB", modifiers: {shiftKey: true}, expected: "blue"}
+  {
+    value: "red",
+    commitKey: "VK_ESCAPE",
+    modifiers: {},
+    expected: "#00F"
+  },
+  {
+    value: "red",
+    commitKey: "VK_RETURN",
+    modifiers: {},
+    expected: "red"
+  },
+  {
+    value: "invalid",
+    commitKey: "VK_RETURN",
+    modifiers: {},
+    expected: "invalid"
+  },
+  {
+    value: "blue",
+    commitKey: "VK_TAB", modifiers: {shiftKey: true},
+    expected: "blue"
+  }
 ];
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,test escaping property change reverts back to original value");
-
-  info("Creating the test document");
-  createDocument();
-
-  info("Opening the rule view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Selecting the test node");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
-  info("Iterating over the test data");
   for (let data of testData) {
     yield runTestData(view, data);
   }
 });
 
-function createDocument() {
-  let style = '' +
-    '#testid {' +
-    '  color: ' + originalValue + ';' +
-    '}';
-
-  let node = content.document.createElement('style');
-  node.setAttribute("type", "text/css");
-  node.textContent = style;
-  content.document.getElementsByTagName("head")[0].appendChild(node);
-
-  content.document.body.innerHTML = '<div id="testid">Styled Node</div>';
-}
-
 function* runTestData(view, {value, commitKey, modifiers, expected}) {
   let idRuleEditor = getRuleViewRuleEditor(view, 1);
   let propEditor = idRuleEditor.rule.textProps[0].editor;
@@ -62,7 +66,8 @@ function* runTestData(view, {value, commitKey, modifiers, expected}) {
   info("Focusing the inplace editor field");
 
   let editor = yield focusEditableField(view, propEditor.valueSpan);
-  is(inplaceEditor(propEditor.valueSpan), editor, "Focused editor should be the value span.");
+  is(inplaceEditor(propEditor.valueSpan), editor,
+    "Focused editor should be the value span.");
 
   info("Entering test data " + value);
   let onRuleViewChanged = view.once("ruleview-changed");
@@ -79,8 +84,10 @@ function* runTestData(view, {value, commitKey, modifiers, expected}) {
   yield onRuleViewChanged;
 
   if (commitKey === "VK_ESCAPE") {
-    is(propEditor.valueSpan.textContent, expected, "Value is as expected: " + expected);
+    is(propEditor.valueSpan.textContent, expected,
+      "Value is as expected: " + expected);
   } else {
-    is(propEditor.valueSpan.textContent, expected, "Value is as expected: " + expected);
+    is(propEditor.valueSpan.textContent, expected,
+      "Value is as expected: " + expected);
   }
 }

browser/devtools/styleinspector/test/browser_ruleview_edit-property-computed.js

@@ -6,16 +6,17 @@
 
 // Test that the computed values of a style (the shorthand expansion) are
 // properly updated after the style is changed.
-add_task(function*() {
-  let TEST_URI = [
-    '<style type="text/css">',
-    '  #testid {',
-    '    padding: 10px;',
-    '  }',
-    '</style>',
-    '<div id="testid">Styled Node</div>'
-  ].join('\n');
 
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      padding: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
@@ -30,14 +31,17 @@ function* editAndCheck(view) {
 
   info("Focusing the inplace editor field");
   let editor = yield focusEditableField(view, propEditor.valueSpan);
-  is(inplaceEditor(propEditor.valueSpan), editor, "Focused editor should be the value span.");
+  is(inplaceEditor(propEditor.valueSpan), editor,
+    "Focused editor should be the value span.");
 
-  let onPropertyChange = waitForComputedStyleProperty("#testid", null, "padding-top", newPaddingValue);
+  let onPropertyChange = waitForComputedStyleProperty("#testid", null,
+    "padding-top", newPaddingValue);
 
   info("Entering a new value");
   EventUtils.sendString(newPaddingValue, view.styleWindow);
 
-  info("Waiting for the throttled previewValue to apply the changes to document");
+  info("Waiting for the throttled previewValue to apply the " +
+    "changes to document");
   yield onPropertyChange;
 
   let onBlur = once(editor.input, "blur");
@@ -61,15 +65,19 @@ function* editAndCheck(view) {
 
   is(computed.length, propNames.length, "There should be 4 computed values");
   propNames.forEach((propName, i) => {
-    is(computed[i].name, propName, "Computed property #" + i + " has name " + propName);
-    is(computed[i].value, newPaddingValue, "Computed value of " + propName + " is as expected");
+    is(computed[i].name, propName,
+      "Computed property #" + i + " has name " + propName);
+    is(computed[i].value, newPaddingValue,
+      "Computed value of " + propName + " is as expected");
   });
 
   propEditor.expander.click();
   let computedDom = propEditor.computed;
-  is(computedDom.children.length, propNames.length, "There should be 4 nodes in the DOM");
+  is(computedDom.children.length, propNames.length,
+    "There should be 4 nodes in the DOM");
   propNames.forEach((propName, i) => {
-    is(computedDom.getElementsByClassName("ruleview-propertyvalue")[i].textContent,
-        newPaddingValue, "Computed value of " + propName + " in DOM is as expected");
+    is(computedDom.getElementsByClassName("ruleview-propertyvalue")[i]
+      .textContent, newPaddingValue,
+      "Computed value of " + propName + " in DOM is as expected");
   });
 }

browser/devtools/styleinspector/test/browser_ruleview_edit-property-order.js

@@ -4,18 +4,16 @@
 
 "use strict";
 
-// Checking properties orders and overrides in the rule-view
+// Checking properties orders and overrides in the rule-view.
+
+const TEST_URI = "<div id='testid'>Styled Node</div>";
 
 add_task(function*() {
-  yield addTab("data:text/html;charset=utf-8,browser_ruleview_manipulation.js");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Creating the test document and getting the test node");
-  content.document.body.innerHTML = '<div id="testid">Styled Node</div>';
-  let element = getNode("#testid");
-
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
+  let element = getNode("#testid");
   let elementStyle = view._elementStyle;
   let elementRule = elementStyle.rules[0];
 
@@ -23,46 +21,62 @@ add_task(function*() {
   let firstProp = elementRule.createProperty("background-color", "green", "");
   let secondProp = elementRule.createProperty("background-color", "blue", "");
   is(elementRule.textProps[0], firstProp, "Rules should be in addition order.");
-  is(elementRule.textProps[1], secondProp, "Rules should be in addition order.");
+  is(elementRule.textProps[1], secondProp,
+    "Rules should be in addition order.");
   yield elementRule._applyingModifications;
-  is(element.style.getPropertyValue("background-color"), "blue", "Second property should have been used.");
+  is(element.style.getPropertyValue("background-color"), "blue",
+    "Second property should have been used.");
 
   info("Removing the second property and checking the applied style again");
   secondProp.remove();
   yield elementRule._applyingModifications;
-  is(element.style.getPropertyValue("background-color"), "green", "After deleting second property, first should be used.");
+  is(element.style.getPropertyValue("background-color"), "green",
+    "After deleting second property, first should be used.");
 
-  info("Creating a new second property and checking that the insertion order is still the same");
+  info("Creating a new second property and checking that the insertion order " +
+    "is still the same");
   secondProp = elementRule.createProperty("background-color", "blue", "");
   yield elementRule._applyingModifications;
-  is(element.style.getPropertyValue("background-color"), "blue", "New property should be used.");
-  is(elementRule.textProps[0], firstProp, "Rules shouldn't have switched places.");
-  is(elementRule.textProps[1], secondProp, "Rules shouldn't have switched places.");
+  is(element.style.getPropertyValue("background-color"), "blue",
+    "New property should be used.");
+  is(elementRule.textProps[0], firstProp,
+    "Rules shouldn't have switched places.");
+  is(elementRule.textProps[1], secondProp,
+    "Rules shouldn't have switched places.");
 
   info("Disabling the second property and checking the applied style");
   secondProp.setEnabled(false);
   yield elementRule._applyingModifications;
-  is(element.style.getPropertyValue("background-color"), "green", "After disabling second property, first value should be used");
+  is(element.style.getPropertyValue("background-color"), "green",
+    "After disabling second property, first value should be used");
 
   info("Disabling the first property too and checking the applied style");
   firstProp.setEnabled(false);
   yield elementRule._applyingModifications;
-  is(element.style.getPropertyValue("background-color"), "", "After disabling both properties, value should be empty.");
+  is(element.style.getPropertyValue("background-color"), "",
+    "After disabling both properties, value should be empty.");
 
   info("Re-enabling the second propertyt and checking the applied style");
   secondProp.setEnabled(true);
   yield elementRule._applyingModifications;
-  is(element.style.getPropertyValue("background-color"), "blue", "Value should be set correctly after re-enabling");
+  is(element.style.getPropertyValue("background-color"), "blue",
+    "Value should be set correctly after re-enabling");
 
-  info("Re-enabling the first property and checking the insertion order is still respected");
+  info("Re-enabling the first property and checking the insertion order " +
+    "is still respected");
   firstProp.setEnabled(true);
   yield elementRule._applyingModifications;
-  is(element.style.getPropertyValue("background-color"), "blue", "Re-enabling an earlier property shouldn't make it override a later property.");
-  is(elementRule.textProps[0], firstProp, "Rules shouldn't have switched places.");
-  is(elementRule.textProps[1], secondProp, "Rules shouldn't have switched places.");
+  is(element.style.getPropertyValue("background-color"), "blue",
+    "Re-enabling an earlier property shouldn't make it override " +
+    "a later property.");
+  is(elementRule.textProps[0], firstProp,
+    "Rules shouldn't have switched places.");
+  is(elementRule.textProps[1], secondProp,
+    "Rules shouldn't have switched places.");
 
   info("Modifying the first property and checking the applied style");
   firstProp.setValue("purple", "");
   yield elementRule._applyingModifications;
-  is(element.style.getPropertyValue("background-color"), "blue", "Modifying an earlier property shouldn't override a later property.");
+  is(element.style.getPropertyValue("background-color"), "blue",
+    "Modifying an earlier property shouldn't override a later property.");
 });

browser/devtools/styleinspector/test/browser_ruleview_edit-property-remove_01.js

@@ -8,15 +8,15 @@
 // return key, and checks if the focus is moved to the appropriate editable
 // field.
 
-let TEST_URI = [
-  "<style type='text/css'>",
-  "#testid {",
-  "  background-color: #00F;",
-  "  color: #00F;",
-  "}",
-  "</style>",
-  "<div id='testid'>Styled Node</div>",
-].join("\n");
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_edit-property-remove_02.js

@@ -8,15 +8,15 @@
 // return key, and checks if the focus is moved to the appropriate editable
 // field.
 
-let TEST_URI = [
-  "<style type='text/css'>",
-  "#testid {",
-  "  background-color: #00F;",
-  "  color: #00F;",
-  "}",
-  "</style>",
-  "<div id='testid'>Styled Node</div>",
-].join("\n");
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_edit-property-remove_03.js

@@ -7,15 +7,16 @@
 // Tests removing a property by clearing the property name and pressing shift
 // and tab keys, and checks if the focus is moved to the appropriate editable
 // field.
-let TEST_URI = [
-  "<style type='text/css'>",
-  "#testid {",
-  "  background-color: #00F;",
-  "  color: #00F;",
-  "}",
-  "</style>",
-  "<div id='testid'>Styled Node</div>",
-].join("\n");
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));

browser/devtools/styleinspector/test/browser_ruleview_edit-property_01.js

@@ -9,20 +9,21 @@
 // FIXME: some of the inplace-editor focus/blur/commit/revert stuff
 // should be factored out in head.js
 
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background-color: blue;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
+
 let BACKGROUND_IMAGE_URL = 'url("' + TEST_URL_ROOT + 'doc_test_image.png")';
-let TEST_URI = [
-  '<style type="text/css">',
-  '#testid {',
-  '  color: red;',
-  '  background-color: blue;',
-  '}',
-  '.testclass, .unmatched {',
-  '  background-color: green;',
-  '}',
-  '</style>',
-  '<div id="testid" class="testclass">Styled Node</div>',
-  '<div id="testid2">Styled Node</div>'
-].join("\n");
 
 let TEST_DATA = [
   { name: "border-color", value: "red", isValid: true },
@@ -31,12 +32,8 @@ let TEST_DATA = [
 ];
 
 add_task(function*() {
-  let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Selecting the test element");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
   let ruleEditor = getRuleViewRuleEditor(view, 1);
@@ -52,12 +49,15 @@ function* testEditProperty(ruleEditor, name, value, isValid) {
   let propEditor = ruleEditor.rule.textProps[0].editor;
 
   info("Focusing an existing property name in the rule-view");
-  let editor = yield focusEditableField(ruleEditor.ruleView, propEditor.nameSpan, 32, 1);
+  let editor = yield focusEditableField(ruleEditor.ruleView,
+    propEditor.nameSpan, 32, 1);
 
-  is(inplaceEditor(propEditor.nameSpan), editor, "The property name editor got focused");
+  is(inplaceEditor(propEditor.nameSpan), editor,
+    "The property name editor got focused");
   let input = editor.input;
 
-  info("Entering a new property name, including : to commit and focus the value");
+  info("Entering a new property name, including : to commit and " +
+    "focus the value");
   let onValueFocus = once(ruleEditor.element, "focus", true);
   let onModifications = ruleEditor.rule._applyingModifications;
   EventUtils.sendString(name + ":", doc.defaultView);
@@ -76,7 +76,8 @@ function* testEditProperty(ruleEditor, name, value, isValid) {
   yield onBlur;
   yield onModifications;
 
-  is(propEditor.isValid(), isValid, value + " is " + isValid ? "valid" : "invalid");
+  is(propEditor.isValid(), isValid,
+    value + " is " + isValid ? "valid" : "invalid");
 
   info("Checking that the style property was changed on the content page");
   let propValue = yield executeInContent("Test:GetRulePropertyValue", {

browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js

@@ -6,25 +6,24 @@
 
 // Test several types of rule-view property edition
 
-let TEST_URI = [
-  '<style type="text/css">',
-  '#testid {',
-  '  background-color: blue;',
-  '}',
-  '.testclass, .unmatched {',
-  '  background-color: green;',
-  '}',
-  '</style>',
-  '<div id="testid" class="testclass">Styled Node</div>',
-  '<div id="testid2">Styled Node</div>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    background-color: blue;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
 
 add_task(function*() {
-  let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-
-  let {toolbox, inspector, view} = yield openRuleView();
-
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
+
   yield testEditProperty(inspector, view);
   yield testDisableProperty(inspector, view);
   yield testPropertyStillMarkedDirty(inspector, view);
@@ -36,15 +35,19 @@ function* testEditProperty(inspector, ruleView) {
 
   let editor = yield focusEditableField(ruleView, propEditor.nameSpan);
   let input = editor.input;
-  is(inplaceEditor(propEditor.nameSpan), editor, "Next focused editor should be the name editor.");
+  is(inplaceEditor(propEditor.nameSpan), editor,
+    "Next focused editor should be the name editor.");
 
-  ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
+  ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected.");
 
-  // Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
+  // Try clicking on the editor's input again, shouldn't cause trouble
+  // (see bug 761665).
   EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
   input.select();
 
-  info("Entering property name \"border-color\" followed by a colon to focus the value");
+  info("Entering property name \"border-color\" followed by a colon to " +
+    "focus the value");
   let onFocus = once(idRuleEditor.element, "focus", true);
   EventUtils.sendString("border-color:", ruleView.styleWindow);
   yield onFocus;
@@ -53,12 +56,15 @@ function* testEditProperty(inspector, ruleView) {
   info("Verifying that the focused field is the valueSpan");
   editor = inplaceEditor(ruleView.styleDocument.activeElement);
   input = editor.input;
-  is(inplaceEditor(propEditor.valueSpan), editor, "Focus should have moved to the value.");
-  ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
+  is(inplaceEditor(propEditor.valueSpan), editor,
+    "Focus should have moved to the value.");
+  ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected.");
 
   info("Entering a value following by a semi-colon to commit it");
   let onBlur = once(editor.input, "blur");
-  // Use sendChar() to pass each character as a string so that we can test propEditor.warning.hidden after each character.
+  // Use sendChar() to pass each character as a string so that we can test
+  // propEditor.warning.hidden after each character.
   for (let ch of "red;") {
     EventUtils.sendChar(ch, ruleView.styleWindow);
     is(propEditor.warning.hidden, true,
@@ -74,7 +80,8 @@ function* testEditProperty(inspector, ruleView) {
   });
   is(newValue, "red", "border-color should have been set.");
 
-  info("Entering property name \"color\" followed by a colon to focus the value");
+  info("Entering property name \"color\" followed by a colon to " +
+    "focus the value");
   onFocus = once(idRuleEditor.element, "focus", true);
   EventUtils.sendString("color:", ruleView.styleWindow);
   yield onFocus;

browser/devtools/styleinspector/test/browser_ruleview_edit-property_03.js

@@ -7,45 +7,42 @@
 // Tests that emptying out an existing value removes the property and
 // doesn't cause any other issues.  See also Bug 1150780.
 
-let TEST_URI = [
-  '<style type="text/css">',
-  '#testid {',
-  '  color: red;',
-  '  background-color: blue;',
-  '  font-size: 12px;',
-  '}',
-  '.testclass, .unmatched {',
-  '  background-color: green;',
-  '}',
-  '</style>',
-  '<div id="testid" class="testclass">Styled Node</div>',
-  '<div id="testid2">Styled Node</div>'
-].join("\n");
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background-color: blue;
+    font-size: 12px;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
 
 add_task(function*() {
-  let tab = yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
-
-  info("Opening the rule-view");
-  let {toolbox, inspector, view} = yield openRuleView();
-
-  info("Selecting the test element");
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
   let ruleEditor = getRuleViewRuleEditor(view, 1);
-  let doc = ruleEditor.doc;
-
   let propEditor = ruleEditor.rule.textProps[1].editor;
-  let editor = yield focusEditableField(view, propEditor.valueSpan);
+
+  yield focusEditableField(view, propEditor.valueSpan);
 
   info("Deleting all the text out of a value field");
-  yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_DELETE", "VK_RETURN"]);
+  yield sendCharsAndWaitForFocus(view, ruleEditor.element,
+    ["VK_DELETE", "VK_RETURN"]);
 
   info("Pressing enter a couple times to cycle through editors");
   yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
   yield sendCharsAndWaitForFocus(view, ruleEditor.element, ["VK_RETURN"]);
 
-  isnot (ruleEditor.rule.textProps[1].editor.nameSpan.style.display, "none", "The name span is visible");
-  is (ruleEditor.rule.textProps.length, 2, "Correct number of props");
+  isnot(ruleEditor.rule.textProps[1].editor.nameSpan.style.display, "none",
+    "The name span is visible");
+  is(ruleEditor.rule.textProps.length, 2, "Correct number of props");
 });
 
 function* sendCharsAndWaitForFocus(view, element, chars) {