--- a/devtools/client/inspector/boxmodel/components/ComputedProperty.js
+++ b/devtools/client/inspector/boxmodel/components/ComputedProperty.js
@@ -91,44 +91,44 @@ module.exports = createClass({
     );
   },
 
   render() {
     const { name, value } = this.props;
 
     return dom.div(
       {
-        className: "property-view",
+        className: "computed-property-view",
         "data-property-name": name,
         tabIndex: "0",
         ref: container => {
           this.container = container;
         },
       },
       dom.div(
         {
-          className: "property-name-container",
+          className: "computed-property-name-container",
         },
         dom.div(
           {
-            className: "property-name theme-fg-color5",
+            className: "computed-property-name theme-fg-color5",
             tabIndex: "",
             title: name,
             onClick: this.onFocus,
           },
           name
         )
       ),
       dom.div(
         {
-          className: "property-value-container",
+          className: "computed-property-value-container",
         },
         dom.div(
           {
-            className: "property-value theme-fg-color1",
+            className: "computed-property-value theme-fg-color1",
             dir: "ltr",
             tabIndex: "",
             onClick: this.onFocus,
           },
           value
         ),
         this.renderReferenceElementPreview()
       )

--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_computed-accordion-state.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_computed-accordion-state.js
@@ -26,18 +26,18 @@ add_task(function* () {
   yield testAccordionStateAfterClickingHeader(doc);
   yield testAccordionStateAfterSwitchingSidebars(inspector, doc);
   yield testAccordionStateAfterReopeningComputedView(toolbox);
 
   Services.prefs.clearUserPref(BOXMODEL_OPENED_PREF);
 });
 
 function* testAccordionStateAfterClickingHeader(doc) {
-  let header = doc.querySelector("#computedview-container .box-model-pane ._header");
-  let bContent = doc.querySelector("#computedview-container .box-model-pane ._content");
+  let header = doc.querySelector("#computed-container .box-model-pane ._header");
+  let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
 
   info("Checking initial state of the box model panel.");
   is(bContent.style.display, "block", "The box model panel content is 'display: block'.");
   ok(Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
     `${BOXMODEL_OPENED_PREF} is pref on by default.`);
 
   info("Clicking the box model header to hide the box model panel.");
   header.click();
@@ -46,17 +46,17 @@ function* testAccordionStateAfterClickin
   is(bContent.style.display, "none", "The box model panel content is 'display: none'.");
   ok(!Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
     `${BOXMODEL_OPENED_PREF} is pref off.`);
 }
 
 function* testAccordionStateAfterSwitchingSidebars(inspector, doc) {
   info("Checking the box model accordion state is persistent after switching sidebars.");
 
-  let bContent = doc.querySelector("#computedview-container .box-model-pane ._content");
+  let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
 
   info("Selecting the layout view.");
   inspector.sidebar.select("layoutview");
 
   info("Selecting the computed view.");
   inspector.sidebar.select("computedview");
 
   info("Checking the state of the box model panel.");
@@ -70,15 +70,15 @@ function* testAccordionStateAfterReopeni
   + "re-opening the layout view.");
 
   info("Closing the toolbox.");
   yield toolbox.destroy();
 
   info("Re-opening the layout view.");
   let { view } = yield openBoxModelView();
   let { document: doc } = view;
-  let bContent = doc.querySelector("#computedview-container .box-model-pane ._content");
+  let bContent = doc.querySelector("#computed-container .box-model-pane ._content");
 
   info("Checking the state of the box model panel.");
   ok(!bContent, "The box model panel content is not rendered.");
   ok(!Services.prefs.getBoolPref(BOXMODEL_OPENED_PREF),
     `${BOXMODEL_OPENED_PREF} is pref off.`);
 }

--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
@@ -11,17 +11,17 @@ const TEST_URI = `
   <div id="relative_parent" style="position: relative">
     <div id="absolute_child" style="position: absolute"></div>
   </div>
   <div id="static"></div>
   <div id="no_parent" style="position: absolute"></div>
   <div id="fixed" style="position: fixed"></div>
 `;
 
-const OFFSET_PARENT_SELECTOR = ".property-value-container .objectBox-node";
+const OFFSET_PARENT_SELECTOR = ".computed-property-value-container .objectBox-node";
 
 const res1 = [
   {
     selector: "#absolute_child",
     offsetParentValue: "div#relative_parent"
   },
   {
     selector: "#no_parent",

--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_properties.js
@@ -110,11 +110,11 @@ function* testChangingValues(inspector, 
 
   for (let { property, value } of res2) {
     let elt = doc.querySelector(getPropertySelector(property));
     is(elt.textContent, value, property + " has the right value after style update.");
   }
 }
 
 function getPropertySelector(propertyName) {
-  return `.boxmodel-properties-wrapper .property-view` +
-  `[data-property-name=${propertyName}] .property-value`;
+  return `.boxmodel-properties-wrapper .computed-property-view` +
+  `[data-property-name=${propertyName}] .computed-property-value`;
 }

--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -174,17 +174,17 @@ function CssComputedView(inspector, docu
   this._onContextMenu = this._onContextMenu.bind(this);
   this._onClick = this._onClick.bind(this);
   this._onCopy = this._onCopy.bind(this);
   this._onFilterStyles = this._onFilterStyles.bind(this);
   this._onClearSearch = this._onClearSearch.bind(this);
   this._onIncludeBrowserStyles = this._onIncludeBrowserStyles.bind(this);
 
   let doc = this.styleDocument;
-  this.element = doc.getElementById("propertyContainer");
+  this.element = doc.getElementById("computed-property-container");
   this.boxModelWrapper = doc.getElementById("boxmodel-wrapper");
   this.searchField = doc.getElementById("computedview-searchbox");
   this.searchClearButton = doc.getElementById("computedview-searchinput-clear");
   this.includeBrowserStylesCheckbox =
     doc.getElementById("browser-style-checkbox");
 
   this.shortcuts = new KeyShortcuts({ window: this.styleWindow });
   this._onShortcut = this._onShortcut.bind(this);
@@ -198,17 +198,17 @@ function CssComputedView(inspector, docu
   this.searchField.addEventListener("contextmenu", this.inspector.onTextBoxContextMenu);
   this.searchClearButton.addEventListener("click", this._onClearSearch);
   this.includeBrowserStylesCheckbox.addEventListener("input",
     this._onIncludeBrowserStyles);
 
   this.searchClearButton.hidden = true;
 
   // No results text.
-  this.noResults = this.styleDocument.getElementById("computedview-no-results");
+  this.noResults = this.styleDocument.getElementById("computed-no-results");
 
   // Refresh panel when color unit changed or pref for showing
   // original sources changes.
   this._handlePrefChange = this._handlePrefChange.bind(this);
   this._onSourcePrefChanged = this._onSourcePrefChanged.bind(this);
   this._prefObserver = new PrefObserver("devtools.");
   this._prefObserver.on(PREF_ORIG_SOURCES, this._onSourcePrefChanged);
   this._prefObserver.on("devtools.defaultColorUnit", this._handlePrefChange);
@@ -342,56 +342,56 @@ CssComputedView.prototype = {
       };
     }
 
     // Walk up the nodes to find out where node is
     let propertyView;
     let propertyContent;
     let parent = node;
     while (parent.parentNode) {
-      if (parent.classList.contains("property-view")) {
+      if (parent.classList.contains("computed-property-view")) {
         propertyView = parent;
         break;
       }
-      if (parent.classList.contains("property-content")) {
+      if (parent.classList.contains("computed-property-content")) {
         propertyContent = parent;
         break;
       }
       parent = parent.parentNode;
     }
     if (!propertyView && !propertyContent) {
       return null;
     }
 
     let value, type;
 
     // Get the property and value for a node that's a property name or value
-    let isHref = classes.contains("theme-link") && !classes.contains("link");
-    if (propertyView && (classes.contains("property-name") ||
-                         classes.contains("property-value") ||
+    let isHref = classes.contains("theme-link") && !classes.contains("computed-link");
+    if (propertyView && (classes.contains("computed-property-name") ||
+                         classes.contains("computed-property-value") ||
                          isHref)) {
       value = {
-        property: parent.querySelector(".property-name").firstChild.textContent,
-        value: parent.querySelector(".property-value").textContent
+        property: parent.querySelector(".computed-property-name").firstChild.textContent,
+        value: parent.querySelector(".computed-property-value").textContent
       };
     }
-    if (propertyContent && (classes.contains("other-property-value") ||
+    if (propertyContent && (classes.contains("computed-other-property-value") ||
                             isHref)) {
       let view = propertyContent.previousSibling;
       value = {
-        property: view.querySelector(".property-name").firstChild.textContent,
+        property: view.querySelector(".computed-property-name").firstChild.textContent,
         value: node.textContent
       };
     }
 
     // Get the type
-    if (classes.contains("property-name")) {
+    if (classes.contains("computed-property-name")) {
       type = VIEW_NODE_PROPERTY_TYPE;
-    } else if (classes.contains("property-value") ||
-               classes.contains("other-property-value")) {
+    } else if (classes.contains("computed-property-value") ||
+               classes.contains("computed-other-property-value")) {
       type = VIEW_NODE_VALUE_TYPE;
     } else if (isHref) {
       type = VIEW_NODE_IMAGE_URL_TYPE;
       value.url = node.href;
     } else {
       return null;
     }
 
@@ -923,33 +923,33 @@ PropertyView.prototype = {
   /**
    * Returns the className that should be assigned to the propertyView.
    *
    * @return {String}
    */
   get propertyHeaderClassName() {
     if (this.visible) {
       let isDark = this.tree._darkStripe = !this.tree._darkStripe;
-      return isDark ? "property-view row-striped" : "property-view";
+      return isDark ? "computed-property-view row-striped" : "computed-property-view";
     }
-    return "property-view-hidden";
+    return "computed-property-hidden";
   },
 
   /**
    * Returns the className that should be assigned to the propertyView content
    * container.
    *
    * @return {String}
    */
   get propertyContentClassName() {
     if (this.visible) {
       let isDark = this.tree._darkStripe;
-      return isDark ? "property-content row-striped" : "property-content";
+      return isDark ? "computed-property-content row-striped" : "computed-property-content";
     }
-    return "property-content-hidden";
+    return "computed-property-hidden";
   },
 
   /**
    * Build the markup for on computed style
    *
    * @return {Element}
    */
   buildMain: function () {
@@ -972,28 +972,28 @@ PropertyView.prototype = {
       // Prevent opening the options panel
       event.preventDefault();
       event.stopPropagation();
     });
     this.shortcuts.on("Return", (name, event) => this.onMatchedToggle(event));
     this.shortcuts.on("Space", (name, event) => this.onMatchedToggle(event));
 
     let nameContainer = doc.createElementNS(HTML_NS, "span");
-    nameContainer.className = "property-name-container";
+    nameContainer.className = "computed-property-name-container";
     this.element.appendChild(nameContainer);
 
     // Build the twisty expand/collapse
     this.matchedExpander = doc.createElementNS(HTML_NS, "div");
-    this.matchedExpander.className = "expander theme-twisty";
+    this.matchedExpander.className = "computed-expander theme-twisty";
     this.matchedExpander.addEventListener("click", this.onMatchedToggle);
     nameContainer.appendChild(this.matchedExpander);
 
     // Build the style name element
     this.nameNode = doc.createElementNS(HTML_NS, "span");
-    this.nameNode.classList.add("property-name", "theme-fg-color5");
+    this.nameNode.classList.add("computed-property-name", "theme-fg-color5");
     // Reset its tabindex attribute otherwise, if an ellipsis is applied
     // it will be reachable via TABing
     this.nameNode.setAttribute("tabindex", "");
     // Avoid english text (css properties) from being altered
     // by RTL mode
     this.nameNode.setAttribute("dir", "ltr");
     this.nameNode.textContent = this.nameNode.title = this.name;
     // Make it hand over the focus to the container
@@ -1004,22 +1004,22 @@ PropertyView.prototype = {
     let nameSeparator = doc.createElementNS(HTML_NS, "span");
     nameSeparator.classList.add("visually-hidden");
     nameSeparator.textContent = ": ";
     this.nameNode.appendChild(nameSeparator);
 
     nameContainer.appendChild(this.nameNode);
 
     let valueContainer = doc.createElementNS(HTML_NS, "span");
-    valueContainer.className = "property-value-container";
+    valueContainer.className = "computed-property-value-container";
     this.element.appendChild(valueContainer);
 
     // Build the style value element
     this.valueNode = doc.createElementNS(HTML_NS, "span");
-    this.valueNode.classList.add("property-value", "theme-fg-color1");
+    this.valueNode.classList.add("computed-property-value", "theme-fg-color1");
     // Reset its tabindex attribute otherwise, if an ellipsis is applied
     // it will be reachable via TABing
     this.valueNode.setAttribute("tabindex", "");
     this.valueNode.setAttribute("dir", "ltr");
     // Make it hand over the focus to the container
     this.valueNode.addEventListener("click", this.onFocus);
 
     // Build the style value ";" separator
@@ -1065,18 +1065,18 @@ PropertyView.prototype = {
     }
 
     this.tree.numVisibleProperties++;
 
     let outputParser = this.tree._outputParser;
     let frag = outputParser.parseCssProperty(this.propertyInfo.name,
       this.propertyInfo.value,
       {
-        colorSwatchClass: "computedview-colorswatch",
-        colorClass: "computedview-color",
+        colorSwatchClass: "computed-colorswatch",
+        colorClass: "computed-color",
         urlClass: "theme-link"
         // No need to use baseURI here as computed URIs are never relative.
       });
     this.valueNode.innerHTML = "";
     this.valueNode.appendChild(frag);
 
     this.refreshMatchedSelectors();
   },
@@ -1084,19 +1084,19 @@ PropertyView.prototype = {
   /**
    * Refresh the panel matched rules.
    */
   refreshMatchedSelectors: function () {
     let hasMatchedSelectors = this.hasMatchedSelectors;
     this.matchedSelectorsContainer.parentNode.hidden = !hasMatchedSelectors;
 
     if (hasMatchedSelectors) {
-      this.matchedExpander.classList.add("expandable");
+      this.matchedExpander.classList.add("computed-expandable");
     } else {
-      this.matchedExpander.classList.remove("expandable");
+      this.matchedExpander.classList.remove("computed-expandable");
     }
 
     if (this.matchedExpanded && hasMatchedSelectors) {
       return this.tree.pageStyle
         .getMatchedSelectors(this.tree._viewedElement, this.name)
         .then(matched => {
           if (!this.matchedExpanded) {
             return promise.resolve(undefined);
@@ -1127,17 +1127,17 @@ PropertyView.prototype = {
 
     for (let selector of this.matchedSelectorViews) {
       let p = createChild(frag, "p");
       let span = createChild(p, "span", {
         class: "rule-link"
       });
       let link = createChild(span, "a", {
         target: "_blank",
-        class: "link theme-link",
+        class: "computed-link theme-link",
         title: selector.href,
         sourcelocation: selector.source,
         tabindex: "0",
         textContent: selector.source
       });
       link.addEventListener("click", selector.openStyleEditor);
       let shortcuts = new KeyShortcuts({
         window: this.tree.styleWindow,
@@ -1152,17 +1152,17 @@ PropertyView.prototype = {
       });
 
       createChild(status, "div", {
         class: "fix-get-selection",
         textContent: selector.sourceText
       });
 
       let valueDiv = createChild(status, "div", {
-        class: "fix-get-selection other-property-value theme-fg-color1"
+        class: "fix-get-selection computed-other-property-value theme-fg-color1"
       });
       valueDiv.appendChild(selector.outputFragment);
       promises.push(selector.ready);
     }
 
     this.matchedSelectorsContainer.innerHTML = "";
     this.matchedSelectorsContainer.appendChild(frag);
     return promise.all(promises);
@@ -1331,18 +1331,18 @@ SelectorView.prototype = {
     // Sadly, because this fragment is added to the template by DOM Templater
     // we lose any events that are attached. This means that URLs will open in a
     // new window. At some point we should fix this by stopping using the
     // templater.
     let outputParser = this.tree._outputParser;
     let frag = outputParser.parseCssProperty(
       this.selectorInfo.name,
       this.selectorInfo.value, {
-        colorSwatchClass: "computedview-colorswatch",
-        colorClass: "computedview-color",
+        colorSwatchClass: "computed-colorswatch",
+        colorClass: "computed-color",
         urlClass: "theme-link",
         baseURI: this.selectorInfo.rule.href
       }
     );
     return frag;
   },
 
   /**

--- a/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
+++ b/devtools/client/inspector/computed/test/browser_computed_cycle_color.js
@@ -25,17 +25,17 @@ add_task(function* () {
   checkColorCycling(container, view);
 
   info("Checking matched selectors");
   container = yield getComputedViewMatchedRules(view, "color");
   yield checkColorCycling(container, view);
 });
 
 function* checkColorCycling(container, view) {
-  let valueNode = container.querySelector(".computedview-color");
+  let valueNode = container.querySelector(".computed-color");
   let win = view.styleWindow;
 
   // "Authored" (default; currently the computed value)
   is(valueNode.textContent, "rgb(255, 0, 0)",
                             "Color displayed as an RGB value.");
 
   let tests = [{
     value: "red",
@@ -52,18 +52,18 @@ function* checkColorCycling(container, v
   }];
 
   for (let test of tests) {
     yield checkSwatchShiftClick(container, win, test.value, test.comment);
   }
 }
 
 function* checkSwatchShiftClick(container, win, expectedValue, comment) {
-  let swatch = container.querySelector(".computedview-colorswatch");
-  let valueNode = container.querySelector(".computedview-color");
+  let swatch = container.querySelector(".computed-colorswatch");
+  let valueNode = container.querySelector(".computed-color");
   swatch.scrollIntoView();
 
   let onUnitChange = swatch.once("unit-change");
   EventUtils.synthesizeMouseAtCenter(swatch, {
     type: "mousedown",
     shiftKey: true
   }, win);
   yield onUnitChange;

--- a/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
+++ b/devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js
@@ -140,17 +140,17 @@ const TEST_DATA = [
       is(nodeInfo.type, VIEW_NODE_SELECTOR_TYPE);
       is(nodeInfo.value, "body");
     }
   },
   {
     desc: "Testing a matched rule value",
     getHoveredNode: function* (view) {
       let el = yield getComputedViewMatchedRules(view, "color");
-      return el.querySelector(".other-property-value");
+      return el.querySelector(".computed-other-property-value");
     },
     assertNodeInfo: function (nodeInfo) {
       is(nodeInfo.type, VIEW_NODE_VALUE_TYPE);
       is(nodeInfo.value.property, "color");
       is(nodeInfo.value.value, "red");
     }
   },
   {

--- a/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
+++ b/devtools/client/inspector/computed/test/browser_computed_keybindings_02.js
@@ -33,34 +33,34 @@ const TEST_URI = `
 `;
 
 add_task(function* () {
   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");
-  let firstStyle = view.styleDocument.querySelector(".property-view");
+  let firstStyle = view.styleDocument.querySelector(".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("VK_TAB", {});
   EventUtils.synthesizeKey("VK_RETURN", {});
   yield onExpanded;
 
   info("Verify the 2nd style has been expanded");
   let secondStyleSelectors = view.styleDocument.querySelectorAll(
-    ".property-content .matchedselectors")[1];
+    ".computed-property-content .matchedselectors")[1];
   ok(secondStyleSelectors.childNodes.length > 0, "Matched selectors expanded");
 
   info("Tab back up and test the same thing, with space");
   onExpanded = inspector.once("computed-view-property-expanded");
   EventUtils.synthesizeKey("VK_TAB", {shiftKey: true});
   EventUtils.synthesizeKey("VK_SPACE", {});
   yield onExpanded;
 
   info("Verify the 1st style has been expanded too");
   let firstStyleSelectors = view.styleDocument.querySelectorAll(
-    ".property-content .matchedselectors")[0];
+    ".computed-property-content .matchedselectors")[0];
   ok(firstStyleSelectors.childNodes.length > 0, "Matched selectors expanded");
 });

--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors-toggle.js
@@ -25,80 +25,80 @@ add_task(function* () {
   yield testExpandOnDblClick(view, inspector);
   yield testCollapseOnDblClick(view, inspector);
 });
 
 function* testExpandOnTwistyClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property expands on twisty click");
 
   info("Getting twisty element");
-  let twisty = styleDocument.querySelector("#propertyContainer .expandable");
+  let twisty = styleDocument.querySelector(".computed-expandable");
   ok(twisty, "Twisty found");
 
   let onExpand = inspector.once("computed-view-property-expanded");
   info("Clicking on the twisty element");
   twisty.click();
 
   yield onExpand;
 
   // Expanded means the matchedselectors div is not empty
-  let div = styleDocument.querySelector(".property-content .matchedselectors");
+  let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length > 0,
     "Matched selectors are expanded on twisty click");
 }
 
 function* testCollapseOnTwistyClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property collapses on twisty click");
 
   info("Getting twisty element");
-  let twisty = styleDocument.querySelector("#propertyContainer .expandable");
+  let twisty = styleDocument.querySelector(".computed-expandable");
   ok(twisty, "Twisty found");
 
   let onCollapse = inspector.once("computed-view-property-collapsed");
   info("Clicking on the twisty element");
   twisty.click();
 
   yield onCollapse;
 
   // Collapsed means the matchedselectors div is empty
-  let div = styleDocument.querySelector(".property-content .matchedselectors");
+  let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length === 0,
     "Matched selectors are collapsed on twisty click");
 }
 
 function* testExpandOnDblClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property expands on container dbl-click");
 
   info("Getting computed property container");
-  let container = styleDocument.querySelector(".property-view");
+  let container = styleDocument.querySelector(".computed-property-view");
   ok(container, "Container found");
 
   container.scrollIntoView();
 
   let onExpand = inspector.once("computed-view-property-expanded");
   info("Dbl-clicking on the container");
   EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
 
   yield onExpand;
 
   // Expanded means the matchedselectors div is not empty
-  let div = styleDocument.querySelector(".property-content .matchedselectors");
+  let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length > 0, "Matched selectors are expanded on dblclick");
 }
 
 function* testCollapseOnDblClick({styleDocument, styleWindow}, inspector) {
   info("Testing that a property collapses on container dbl-click");
 
   info("Getting computed property container");
-  let container = styleDocument.querySelector(".property-view");
+  let container = styleDocument.querySelector(".computed-property-view");
   ok(container, "Container found");
 
   let onCollapse = inspector.once("computed-view-property-collapsed");
   info("Dbl-clicking on the container");
   EventUtils.synthesizeMouseAtCenter(container, {clickCount: 2}, styleWindow);
 
   yield onCollapse;
 
   // Collapsed means the matchedselectors div is empty
-  let div = styleDocument.querySelector(".property-content .matchedselectors");
+  let div = styleDocument.querySelector(".computed-property-content .matchedselectors");
   ok(div.childNodes.length === 0,
     "Matched selectors are collapsed on dblclick");
 }

--- a/devtools/client/inspector/computed/test/head.js
+++ b/devtools/client/inspector/computed/test/head.js
@@ -30,19 +30,19 @@ function fireCopyEvent(element) {
  * @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 (let property of view.styleDocument.querySelectorAll(".property-view")) {
-    let nameSpan = property.querySelector(".property-name");
-    let valueSpan = property.querySelector(".property-value");
+  for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
+    let nameSpan = property.querySelector(".computed-property-name");
+    let valueSpan = property.querySelector(".computed-property-value");
 
     if (nameSpan.firstChild.textContent === name) {
       prop = {nameSpan: nameSpan, valueSpan: valueSpan};
       break;
     }
   }
   return prop;
 }
@@ -63,37 +63,37 @@ function getComputedViewPropertyView(vie
       propView = propertyView;
       break;
     }
   }
   return propView;
 }
 
 /**
- * Get a reference to the property-content element for a given property name in
+ * Get a reference to the computed-property-content element for a given property name in
  * the computed-view.
- * A property-content element always follows (nextSibling) the property itself
+ * 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 property-content element contains matched rules, with selectors,
+ * 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 = Task.async(function* (view, name) {
   let expander;
   let propertyContent;
-  for (let property of view.styleDocument.querySelectorAll(".property-view")) {
-    let nameSpan = property.querySelector(".property-name");
+  for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
+    let nameSpan = property.querySelector(".computed-property-name");
     if (nameSpan.firstChild.textContent === name) {
-      expander = property.querySelector(".expandable");
+      expander = property.querySelector(".computed-expandable");
       propertyContent = property.nextSibling;
       break;
     }
   }
 
   if (!expander.hasAttribute("open")) {
     // Need to expand the property
     let onExpand = view.inspector.once("computed-view-property-expanded");
@@ -127,17 +127,17 @@ function getComputedViewPropertyValue(vi
  *        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");
-  let expandos = view.styleDocument.querySelectorAll("#propertyContainer .expandable");
+  let expandos = view.styleDocument.querySelectorAll(".computed-expandable");
   if (!expandos.length || !expandos[index]) {
     return promise.reject();
   }
 
   let onExpand = view.inspector.once("computed-view-property-expanded");
   expandos[index].click();
   return onExpand;
 }
@@ -147,17 +147,17 @@ function expandComputedViewPropertyByInd
  *
  * @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) {
-  let links = view.styleDocument.querySelectorAll(".rule-link .link");
+  let 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
@@ -173,17 +173,17 @@ function selectAllText(view) {
  * @param {CssComputedView} view
  *        The instance of the computed view panel
  * @param {String} expectedPattern
  *        A regular expression used to check the content of the clipboard
  */
 function* copyAllAndCheckClipboard(view, expectedPattern) {
   selectAllText(view);
   let contentDoc = view.styleDocument;
-  let prop = contentDoc.querySelector(".property-view");
+  let prop = contentDoc.querySelector(".computed-property-view");
 
   try {
     info("Trigger a copy event and wait for the clipboard content");
     yield waitForClipboardPromise(() => fireCopyEvent(prop),
                                   () => checkClipboard(expectedPattern));
   } catch (e) {
     failClipboardCheck(expectedPattern);
   }
@@ -200,17 +200,17 @@ function* copyAllAndCheckClipboard(view,
  *        { start: {prop: 1, offset: 0}, end: {prop: 3, offset: 5} }
  * @param {String} expectedPattern
  *        A regular expression used to check the content of the clipboard
  */
 function* copySomeTextAndCheckClipboard(view, positions, expectedPattern) {
   info("Testing selection copy");
 
   let contentDocument = view.styleDocument;
-  let props = contentDocument.querySelectorAll(".property-view");
+  let props = contentDocument.querySelectorAll(".computed-property-view");
 
   info("Create the text selection range");
   let 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 {

--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -112,40 +112,40 @@
         <div id="ruleview-container" class="ruleview">
           <div id="ruleview-container-focusable" tabindex="-1">
           </div>
         </div>
       </div>
 
       <div id="sidebar-panel-computedview" class="devtools-monospace theme-sidebar inspector-tabpanel"
                 data-localization-bundle="devtools/client/locales/inspector.properties">
-        <div id="computedview-toolbar" class="devtools-toolbar">
+        <div id="computed-toolbar" class="devtools-toolbar">
           <div class="devtools-searchbox has-clear-btn">
             <input id="computedview-searchbox"
                         class="devtools-filterinput devtools-rule-searchbox"
                         type="search"
                         data-localization="placeholder=inspector.filterStyles.placeholder"/>
             <button id="computedview-searchinput-clear" class="devtools-searchinput-clear"></button>
           </div>
           <input id="browser-style-checkbox"
                       type="checkbox"
                       class="includebrowserstyles"/>
           <label id="browser-style-checkbox-label" for="browser-style-checkbox"
                         data-localization="content=inspector.browserStyles.label"></label>
         </div>
 
-        <div id="computedview-container">
-          <div id="computedview-container-focusable" tabindex="-1">
+        <div id="computed-container">
+          <div id="computed-container-focusable" tabindex="-1">
             <div id="boxmodel-wrapper">
             </div>
 
-            <div id="propertyContainer" class="theme-separator" tabindex="0" dir="ltr">
+            <div id="computed-property-container" class="theme-separator" tabindex="0" dir="ltr">
             </div>
 
-            <div id="computedview-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
+            <div id="computed-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
           </div>
         </div>
       </div>
 
       <div id="sidebar-panel-animationinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
         <iframe class="devtools-inspector-tab-frame"></iframe>
       </div>
     </div>

--- a/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
+++ b/devtools/client/inspector/shared/test/browser_styleinspector_tooltip-longhand-fontfamily.js
@@ -91,17 +91,17 @@ function* testExpandedComputedViewProper
     "computed view");
 
   info("Expanding the font-family property to reveal matched selectors");
   let propertyView = getPropertyView(computedView, "font-family");
   propertyView.matchedExpanded = true;
   yield propertyView.refreshMatchedSelectors();
 
   let valueSpan = propertyView.matchedSelectorsContainer
-    .querySelector(".bestmatch .other-property-value");
+    .querySelector(".bestmatch .computed-other-property-value");
 
   let tooltip = computedView.tooltips.getTooltip("previewTooltip");
   let panel = tooltip.panel;
 
   valueSpan.scrollIntoView(true);
   let previewTooltip = yield assertShowPreviewTooltip(computedView, valueSpan);
 
   let images = panel.getElementsByTagName("img");

--- a/devtools/client/inspector/shared/test/head.js
+++ b/devtools/client/inspector/shared/test/head.js
@@ -194,18 +194,18 @@ var simulateColorPickerChange = Task.asy
  * @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 (let property of view.styleDocument.querySelectorAll(".property-view")) {
-    let nameSpan = property.querySelector(".property-name");
+  for (let property of view.styleDocument.querySelectorAll(".computed-property-view")) {
+    let nameSpan = property.querySelector(".computed-property-name");
     let valueSpan = property.querySelector(".property-value");
 
     if (nameSpan.firstChild.textContent === name) {
       prop = {nameSpan, valueSpan};
       break;
     }
   }
   return prop;

--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -327,25 +327,25 @@
 }
 
 .boxmodel-properties-wrapper {
   column-width: 250px;
   column-gap: 20px;
   column-rule: 1px solid var(--theme-splitter-color);
 }
 
-.boxmodel-properties-wrapper .property-view {
+.boxmodel-properties-wrapper .computed-property-view {
   padding-inline-start: 17px;
 }
 
-.boxmodel-properties-wrapper .property-name-container {
+.boxmodel-properties-wrapper .computed-property-name-container {
   flex: 1;
 }
 
-.boxmodel-properties-wrapper .property-value-container {
+.boxmodel-properties-wrapper .computed-property-value-container {
   flex: 1;
   display: block;
 }
 
 .boxmodel-container .reference-element {
   margin-inline-start: 14px;
   margin-block-start: 4px;
   display: block;

--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -6,32 +6,32 @@
 #sidebar-panel-computedview {
   margin: 0;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
 }
 
-#computedview-container {
+#computed-container {
   overflow: auto;
   height: 100%;
 }
 
 /* This extra wrapper only serves as a way to get the content of the view focusable.
    So that when the user reaches it either via keyboard or mouse, we know that the view
    is focused and therefore can handle shortcuts.
    However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
    through it, and the outline is hidden. */
-#computedview-container-focusable {
+#computed-container-focusable {
   height: 100%;
   outline: none;
 }
 
-#computedview-toolbar {
+#computed-toolbar {
   display: flex;
   align-items: center;
   -moz-user-select: none;
 }
 
 #browser-style-checkbox {
   /* Bug 1200073 - extra space before the browser styles checkbox so
      they aren't squished together in a small window. Put also
@@ -40,101 +40,97 @@
   margin-inline-end: 0;
 }
 
 #browser-style-checkbox-label {
   padding-inline-start: 5px;
   margin-inline-end: 5px;
 }
 
-#propertyContainer {
+#computed-property-container {
   -moz-user-select: text;
   overflow-y: auto;
   overflow-x: hidden;
   flex: auto;
 }
 
 .row-striped {
   background: var(--theme-body-background);
 }
 
-.property-view-hidden,
-.property-content-hidden {
+.computed-property-hidden {
   display: none;
 }
 
-.property-view {
+.computed-property-view {
   padding: 2px 0px;
   padding-inline-start: 5px;
   display: flex;
   flex-wrap: wrap;
 }
 
-.property-name-container {
+.computed-property-name-container {
   width: 202px;
 }
 
-.property-value-container {
+.computed-property-value-container {
   display: flex;
   flex: 1 1 168px;
   overflow: hidden;
 }
 
-.property-name-container > *,
-.property-value-container > * {
+.computed-property-name-container > *,
+.computed-property-value-container > * {
   display: inline-block;
   vertical-align: middle;
 }
 
-.property-name {
+.computed-property-name {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: 0 !important;
 }
 
-.other-property-value {
+.computed-other-property-value {
   background-image: url(images/arrow-e.png);
   background-repeat: no-repeat;
   background-size: 5px 8px;
+  background-position: left center;
+  padding-inline-start: 8px;
+}
+
+.computed-other-property-value:dir(rtl) {
+  background-position-x: right;
 }
 
 @media (min-resolution: 1.1dppx) {
-  .other-property-value {
+  .computed-other-property-value {
     background-image: url(images/arrow-e@2x.png);
   }
 }
 
-.property-value {
+.computed-property-value {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   padding-inline-start: 14px;
   outline: 0 !important;
 }
 
-.other-property-value {
-  background-position: left center;
-  padding-inline-start: 8px;
-}
-
-.other-property-value:dir(rtl) {
-  background-position-x: right;
-}
-
-.property-content {
+.computed-property-content {
   padding-inline-start: 17px;
 }
 
-.theme-firebug .property-view,
-.theme-firebug .property-content {
+.theme-firebug .computed-property-view,
+.theme-firebug .computed-property-content {
   font-family: var(--proportional-font-family);
 }
 
-.theme-firebug .property-view {
+.theme-firebug .computed-property-view {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 /* Bug 1360238 - getSelection displays an extra "\n" on multiple sibling block elements.
    We rely on this behavior to add an extra "\n" between matched selectors (Bug 1222737).
    Therefore we use <div> elements around matched selectors and need this class
    to keep them inline. We do that to avoid doing any formatting logic in JS.
    Once Bug 1360238 will be fixed, we'll probably have to change the behavior
@@ -143,21 +139,21 @@
   display: inline;
 }
 
 .visually-hidden {
   opacity: 0;
 }
 
 /* From skin */
-.expander {
+.computed-expander {
   visibility: hidden;
 }
 
-.expandable {
+.computed-expandable {
   visibility: visible;
 }
 
 .match {
   visibility: hidden;
 }
 
 .matchedselectors > p {
@@ -178,69 +174,67 @@
 .matched {
   text-decoration: line-through;
 }
 
 .parentmatch {
   opacity: 0.5;
 }
 
-#computedview-no-results {
+#computed-no-results {
   height: 100%;
 }
 
 .onlyuserstyles {
   cursor: pointer;
 }
 
 .legendKey {
   margin: 0 5px;
 }
 
-.link {
+.computed-link {
   padding: 0 3px;
   cursor: pointer;
   float: right;
 }
 
 /* Workaround until float: inline-end; is enabled by default */
-.link:dir(rtl) {
+.computed-link:dir(rtl) {
   float: left;
 }
 
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
 
-.link,
-.link:visited {
+.computed-link,
+.computed-link:visited {
   color: #0091ff;
 }
 
-.link,
-.helplink,
-.link:visited,
-.helplink:visited {
+.computed-link,
+.computed-link:visited {
   text-decoration: none;
 }
 
-.link:hover {
+.computed-link:hover {
   text-decoration: underline;
 }
 
-.computedview-colorswatch {
+.computed-colorswatch {
   border-radius: 50%;
   width: 0.9em;
   height: 0.9em;
   vertical-align: middle;
   margin-inline-end: 5px;
   display: inline-block;
   position: relative;
 }
 
-.computedview-colorswatch::before {
+.computed-colorswatch::before {
   content: '';
   background-color: #eee;
   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                     linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
   background-size: 12px 12px;
   background-position: 0 0, 6px 6px;
   position: absolute;
   border-radius: 50%;

--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -176,17 +176,17 @@ body {
   border-color: var(--theme-splitter-color);
 }
 
 .theme-fg-contrast { /* To be used for text on theme-bg-contrast */
   color: black;
 }
 
 .ruleview-swatch,
-.computedview-colorswatch {
+.computed-colorswatch {
   box-shadow: 0 0 0 1px #818181;
 }
 
 /* CodeMirror specific styles.
  * Best effort to match the existing theme, some of the colors
  * are duplicated here to prevent weirdness in the main theme. */
 
 .CodeMirror.cm-s-mozilla  { /* Inherit platform specific font sizing and styles */

--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -186,17 +186,17 @@ window {
 /* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */
 .inspector-tabpanel > * {
   -moz-user-focus: normal;
 }
 
 /* "no results" warning message displayed in the ruleview and in the computed view */
 
 #ruleview-no-results,
-#computedview-no-results {
+#computed-no-results {
   color: var(--theme-body-color-inactive);
   text-align: center;
   margin: 5px;
 }
 
 /* Markup Box */
 
 iframe {

--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -178,17 +178,17 @@ body {
 .devtools-sidebar-alltabs,
 .cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
   color: var(--theme-body-color);
   background-color: var(--theme-toolbar-background);
   border-color: var(--theme-splitter-color);
 }
 
 .ruleview-swatch,
-.computedview-colorswatch {
+.computed-colorswatch {
   box-shadow: 0 0 0 1px #c4c4c4;
 }
 
 /* CodeMirror specific styles.
  * Best effort to match the existing theme, some of the colors
  * are duplicated here to prevent weirdness in the main theme. */
 
 .CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */