Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

32 files changed, 2308 insertions, 0 deletions

diff --git a/devtools/client/inspector/computed/test/browser.ini b/devtools/client/inspector/computed/test/browser.ini
new file mode 100644
index 0000000000..4c5d5b30bf
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser.ini
@@ -0,0 +1,43 @@
+[DEFAULT]
+tags = devtools
+subsuite = devtools
+support-files =
+  doc_matched_selectors.html
+  doc_media_queries.html
+  doc_pseudoelement.html
+  doc_sourcemaps.css
+  doc_sourcemaps.css.map
+  doc_sourcemaps.html
+  doc_sourcemaps.scss
+  head.js
+  !/devtools/client/inspector/test/head.js
+  !/devtools/client/inspector/test/shared-head.js
+  !/devtools/client/shared/test/shared-head.js
+  !/devtools/client/shared/test/telemetry-test-helpers.js
+  !/devtools/client/shared/test/highlighter-test-actor.js
+
+[browser_computed_browser-styles.js]
+[browser_computed_cycle_color.js]
+[browser_computed_default_tab.js]
+[browser_computed_getNodeInfo.js]
+skip-if = !debug && os == "mac" #Bug 1559033
+[browser_computed_keybindings_01.js]
+[browser_computed_keybindings_02.js]
+[browser_computed_matched-selectors-toggle.js]
+[browser_computed_matched-selectors_01.js]
+[browser_computed_matched-selectors_02.js]
+[browser_computed_media-queries.js]
+[browser_computed_no-results-placeholder.js]
+[browser_computed_original-source-link.js]
+[browser_computed_pseudo-element_01.js]
+[browser_computed_refresh-on-style-change_01.js]
+[browser_computed_refresh-on-ruleview-change.js]
+[browser_computed_search-filter.js]
+[browser_computed_search-filter_clear.js]
+[browser_computed_search-filter_context-menu.js]
+[browser_computed_search-filter_escape-keypress.js]
+[browser_computed_search-filter_noproperties.js]
+[browser_computed_select-and-copy-styles-01.js]
+[browser_computed_select-and-copy-styles-02.js]
+[browser_computed_style-editor-link.js]
+skip-if = true # bug 1307846
diff --git a/devtools/client/inspector/computed/test/browser_computed_browser-styles.js b/devtools/client/inspector/computed/test/browser_computed_browser-styles.js
new file mode 100644
index 0000000000..52477d21ed
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_browser-styles.js
@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// 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(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+
+  info("Checking the default styles");
+  is(
+    isPropertyVisible("color", view),
+    true,
+    "span #matches color property is visible"
+  );
+  is(
+    isPropertyVisible("background-color", view),
+    false,
+    "span #matches background-color property is hidden"
+  );
+
+  info("Toggling the browser styles");
+  const doc = view.styleDocument;
+  const checkbox = doc.querySelector(".includebrowserstyles");
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  checkbox.click();
+  await onRefreshed;
+
+  info("Checking the browser styles");
+  is(isPropertyVisible("color", view), true, "span color property is visible");
+  is(
+    isPropertyVisible("background-color", view),
+    true,
+    "span background-color property is visible"
+  );
+});
+
+function isPropertyVisible(name, view) {
+  info("Checking property visibility for " + name);
+  const propertyViews = view.propertyViews;
+  for (const propView of propertyViews) {
+    if (propView.name == name) {
+      return propView.visible;
+    }
+  }
+  return false;
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_cycle_color.js b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
new file mode 100644
index 0000000000..37d468b5bd
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Computed view color cycling test.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #f00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+
+  info("Checking the property itself");
+  let container = getComputedViewPropertyView(view, "color").valueNode;
+  await checkColorCycling(container, view);
+
+  info("Checking matched selectors");
+  container = await getComputedViewMatchedRules(view, "color");
+  await checkColorCycling(container, view);
+});
+
+async function checkColorCycling(container, view) {
+  const valueNode = container.querySelector(".computed-color");
+  const win = view.styleWindow;
+
+  // "Authored" (default; currently the computed value)
+  is(
+    valueNode.textContent,
+    "rgb(255, 0, 0)",
+    "Color displayed as an RGB value."
+  );
+
+  const tests = [
+    {
+      value: "hwb(0 0% 0%)",
+      comment: "Color displayed as an HWB value.",
+    },
+    {
+      value: "red",
+      comment: "Color displayed as a color name.",
+    },
+    {
+      value: "#f00",
+      comment: "Color displayed as a HEX value.",
+    },
+    {
+      value: "hsl(0, 100%, 50%)",
+      comment: "Color displayed as an HSL value.",
+    },
+    {
+      value: "rgb(255, 0, 0)",
+      comment: "Color displayed as an RGB value again.",
+    },
+  ];
+
+  for (const test of tests) {
+    await checkSwatchShiftClick(container, win, test.value, test.comment);
+  }
+}
+
+async function checkSwatchShiftClick(container, win, expectedValue, comment) {
+  const swatch = container.querySelector(".computed-colorswatch");
+  const valueNode = container.querySelector(".computed-color");
+  swatch.scrollIntoView();
+
+  const onUnitChange = swatch.once("unit-change");
+  EventUtils.synthesizeMouseAtCenter(
+    swatch,
+    {
+      type: "mousedown",
+      shiftKey: true,
+    },
+    win
+  );
+  // we need to have the mouse up event in order to make sure that the platform
+  // lets go of the last container, and is not waiting for something to happen.
+  // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1442153
+  EventUtils.synthesizeMouseAtCenter(swatch, { type: "mouseup" }, win);
+  await onUnitChange;
+  is(valueNode.textContent, expectedValue, comment);
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_default_tab.js b/devtools/client/inspector/computed/test/browser_computed_default_tab.js
new file mode 100644
index 0000000000..1a485a7cc7
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_default_tab.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the computed view is initialized when the computed view is the default tab
+// for the inspector.
+
+const TEST_URI = `
+  <style type="text/css">
+    #matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.activeSidebar", "computedview");
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+  is(
+    isPropertyVisible("color", view),
+    true,
+    "span #matches color property is visible"
+  );
+});
+
+function isPropertyVisible(name, view) {
+  info("Checking property visibility for " + name);
+  const propertyViews = view.propertyViews;
+  for (const propView of propertyViews) {
+    if (propView.name == name) {
+      return propView.visible;
+    }
+  }
+  return false;
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
new file mode 100644
index 0000000000..0aa1c85ff2
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
@@ -0,0 +1,176 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests various output of the computed-view's getNodeInfo method.
+// This method is used by the HighlightersOverlay and TooltipsOverlay on mouseover to
+// decide which highlighter or tooltip 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.
+// This test however serves as a unit test for getNodeInfo.
+
+const {
+  VIEW_NODE_SELECTOR_TYPE,
+  VIEW_NODE_PROPERTY_TYPE,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red;
+      color: white;
+    }
+    div {
+      background: green;
+    }
+    div div {
+      background-color: yellow;
+      background-image: url(chrome://branding/content/icon64.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
+// - getHoveredNode {Generator Function} received the computed-view instance as
+//   argument and must return the node to be tested
+// - assertNodeInfo {Function} should check the validity of the nodeInfo
+//   argument it receives
+const TEST_DATA = [
+  {
+    desc: "Testing a null node",
+    getHoveredNode() {
+      return null;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+  {
+    desc: "Testing a useless node",
+    getHoveredNode(view) {
+      return view.element;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+  {
+    desc: "Testing a property name",
+    getHoveredNode(view) {
+      return getComputedViewProperty(view, "color").nameSpan;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_PROPERTY_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "rgb(255, 0, 0)");
+    },
+  },
+  {
+    desc: "Testing a property value",
+    getHoveredNode(view) {
+      return getComputedViewProperty(view, "color").valueSpan;
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "rgb(255, 0, 0)");
+    },
+  },
+  {
+    desc: "Testing an image url",
+    getHoveredNode(view) {
+      const { valueSpan } = getComputedViewProperty(view, "background-image");
+      return valueSpan.querySelector(".theme-link");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_IMAGE_URL_TYPE);
+      ok("property" in nodeInfo.value);
+      ok("value" in nodeInfo.value);
+      is(nodeInfo.value.property, "background-image");
+      is(nodeInfo.value.value, 'url("chrome://branding/content/icon64.png")');
+      is(nodeInfo.value.url, "chrome://branding/content/icon64.png");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (bestmatch)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "background-color");
+      return el.querySelector(".bestmatch");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "div div");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (matched)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "background-color");
+      return el.querySelector(".matched");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "div");
+    },
+  },
+  {
+    desc: "Testing a matched rule selector (parentmatch)",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".parentmatch");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
+      is(nodeInfo.value, "body");
+    },
+  },
+  {
+    desc: "Testing a matched rule value",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".computed-other-property-value");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
+      is(nodeInfo.value.property, "color");
+      is(nodeInfo.value.value, "red");
+    },
+  },
+  {
+    desc: "Testing a matched rule stylesheet link",
+    async getHoveredNode(view) {
+      const el = await getComputedViewMatchedRules(view, "color");
+      return el.querySelector(".rule-link .theme-link");
+    },
+    assertNodeInfo(nodeInfo) {
+      is(nodeInfo, null);
+    },
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#testElement", inspector);
+
+  for (const { desc, getHoveredNode, assertNodeInfo } of TEST_DATA) {
+    info(desc);
+    const nodeInfo = view.getNodeInfo(await getHoveredNode(view));
+    assertNodeInfo(nodeInfo);
+  }
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
new file mode 100644
index 0000000000..5a6681f139
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_01.js
@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// 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(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode(".matches", inspector);
+
+  const propView = getFirstVisiblePropertyView(view);
+  const rulesTable = propView.matchedSelectorsContainer;
+  const matchedExpander = propView.element;
+
+  info("Focusing the property");
+  matchedExpander.scrollIntoView();
+  const onMatchedExpanderFocus = once(matchedExpander, "focus", true);
+  EventUtils.synthesizeMouseAtCenter(matchedExpander, {}, view.styleWindow);
+  await onMatchedExpanderFocus;
+
+  await checkToggleKeyBinding(
+    view.styleWindow,
+    "VK_SPACE",
+    rulesTable,
+    inspector
+  );
+  await checkToggleKeyBinding(
+    view.styleWindow,
+    "VK_RETURN",
+    rulesTable,
+    inspector
+  );
+  await checkHelpLinkKeybinding(view);
+});
+
+function getFirstVisiblePropertyView(view) {
+  let propView = null;
+  view.propertyViews.some(p => {
+    if (p.visible) {
+      propView = p;
+      return true;
+    }
+    return false;
+  });
+
+  return propView;
+}
+
+async function checkToggleKeyBinding(win, key, rulesTable, inspector) {
+  info(
+    "Pressing " +
+      key +
+      " key a couple of times to check that the " +
+      "property gets expanded/collapsed"
+  );
+
+  const onExpand = inspector.once("computed-view-property-expanded");
+  const onCollapse = inspector.once("computed-view-property-collapsed");
+
+  info("Expanding the property");
+  EventUtils.synthesizeKey(key, {}, win);
+  await onExpand;
+  isnot(rulesTable.innerHTML, "", "The property has been expanded");
+
+  info("Collapsing the property");
+  EventUtils.synthesizeKey(key, {}, win);
+  await onCollapse;
+  is(rulesTable.innerHTML, "", "The property has been collapsed");
+}
+
+function checkHelpLinkKeybinding(view) {
+  info('Check that MDN link is opened on "F1"');
+  const propView = getFirstVisiblePropertyView(view);
+  return new Promise(resolve => {
+    propView.mdnLinkClick = function (event) {
+      ok(true, "Pressing F1 opened the MDN link");
+      resolve();
+    };
+    EventUtils.synthesizeKey("VK_F1", {}, view.styleWindow);
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
new file mode 100644
index 0000000000..dd08df84d9
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// 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(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("span", inspector);
+
+  info("Selecting the first computed style in the list");
+  const firstStyle = view.styleDocument.querySelector(
+    "#computed-container .computed-property-view"
+  );
+  ok(firstStyle, "First computed style found in panel");
+  firstStyle.focus();
+
+  info("Tab to select the 2nd style and press return");
+  let onExpanded = inspector.once("computed-view-property-expanded");
+  EventUtils.synthesizeKey("KEY_Tab");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onExpanded;
+
+  info("Verify the 2nd style has been expanded");
+  const secondStyleSelectors = view.styleDocument.querySelectorAll(
+    ".computed-property-content .matchedselectors"
+  )[1];
+  ok(!!secondStyleSelectors.childNodes.length, "Matched selectors expanded");
+
+  info("Tab back up and test the same thing, with space");
+  onExpanded = inspector.once("computed-view-property-expanded");
+  EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true });
+  EventUtils.synthesizeKey(" ");
+  await onExpanded;
+
+  info("Verify the 1st style has been expanded too");
+  const firstStyleSelectors = view.styleDocument.querySelectorAll(
+    ".computed-property-content .matchedselectors"
+  )[0];
+  ok(!!firstStyleSelectors.childNodes.length, "Matched selectors expanded");
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
new file mode 100644
index 0000000000..756d7d47c7
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
@@ -0,0 +1,127 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the computed view properties can be expanded and collapsed with
+// either the twisty or by dbl-clicking on the container.
+
+const TEST_URI = `
+  <style type="text/css"> ,
+    html { color: #000000; font-size: 15pt; }
+    h1 { color: red; }
+  </style>
+  <h1>Some header text</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("h1", inspector);
+
+  await testExpandOnTwistyClick(view, inspector);
+  await testCollapseOnTwistyClick(view, inspector);
+  await testExpandOnDblClick(view, inspector);
+  await testCollapseOnDblClick(view, inspector);
+});
+
+async function testExpandOnTwistyClick(
+  { styleDocument, styleWindow },
+  inspector
+) {
+  info("Testing that a property expands on twisty click");
+
+  info("Getting twisty element");
+  const twisty = styleDocument.querySelector(".computed-expandable");
+  ok(twisty, "Twisty found");
+
+  const onExpand = inspector.once("computed-view-property-expanded");
+  info("Clicking on the twisty element");
+  twisty.click();
+
+  await onExpand;
+
+  // Expanded means the matchedselectors div is not empty
+  const div = styleDocument.querySelector(
+    ".computed-property-content .matchedselectors"
+  );
+  ok(!!div.childNodes.length, "Matched selectors are expanded on twisty click");
+}
+
+async function testCollapseOnTwistyClick(
+  { styleDocument, styleWindow },
+  inspector
+) {
+  info("Testing that a property collapses on twisty click");
+
+  info("Getting twisty element");
+  const twisty = styleDocument.querySelector(".computed-expandable");
+  ok(twisty, "Twisty found");
+
+  const onCollapse = inspector.once("computed-view-property-collapsed");
+  info("Clicking on the twisty element");
+  twisty.click();
+
+  await onCollapse;
+
+  // Collapsed means the matchedselectors div is empty
+  const div = styleDocument.querySelector(
+    ".computed-property-content .matchedselectors"
+  );
+  ok(
+    div.childNodes.length === 0,
+    "Matched selectors are collapsed on twisty click"
+  );
+}
+
+async function testExpandOnDblClick({ styleDocument, styleWindow }, inspector) {
+  info("Testing that a property expands on container dbl-click");
+
+  info("Getting computed property container");
+  const container = styleDocument.querySelector(
+    "#computed-container .computed-property-view"
+  );
+  ok(container, "Container found");
+
+  container.scrollIntoView();
+
+  const onExpand = inspector.once("computed-view-property-expanded");
+  info("Dbl-clicking on the container");
+  EventUtils.synthesizeMouseAtCenter(container, { clickCount: 2 }, styleWindow);
+
+  await onExpand;
+
+  // Expanded means the matchedselectors div is not empty
+  const div = styleDocument.querySelector(
+    ".computed-property-content .matchedselectors"
+  );
+  ok(!!div.childNodes.length, "Matched selectors are expanded on dblclick");
+}
+
+async function testCollapseOnDblClick(
+  { styleDocument, styleWindow },
+  inspector
+) {
+  info("Testing that a property collapses on container dbl-click");
+
+  info("Getting computed property container");
+  const container = styleDocument.querySelector(
+    "#computed-container .computed-property-view"
+  );
+  ok(container, "Container found");
+
+  const onCollapse = inspector.once("computed-view-property-collapsed");
+  info("Dbl-clicking on the container");
+  EventUtils.synthesizeMouseAtCenter(container, { clickCount: 2 }, styleWindow);
+
+  await onCollapse;
+
+  // Collapsed means the matchedselectors div is empty
+  const div = styleDocument.querySelector(
+    ".computed-property-content .matchedselectors"
+  );
+  ok(
+    div.childNodes.length === 0,
+    "Matched selectors are collapsed on dblclick"
+  );
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
new file mode 100644
index 0000000000..cf2233fd75
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Checking selector counts, matched rules and titles in the computed-view.
+
+const {
+  PropertyView,
+} = require("resource://devtools/client/inspector/computed/computed.js");
+const TEST_URI = URL_ROOT + "doc_matched_selectors.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openComputedView();
+
+  await selectNode("#test", inspector);
+  await testMatchedSelectors(view, inspector);
+});
+
+async function testMatchedSelectors(view, inspector) {
+  info("checking selector counts, matched rules and titles");
+
+  const nodeFront = await getNodeFront("#test", inspector);
+  is(
+    nodeFront,
+    view._viewedElement,
+    "style inspector node matches the selected node"
+  );
+
+  const propertyView = new PropertyView(view, "color");
+  propertyView.buildMain();
+  propertyView.buildSelectorContainer();
+  propertyView.matchedExpanded = true;
+
+  await propertyView.refreshMatchedSelectors();
+
+  const numMatchedSelectors = propertyView.matchedSelectors.length;
+  is(
+    numMatchedSelectors,
+    7,
+    "CssLogic returns the correct number of matched selectors for div"
+  );
+  is(
+    propertyView.hasMatchedSelectors,
+    true,
+    "hasMatchedSelectors returns true"
+  );
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
new file mode 100644
index 0000000000..b0327a30cf
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_02.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests for matched selector texts in the computed view.
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<div style='color:blue;'></div>");
+  const { inspector, view } = await openComputedView();
+  await selectNode("div", inspector);
+
+  info("Checking the color property view");
+  const propertyView = getPropertyView(view, "color");
+  ok(propertyView, "found PropertyView for color");
+  is(propertyView.hasMatchedSelectors, true, "hasMatchedSelectors is true");
+
+  info("Expanding the matched selectors");
+  propertyView.matchedExpanded = true;
+  await propertyView.refreshMatchedSelectors();
+
+  const span =
+    propertyView.matchedSelectorsContainer.querySelector("span.rule-text");
+  ok(span, "Found the first table row");
+
+  const selector = propertyView.matchedSelectorViews[0];
+  ok(selector, "Found the first matched selector view");
+});
+
+function getPropertyView(computedView, name) {
+  let propertyView = null;
+  computedView.propertyViews.some(function (view) {
+    if (view.name == name) {
+      propertyView = view;
+      return true;
+    }
+    return false;
+  });
+  return propertyView;
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_media-queries.js b/devtools/client/inspector/computed/test/browser_computed_media-queries.js
new file mode 100644
index 0000000000..d925850fc9
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_media-queries.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that we correctly display appropriate media query titles in the
+// property view.
+
+const TEST_URI = URL_ROOT + "doc_media_queries.html";
+
+var {
+  PropertyView,
+} = require("resource://devtools/client/inspector/computed/computed.js");
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openComputedView();
+  await selectNode("div", inspector);
+  await checkPropertyView(view);
+});
+
+function checkPropertyView(view) {
+  const propertyView = new PropertyView(view, "width");
+  propertyView.buildMain();
+  propertyView.buildSelectorContainer();
+  propertyView.matchedExpanded = true;
+
+  return propertyView.refreshMatchedSelectors().then(() => {
+    const numMatchedSelectors = propertyView.matchedSelectors.length;
+
+    is(
+      numMatchedSelectors,
+      2,
+      "Property view has the correct number of matched selectors for div"
+    );
+
+    is(
+      propertyView.hasMatchedSelectors,
+      true,
+      "hasMatchedSelectors returns true"
+    );
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js b/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
new file mode 100644
index 0000000000..3e63bfb9b3
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_no-results-placeholder.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// 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(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+
+  await enterInvalidFilter(inspector, view);
+  checkNoResultsPlaceholderShown(view);
+
+  await clearFilterText(inspector, view);
+  checkNoResultsPlaceholderHidden(view);
+});
+
+async function enterInvalidFilter(inspector, computedView) {
+  const searchbar = computedView.searchField;
+  const searchTerm = "xxxxx";
+
+  info('setting filter text to "' + searchTerm + '"');
+
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  searchbar.focus();
+  synthesizeKeys(searchTerm, computedView.styleWindow);
+  await onRefreshed;
+}
+
+function checkNoResultsPlaceholderShown(computedView) {
+  info("Checking that the no results placeholder is shown");
+
+  const placeholder = computedView.noResults;
+  const win = computedView.styleWindow;
+  const display = win.getComputedStyle(placeholder).display;
+  is(display, "block", "placeholder is visible");
+}
+
+async function clearFilterText(inspector, computedView) {
+  info("Clearing the filter text");
+
+  const searchbar = computedView.searchField;
+
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  searchbar.focus();
+  searchbar.value = "";
+  EventUtils.synthesizeKey("c", {}, computedView.styleWindow);
+  await onRefreshed;
+}
+
+function checkNoResultsPlaceholderHidden(computedView) {
+  info("Checking that the no results placeholder is hidden");
+
+  const placeholder = computedView.noResults;
+  const win = computedView.styleWindow;
+  const display = win.getComputedStyle(placeholder).display;
+  is(display, "none", "placeholder is hidden");
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_original-source-link.js b/devtools/client/inspector/computed/test/browser_computed_original-source-link.js
new file mode 100644
index 0000000000..771d349b3b
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_original-source-link.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the computed view shows the original source link when source maps
+// are enabled.
+
+const TESTCASE_URI = URL_ROOT_SSL + "doc_sourcemaps.html";
+const PREF = "devtools.source-map.client-service.enabled";
+const SCSS_LOC = "doc_sourcemaps.scss:4";
+const CSS_LOC = "doc_sourcemaps.css:1";
+
+add_task(async function () {
+  info("Turning the pref " + PREF + " on");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { toolbox, inspector, view } = await openComputedView();
+  let onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
+  await selectNode("div", inspector);
+
+  info("Expanding the first property");
+  await expandComputedViewPropertyByIndex(view, 0);
+
+  info("Verifying the link text");
+  await onLinksUpdated;
+  verifyLinkText(view, SCSS_LOC);
+
+  info("Toggling the pref");
+  onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
+  Services.prefs.setBoolPref(PREF, false);
+  await onLinksUpdated;
+
+  info("Verifying that the link text has changed after the pref change");
+  await verifyLinkText(view, CSS_LOC);
+
+  info("Toggling the pref again");
+  onLinksUpdated = inspector.once("computed-view-sourcelinks-updated");
+  Services.prefs.setBoolPref(PREF, true);
+  await onLinksUpdated;
+
+  info("Testing that clicking on the link works");
+  await testClickingLink(toolbox, view);
+
+  info("Turning the pref " + PREF + " off");
+  Services.prefs.clearUserPref(PREF);
+});
+
+async function testClickingLink(toolbox, view) {
+  const onEditor = waitForStyleEditor(toolbox, "doc_sourcemaps.scss");
+
+  info("Clicking the computedview stylesheet link");
+  const link = getComputedViewLinkByIndex(view, 0);
+  link.scrollIntoView();
+  link.click();
+
+  const editor = await onEditor;
+
+  const { line } = editor.sourceEditor.getCursor();
+  is(line, 3, "cursor is at correct line number in original source");
+}
+
+function verifyLinkText(view, text) {
+  const link = getComputedViewLinkByIndex(view, 0);
+  is(
+    link.textContent,
+    text,
+    "Linked text changed to display the correct location"
+  );
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js b/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
new file mode 100644
index 0000000000..e972a0257a
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_pseudo-element_01.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that pseudoelements are displayed correctly in the rule view.
+
+const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openComputedView();
+  await testTopLeft(inspector, view);
+});
+
+async function testTopLeft(inspector, view) {
+  const node = await getNodeFront("#topleft", inspector.markup);
+  await selectNode(node, inspector);
+  const float = getComputedViewPropertyValue(view, "float");
+  is(float, "left", "The computed view shows the correct float");
+
+  const children = await inspector.markup.walker.children(node);
+  is(children.nodes.length, 3, "Element has correct number of children");
+
+  const beforeElement = children.nodes[0];
+  await selectNode(beforeElement, inspector);
+  let top = getComputedViewPropertyValue(view, "top");
+  is(top, "0px", "The computed view shows the correct top");
+  let left = getComputedViewPropertyValue(view, "left");
+  is(left, "0px", "The computed view shows the correct left");
+
+  const afterElement = children.nodes[children.nodes.length - 1];
+  await selectNode(afterElement, inspector);
+  top = getComputedViewPropertyValue(view, "top");
+  is(top, "96px", "The computed view shows the correct top");
+  left = getComputedViewPropertyValue(view, "left");
+  is(left, "96px", "The computed view shows the correct left");
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js b/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js
new file mode 100644
index 0000000000..12b7901970
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_refresh-on-ruleview-change.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the computed view refreshes when the rule view is updated in 3 pane mode.
+
+const TEST_URI = "<div id='target' style='color: rgb(255, 0, 0);'>test</div>";
+
+add_task(async function () {
+  info(
+    "Check whether the color as well in computed view is updated " +
+      "when the rule in rule view is changed in case of 3 pane mode"
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#target", inspector);
+
+  is(
+    getComputedViewPropertyValue(view, "color"),
+    "rgb(255, 0, 0)",
+    "The computed view shows the right color"
+  );
+
+  info("Change the value in the ruleview");
+  const ruleView = inspector.getPanel("ruleview").view;
+  const editor = await getValueEditor(ruleView);
+  const onRuleViewChanged = ruleView.once("ruleview-changed");
+  const onComputedViewRefreshed = inspector.once("computed-view-refreshed");
+  editor.input.value = "rgb(0, 255, 0)";
+  EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow);
+  await Promise.all([onRuleViewChanged, onComputedViewRefreshed]);
+
+  info("Check the value in the computed view");
+  is(
+    getComputedViewPropertyValue(view, "color"),
+    "rgb(0, 255, 0)",
+    "The computed value is updated when the rule in ruleview is changed"
+  );
+});
+
+add_task(async function () {
+  info(
+    "Check that the computed view is not updated " +
+      "if the rule view is changed in 2 pane mode."
+  );
+  await pushPref("devtools.inspector.three-pane-enabled", false);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector } = await openComputedView();
+  await selectNode("#target", inspector);
+
+  info("Select the rule view");
+  const ruleView = inspector.getPanel("ruleview").view;
+  const onRuleViewReady = ruleView.once("ruleview-refreshed");
+  const onSidebarSelect = inspector.sidebar.once("select");
+  inspector.sidebar.select("ruleview");
+  await Promise.all([onSidebarSelect, onRuleViewReady]);
+
+  info(
+    "Prepare the counter which counts how many times computed view is refreshed"
+  );
+  let computedViewRefreshCount = 0;
+  const computedViewRefreshListener = () => {
+    computedViewRefreshCount += 1;
+  };
+  inspector.on("computed-view-refreshed", computedViewRefreshListener);
+
+  info("Change the value in the rule view");
+  const editor = await getValueEditor(ruleView);
+  const onRuleViewChanged = ruleView.once("ruleview-changed");
+  editor.input.value = "rgb(0, 255, 0)";
+  EventUtils.synthesizeKey("VK_RETURN", {}, ruleView.styleWindow);
+  await onRuleViewChanged;
+
+  info(
+    "Wait for time enough to check whether the computed value is updated or not"
+  );
+  await wait(1000);
+
+  info("Check the counter");
+  is(computedViewRefreshCount, 0, "The computed view is not updated");
+
+  inspector.off("computed-view-refreshed", computedViewRefreshListener);
+});
+
+async function getValueEditor(ruleView) {
+  const ruleEditor = ruleView.element.children[0]._ruleEditor;
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+  return focusEditableField(ruleView, propEditor.valueSpan);
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js b/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js
new file mode 100644
index 0000000000..190593497b
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_refresh-on-style-change_01.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the computed view refreshes when the current node has its style
+// changed.
+
+const TEST_URI = "<div id='testdiv' style='font-size:10px;'>Test div!</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#testdiv", inspector);
+
+  let fontSize = getComputedViewPropertyValue(view, "font-size");
+  is(fontSize, "10px", "The computed view shows the right font-size");
+
+  info("Changing the node's style and waiting for the update");
+  const onUpdated = inspector.once("computed-view-refreshed");
+  await setContentPageElementAttribute(
+    "#testdiv",
+    "style",
+    "font-size: 15px; color: red;"
+  );
+  await onUpdated;
+
+  fontSize = getComputedViewPropertyValue(view, "font-size");
+  is(fontSize, "15px", "The computed view shows the updated font-size");
+  const color = getComputedViewPropertyValue(view, "color");
+  is(color, "rgb(255, 0, 0)", "The computed view also shows the color now");
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter.js b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
new file mode 100644
index 0000000000..a22cdb4038
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// 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(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testToggleDefaultStyles(inspector, view);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testToggleDefaultStyles(inspector, computedView) {
+  info('checking "Browser styles" checkbox');
+  const checkbox = computedView.includeBrowserStylesCheckbox;
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  checkbox.click();
+  await onRefreshed;
+}
+
+async function testAddTextInFilter(inspector, computedView) {
+  info('setting filter text to "color"');
+  const searchField = computedView.searchField;
+  const onRefreshed = inspector.once("computed-view-refreshed");
+  const win = computedView.styleWindow;
+
+  // First check to make sure that accel + F doesn't focus search if the
+  // container isn't focused
+  inspector.panelWin.focus();
+  EventUtils.synthesizeKey("f", { accelKey: true });
+  isnot(
+    inspector.panelDoc.activeElement,
+    searchField,
+    "Search field isn't focused"
+  );
+
+  computedView.element.focus();
+  EventUtils.synthesizeKey("f", { accelKey: true });
+  is(inspector.panelDoc.activeElement, searchField, "Search field is focused");
+
+  synthesizeKeys("color", win);
+  await onRefreshed;
+
+  info("check that the correct properties are visible");
+
+  const propertyViews = computedView.propertyViews;
+  propertyViews.forEach(propView => {
+    const name = propView.name;
+    is(
+      propView.visible,
+      name.indexOf("color") > -1,
+      "span " + name + " property visibility check"
+    );
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
new file mode 100644
index 0000000000..f77a71cc18
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_clear.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the search filter clear button works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+      background-color: #00F;
+      border-color: #0F0;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testClearSearchFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, computedView) {
+  info('Setting filter text to "background-color"');
+
+  const win = computedView.styleWindow;
+  const propertyViews = computedView.propertyViews;
+  const searchField = computedView.searchField;
+
+  searchField.focus();
+  synthesizeKeys("background-color", win);
+  await inspector.once("computed-view-refreshed");
+
+  info("Check that the correct properties are visible");
+
+  propertyViews.forEach(propView => {
+    const name = propView.name;
+    is(
+      propView.visible,
+      name.indexOf("background-color") > -1,
+      "span " + name + " property visibility check"
+    );
+  });
+}
+
+async function testClearSearchFilter(inspector, computedView) {
+  info("Clearing the search filter");
+
+  const win = computedView.styleWindow;
+  const propertyViews = computedView.propertyViews;
+  const searchField = computedView.searchField;
+  const searchClearButton = computedView.searchClearButton;
+  const onRefreshed = inspector.once("computed-view-refreshed");
+
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await onRefreshed;
+
+  info("Check that the correct properties are visible");
+
+  ok(!searchField.value, "Search filter is cleared");
+  propertyViews.forEach(propView => {
+    is(
+      propView.visible,
+      propView.hasMatchedSelectors,
+      "span " + propView.name + " property visibility check"
+    );
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
new file mode 100644
index 0000000000..0069d644c7
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_context-menu.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests computed view search filter context menu works properly.
+
+const TEST_INPUT = "h1";
+
+const TEST_URI = "<h1>test filter context menu</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openComputedView();
+  await selectNode("h1", inspector);
+
+  const searchField = view.searchField;
+
+  info("Opening context menu");
+
+  emptyClipboard();
+
+  const onFocus = once(searchField, "focus");
+  searchField.focus();
+  await onFocus;
+
+  let onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  let searchContextMenu = toolbox.getTextBoxContextMenu();
+  ok(
+    searchContextMenu,
+    "The search filter context menu is loaded in the computed view"
+  );
+
+  let cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  let cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  let cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  let cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  let cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  let cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
+  is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+
+  is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
+  is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
+  if (isWindows()) {
+    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
+    is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
+  }
+
+  info("Closing context menu");
+  let onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+
+  info("Copy text in search field using the context menu");
+  searchField.setUserInput(TEST_INPUT);
+  searchField.select();
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  onContextMenuClose = toolbox.once("menu-close");
+  await waitForClipboardPromise(
+    () => searchContextMenu.activateItem(cmdCopy),
+    TEST_INPUT
+  );
+  await onContextMenuClose;
+
+  info("Reopen context menu and check command properties");
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
+  is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
+  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
+  is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
+
+  onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
new file mode 100644
index 0000000000..59c71d01fe
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_escape-keypress.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Avoid test timeouts on Linux debug builds where the test takes just a bit too long to
+// run (see bug 1258081).
+requestLongerTimeout(2);
+
+// Tests that search filter escape keypress will clear the search field.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+    }
+  </style>
+  <span id="matches" class="matches">Some styled text</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("#matches", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testEscapeKeypress(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, computedView) {
+  info('Setting filter text to "background-color"');
+
+  const win = computedView.styleWindow;
+  const propertyViews = computedView.propertyViews;
+  const searchField = computedView.searchField;
+  const checkbox = computedView.includeBrowserStylesCheckbox;
+
+  info("Include browser styles");
+  checkbox.click();
+  await inspector.once("computed-view-refreshed");
+
+  searchField.focus();
+  synthesizeKeys("background-color", win);
+  await inspector.once("computed-view-refreshed");
+
+  info("Check that the correct properties are visible");
+
+  propertyViews.forEach(propView => {
+    const name = propView.name;
+    is(
+      propView.visible,
+      name.indexOf("background-color") > -1,
+      "span " + name + " property visibility check"
+    );
+  });
+}
+
+async function testEscapeKeypress(inspector, computedView) {
+  info("Pressing the escape key on search filter");
+
+  const win = computedView.styleWindow;
+  const propertyViews = computedView.propertyViews;
+  const searchField = computedView.searchField;
+  const onRefreshed = inspector.once("computed-view-refreshed");
+
+  searchField.focus();
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, win);
+  await onRefreshed;
+
+  info("Check that the correct properties are visible");
+
+  ok(!searchField.value, "Search filter is cleared");
+  propertyViews.forEach(propView => {
+    const name = propView.name;
+    is(propView.visible, true, "span " + name + " property is visible");
+  });
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js b/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js
new file mode 100644
index 0000000000..b24722e237
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the "no-results" message is displayed when selecting an invalid element or
+// when all properties have been filtered out.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+      background-color: #00F;
+      border-color: #0F0;
+    }
+  </style>
+  <div>
+    <!-- comment node -->
+    <span id="matches" class="matches">Some styled text</span>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  const propertyViews = view.propertyViews;
+
+  info("Select the #matches node");
+  const matchesNode = await getNodeFront("#matches", inspector);
+  let onRefresh = inspector.once("computed-view-refreshed");
+  await selectNode(matchesNode, inspector);
+  await onRefresh;
+
+  ok(
+    !!propertyViews.filter(p => p.visible).length,
+    "CSS properties are displayed"
+  );
+  ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden");
+
+  info("Select a comment node");
+  const commentNode = await inspector.walker.previousSibling(matchesNode);
+  await selectNode(commentNode, inspector);
+
+  is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed");
+  ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed");
+
+  info("Select the #matches node again");
+  onRefresh = inspector.once("computed-view-refreshed");
+  await selectNode(matchesNode, inspector);
+  await onRefresh;
+
+  ok(
+    !!propertyViews.filter(p => p.visible).length,
+    "CSS properties are displayed"
+  );
+  ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden");
+
+  info(
+    "Filter by 'will-not-match' and check the no-results message is displayed"
+  );
+  const searchField = view.searchField;
+  searchField.focus();
+  synthesizeKeys("will-not-match", view.styleWindow);
+  await inspector.once("computed-view-refreshed");
+
+  is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed");
+  ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed");
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
new file mode 100644
index 0000000000..b6be4591e5
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-01.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that properties can be selected and copied from the computed view.
+
+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(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("span", inspector);
+
+  await testCopySome(view);
+  await testCopyAll(view);
+});
+
+async function testCopySome(view) {
+  const expectedPattern =
+    "font-family: helvetica, sans-serif;[\\r\\n]+" +
+    "font-size: 16px;[\\r\\n]+" +
+    "font-variant-caps: small-caps;[\\r\\n]*";
+
+  await copySomeTextAndCheckClipboard(
+    view,
+    {
+      start: { prop: 1, offset: 0 },
+      end: { prop: 3, offset: 2 },
+    },
+    expectedPattern
+  );
+}
+
+async function testCopyAll(view) {
+  const expectedPattern =
+    "color: rgb\\(255, 255, 0\\);[\\r\\n]+" +
+    "font-family: helvetica, sans-serif;[\\r\\n]+" +
+    "font-size: 16px;[\\r\\n]+" +
+    "font-variant-caps: small-caps;[\\r\\n]*";
+
+  await copyAllAndCheckClipboard(view, expectedPattern);
+}
diff --git a/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js
new file mode 100644
index 0000000000..87fe1d9629
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_select-and-copy-styles-02.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that properties can be selected and copied from the computed view.
+
+const TEST_URI = `<div style="text-align:left;width:25px;">Hello world</div>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openComputedView();
+  await selectNode("div", inspector);
+
+  let expectedPattern = "text-align: left;[\\r\\n]+" + "width: 25px;[\\r\\n]*";
+  await copyAllAndCheckClipboard(view, expectedPattern);
+
+  info("Testing expand then select all copy");
+
+  expectedPattern =
+    "text-align: left;[\\r\\n]+" +
+    "element[\\r\\n]+" +
+    "Best Match this.style[\\r\\n]+" +
+    "left[\\r\\n]+" +
+    "width: 25px;[\\r\\n]+" +
+    "element[\\r\\n]+" +
+    "Best Match this.style[\\r\\n]+" +
+    "25px[\\r\\n]*";
+
+  info("Expanding computed view properties");
+  await expandComputedViewPropertyByIndex(view, 0);
+  await expandComputedViewPropertyByIndex(view, 1);
+
+  await copyAllAndCheckClipboard(view, expectedPattern);
+});
diff --git a/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
new file mode 100644
index 0000000000..832c1658a5
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_style-editor-link.js
@@ -0,0 +1,210 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the links from the computed view to the style editor.
+
+const STYLESHEET_URL =
+  "data:text/css," + encodeURIComponent(".highlight {color: blue}");
+
+const DOCUMENT_URL =
+  "data:text/html;charset=utf-8," +
+  encodeURIComponent(
+    `<html>
+   <head>
+   <title>Computed view style editor link test</title>
+   <style type="text/css">
+   html { color: #000000; }
+   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">
+   </style>
+   <style>
+   div { color: #f06; }
+   </style>
+   <link rel="stylesheet" type="text/css" href="${STYLESHEET_URL}">
+   <script>
+     const sheet = new CSSStyleSheet();
+     sheet.replaceSync(".highlight { color: tomato; }");
+     document.adoptedStyleSheets.push(sheet);
+   </script>
+   </head>
+   <body>
+   <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" class="highlight">
+   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>
+   </body>
+   </html>`
+  );
+
+add_task(async function () {
+  await addTab(DOCUMENT_URL);
+  const { toolbox, inspector, view } = await openComputedView();
+  await selectNode("span", inspector);
+
+  await testInlineStyle(view);
+  await testFirstInlineStyleSheet(view, toolbox);
+  await testSecondInlineStyleSheet(view, toolbox);
+  await testExternalStyleSheet(view, toolbox);
+  await testConstructedStyleSheet(view, toolbox);
+});
+
+async function testInlineStyle(view) {
+  info("Testing inline style");
+
+  await expandComputedViewPropertyByIndex(view, 0);
+
+  const onTab = waitForTab();
+  info("Clicking on the first rule-link in the computed-view");
+  checkComputedViewLink(view, {
+    index: 0,
+    expectedText: "element",
+    expectedTitle: "element",
+  });
+
+  const tab = await onTab;
+
+  const tabURI = tab.linkedBrowser.documentURI.spec;
+  ok(tabURI.startsWith("view-source:"), "View source tab is open");
+  info("Closing tab");
+  gBrowser.removeTab(tab);
+}
+
+async function testFirstInlineStyleSheet(view, toolbox) {
+  info("Testing inline stylesheet");
+
+  info("Listening for toolbox switch to the styleeditor");
+  const onSwitch = waitForStyleEditor(toolbox);
+
+  info("Clicking an inline stylesheet");
+  checkComputedViewLink(view, {
+    index: 3,
+    expectedText: "inline:3",
+    expectedTitle: "inline:3",
+  });
+  const editor = await onSwitch;
+
+  ok(true, "Switched to the style-editor panel in the toolbox");
+
+  await validateStyleEditorSheet(editor, 0);
+}
+
+async function testSecondInlineStyleSheet(view, toolbox) {
+  info("Testing second inline stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on second inline stylesheet link");
+  checkComputedViewLink(view, {
+    index: 5,
+    expectedText: "inline:2",
+    expectedTitle: "inline:2",
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(editor, 1);
+}
+
+async function testExternalStyleSheet(view, toolbox) {
+  info("Testing external stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on an external stylesheet link");
+  checkComputedViewLink(view, {
+    index: 2,
+    expectedText: `${STYLESHEET_URL.replace("data:text/css,", "")}:1`,
+    expectedTitle: `${STYLESHEET_URL}:1`,
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(editor, 2);
+}
+
+async function testConstructedStyleSheet(view, toolbox) {
+  info("Testing constructed stylesheet");
+
+  const panel = toolbox.getCurrentPanel();
+  const onSelected = panel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Clicking on an constructed stylesheet link");
+
+  checkComputedViewLink(view, {
+    index: 1,
+    expectedText: "constructed",
+    expectedTitle: "constructed",
+  });
+
+  info("Waiting for an editor to be selected in StyleEditor");
+  const editor = await onSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  ok(editor.styleSheet.constructed, "The constructed stylesheet is selected");
+}
+
+async function validateStyleEditorSheet(editor, expectedSheetIndex) {
+  info("Validating style editor stylesheet");
+  const expectedHref = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [expectedSheetIndex],
+    _expectedSheetIndex =>
+      content.document.styleSheets[_expectedSheetIndex].href
+  );
+  is(
+    editor.styleSheet.href,
+    expectedHref,
+    "loaded stylesheet matches document stylesheet"
+  );
+}
+
+function checkComputedViewLink(view, { index, expectedText, expectedTitle }) {
+  const link = getComputedViewLinkByIndex(view, index);
+  is(link.innerText, expectedText, `Link #${index} has expected label`);
+  is(
+    link.getAttribute("title"),
+    expectedTitle,
+    `Link #${index} has expected title attribute`
+  );
+  link.scrollIntoView();
+  link.click();
+}
diff --git a/devtools/client/inspector/computed/test/doc_matched_selectors.html b/devtools/client/inspector/computed/test/doc_matched_selectors.html
new file mode 100644
index 0000000000..8fe007409c
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_matched_selectors.html
@@ -0,0 +1,28 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      .matched1, .matched2, .matched3, .matched4, .matched5 {
+        color: #000;
+      }
+
+      div {
+        position: absolute;
+        top: 40px;
+        left: 20px;
+        border: 1px solid #000;
+        color: #111;
+        width: 100px;
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    inspectstyle($("test"));
+    <div id="test" class="matched1 matched2 matched3 matched4 matched5">Test div</div>
+    <div id="dummy">
+      <div></div>
+    </div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/computed/test/doc_media_queries.html b/devtools/client/inspector/computed/test/doc_media_queries.html
new file mode 100644
index 0000000000..819e1ea7aa
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_media_queries.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+  <title>test</title>
+  <style>
+    div {
+      width: 1000px;
+      height: 100px;
+      background-color: #f00;
+    }
+
+    @media screen and (min-width: 1px) {
+      div {
+        width: 200px;
+      }
+    }
+  </style>
+</head>
+<body>
+<div></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/computed/test/doc_pseudoelement.html b/devtools/client/inspector/computed/test/doc_pseudoelement.html
new file mode 100644
index 0000000000..6145d4bf1b
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_pseudoelement.html
@@ -0,0 +1,131 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+
+body {
+    color: #333;
+}
+
+.box {
+    float:left;
+    width: 128px;
+    height: 128px;
+    background: #ddd;
+    padding: 32px;
+    margin: 32px;
+    position:relative;
+}
+
+.box:first-line {
+    color: orange;
+    background: red;
+}
+
+.box:first-letter {
+    color: green;
+}
+
+* {
+    cursor: default;
+}
+
+nothing {
+    cursor: pointer;
+}
+
+p::-moz-selection {
+    color: white;
+    background: black;
+}
+p::selection {
+    color: white;
+    background: black;
+}
+
+p:first-line {
+   background: blue;
+}
+p:first-letter {
+  color: red;
+  font-size: 130%;
+}
+
+.box:before {
+    background: green;
+    content: " ";
+    position: absolute;
+    height:32px;
+    width:32px;
+}
+
+.box:after {
+    background: red;
+    content: " ";
+    position: absolute;
+    border-radius: 50%;
+    height:32px;
+    width:32px;
+    top: 50%;
+    left: 50%;
+    margin-top: -16px;
+    margin-left: -16px;
+}
+
+.topleft:before {
+    top:0;
+    left:0;
+}
+
+.topleft:first-line {
+    color: orange;
+}
+.topleft::selection {
+    color: orange;
+}
+
+.topright:before {
+    top:0;
+    right:0;
+}
+
+.bottomright:before {
+    bottom:10px;
+    right:10px;
+    color: red;
+}
+
+.bottomright:before {
+    bottom:0;
+    right:0;
+}
+
+.bottomleft:before {
+    bottom:0;
+    left:0;
+}
+
+    </style>
+  </head>
+  <body>
+    <h1>ruleview pseudoelement($("test"));</h1>
+
+    <div id="topleft" class="box topleft">
+        <p>Top Left<br />Position</p>
+    </div>
+
+    <div id="topright" class="box topright">
+        <p>Top Right<br />Position</p>
+    </div>
+
+    <div id="bottomright" class="box bottomright">
+        <p>Bottom Right<br />Position</p>
+    </div>
+
+    <div id="bottomleft" class="box bottomleft">
+        <p>Bottom Left<br />Position</p>
+    </div>
+
+  </body>
+</html>
diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.css b/devtools/client/inspector/computed/test/doc_sourcemaps.css
new file mode 100644
index 0000000000..f62fbda21e
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_sourcemaps.css
@@ -0,0 +1,7 @@
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
+
+/*# sourceMappingURL=doc_sourcemaps.css.map */
diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.css.map b/devtools/client/inspector/computed/test/doc_sourcemaps.css.map
new file mode 100644
index 0000000000..0f7486fd91
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_sourcemaps.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAGA,GAAI;EACF,KAAK,EAHU,OAAI;;AAMrB,IAAK;EACH,gBAAgB,EAAE,IAAI",
+"sources": ["doc_sourcemaps.scss"],
+"names": [],
+"file": "doc_sourcemaps.css"
+}
diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.html b/devtools/client/inspector/computed/test/doc_sourcemaps.html
new file mode 100644
index 0000000000..0014e55fe9
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_sourcemaps.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>testcase for testing CSS source maps</title>
+  <link rel="stylesheet" type="text/css" href="simple.css"/>
+  <link rel="stylesheet" type="text/css" href="doc_sourcemaps.css"/>
+</head>
+<body>
+	<div>source maps <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/computed/test/doc_sourcemaps.scss b/devtools/client/inspector/computed/test/doc_sourcemaps.scss
new file mode 100644
index 0000000000..0ff6c471bb
--- /dev/null
+++ b/devtools/client/inspector/computed/test/doc_sourcemaps.scss
@@ -0,0 +1,10 @@
+
+$paulrougetpink: #f06;
+
+div {
+  color: $paulrougetpink;
+}
+
+span {
+  background-color: #EEE;
+}
\ No newline at end of file
diff --git a/devtools/client/inspector/computed/test/head.js b/devtools/client/inspector/computed/test/head.js
new file mode 100644
index 0000000000..6d9a0f5b01
--- /dev/null
+++ b/devtools/client/inspector/computed/test/head.js
@@ -0,0 +1,267 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.defaultColorUnit");
+});
+
+/**
+ * Dispatch the copy event on the given element
+ */
+function fireCopyEvent(element) {
+  const evt = element.ownerDocument.createEvent("Event");
+  evt.initEvent("copy", true, true);
+  element.dispatchEvent(evt);
+}
+
+/**
+ * Get references to the name and value span nodes corresponding to a given
+ * property name in the computed-view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return an object {nameSpan, valueSpan}
+ */
+function getComputedViewProperty(view, name) {
+  let prop;
+  for (const property of view.styleDocument.querySelectorAll(
+    "#computed-container .computed-property-view"
+  )) {
+    const nameSpan = property.querySelector(".computed-property-name");
+    const valueSpan = property.querySelector(".computed-property-value");
+
+    if (nameSpan.firstChild.textContent === name) {
+      prop = { nameSpan, valueSpan };
+      break;
+    }
+  }
+  return prop;
+}
+
+/**
+ * Get an instance of PropertyView from the computed-view.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return {PropertyView}
+ */
+function getComputedViewPropertyView(view, name) {
+  let propView;
+  for (const propertyView of view.propertyViews) {
+    if (propertyView._propertyInfo.name === name) {
+      propView = propertyView;
+      break;
+    }
+  }
+  return propView;
+}
+
+/**
+ * Get a reference to the computed-property-content element for a given property name in
+ * the computed-view.
+ * A computed-property-content element always follows (nextSibling) the property itself
+ * and is only shown when the twisty icon is expanded on the property.
+ * A computed-property-content element contains matched rules, with selectors,
+ * properties, values and stylesheet links
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return {Promise} A promise that resolves to the property matched rules
+ * container
+ */
+var getComputedViewMatchedRules = async function (view, name) {
+  let expander;
+  let propertyContent;
+  for (const property of view.styleDocument.querySelectorAll(
+    "#computed-container .computed-property-view"
+  )) {
+    const nameSpan = property.querySelector(".computed-property-name");
+    if (nameSpan.firstChild.textContent === name) {
+      expander = property.querySelector(".computed-expandable");
+      propertyContent = property.nextSibling;
+      break;
+    }
+  }
+
+  if (!expander.hasAttribute("open")) {
+    // Need to expand the property
+    const onExpand = view.inspector.once("computed-view-property-expanded");
+    expander.click();
+    await onExpand;
+
+    await waitFor(() => expander.hasAttribute("open"));
+  }
+
+  return propertyContent;
+};
+
+/**
+ * Get the text value of the property corresponding to a given name in the
+ * computed-view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} name
+ *        The name of the property to retrieve
+ * @return {String} The property value
+ */
+function getComputedViewPropertyValue(view, name, propertyName) {
+  return getComputedViewProperty(view, name, propertyName).valueSpan
+    .textContent;
+}
+
+/**
+ * Expand a given property, given its index in the current property list of
+ * the computed view
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {Number} index
+ *        The index of the property to be expanded
+ * @return a promise that resolves when the property has been expanded, or
+ * rejects if the property was not found
+ */
+function expandComputedViewPropertyByIndex(view, index) {
+  info("Expanding property " + index + " in the computed view");
+  const expandos = view.styleDocument.querySelectorAll(".computed-expandable");
+  if (!expandos.length || !expandos[index]) {
+    return Promise.reject();
+  }
+
+  const onExpand = view.inspector.once("computed-view-property-expanded");
+  expandos[index].click();
+  return onExpand;
+}
+
+/**
+ * Get a rule-link from the computed-view given its index
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {Number} index
+ *        The index of the link to be retrieved
+ * @return {DOMNode} The link at the given index, if one exists, null otherwise
+ */
+function getComputedViewLinkByIndex(view, index) {
+  const links = view.styleDocument.querySelectorAll(
+    ".rule-link .computed-link"
+  );
+  return links[index];
+}
+
+/**
+ * Trigger the select all action in the computed view.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ */
+function selectAllText(view) {
+  info("Selecting all the text");
+  view.contextMenu._onSelectAll();
+}
+
+/**
+ * Select all the text, copy it, and check the content in the clipboard.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {String} expectedPattern
+ *        A regular expression used to check the content of the clipboard
+ */
+async function copyAllAndCheckClipboard(view, expectedPattern) {
+  selectAllText(view);
+  const contentDoc = view.styleDocument;
+  const prop = contentDoc.querySelector(
+    "#computed-container .computed-property-view"
+  );
+
+  try {
+    info("Trigger a copy event and wait for the clipboard content");
+    await waitForClipboardPromise(
+      () => fireCopyEvent(prop),
+      () => checkClipboard(expectedPattern)
+    );
+  } catch (e) {
+    failClipboardCheck(expectedPattern);
+  }
+}
+
+/**
+ * Select some text, copy it, and check the content in the clipboard.
+ *
+ * @param {CssComputedView} view
+ *        The instance of the computed view panel
+ * @param {Object} positions
+ *        The start and end positions of the text to be selected. This must be an object
+ *        like this:
+ *        { start: {prop: 1, offset: 0}, end: {prop: 3, offset: 5} }
+ * @param {String} expectedPattern
+ *        A regular expression used to check the content of the clipboard
+ */
+async function copySomeTextAndCheckClipboard(view, positions, expectedPattern) {
+  info("Testing selection copy");
+
+  const contentDocument = view.styleDocument;
+  const props = contentDocument.querySelectorAll(
+    "#computed-container .computed-property-view"
+  );
+
+  info("Create the text selection range");
+  const range = contentDocument.createRange();
+  range.setStart(props[positions.start.prop], positions.start.offset);
+  range.setEnd(props[positions.end.prop], positions.end.offset);
+  contentDocument.defaultView.getSelection().addRange(range);
+
+  try {
+    info("Trigger a copy event and wait for the clipboard content");
+    await waitForClipboardPromise(
+      () => fireCopyEvent(props[0]),
+      () => checkClipboard(expectedPattern)
+    );
+  } catch (e) {
+    failClipboardCheck(expectedPattern);
+  }
+}
+
+function checkClipboard(expectedPattern) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  const expectedRegExp = new RegExp(expectedPattern, "g");
+  return expectedRegExp.test(actual);
+}
+
+function failClipboardCheck(expectedPattern) {
+  // Format expected text for comparison
+  const terminator = Services.appinfo.OS == "WINNT" ? "\r\n" : "\n";
+  expectedPattern = expectedPattern.replace(/\[\\r\\n\][+*]/g, terminator);
+  expectedPattern = expectedPattern.replace(/\\\(/g, "(");
+  expectedPattern = expectedPattern.replace(/\\\)/g, ")");
+
+  let actual = SpecialPowers.getClipboardData("text/plain");
+
+  // Trim the right hand side of our strings. This is because expectedPattern
+  // accounts for windows sometimes adding a newline to our copied data.
+  expectedPattern = expectedPattern.trimRight();
+  actual = actual.trimRight();
+
+  dump(
+    "TEST-UNEXPECTED-FAIL | Clipboard text does not match expected ... " +
+      "results (escaped for accurate comparison):\n"
+  );
+  info("Actual: " + escape(actual));
+  info("Expected: " + escape(expectedPattern));
+}