--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -200,17 +200,17 @@ function CssComputedView(inspector, docu
   gDevTools.on("pref-changed", this._handlePrefChange);
 
   // Refresh panel when pref for showing original sources changes
   this._onSourcePrefChanged = this._onSourcePrefChanged.bind(this);
   this._prefObserver = new PrefObserver("devtools.");
   this._prefObserver.on(PREF_ORIG_SOURCES, this._onSourcePrefChanged);
 
   // The element that we're inspecting, and the document that it comes from.
-  this.viewedElement = null;
+  this._viewedElement = null;
 
   this.createStyleViews();
 
   this._contextmenu = new StyleInspectorMenu(this, { isRuleView: false });
 
   // Add the tooltips and highlightersoverlay
   this.tooltips = new overlays.TooltipsOverlay(this);
   this.tooltips.addToView();
@@ -271,34 +271,34 @@ CssComputedView.prototype = {
    * will show the style information for the given element.
    *
    * @param {NodeFront} element
    *        The highlighted node to get styles for.
    * @returns a promise that will be resolved when highlighting is complete.
    */
   selectElement: function (element) {
     if (!element) {
-      this.viewedElement = null;
+      this._viewedElement = null;
       this.noResults.hidden = false;
 
       if (this._refreshProcess) {
         this._refreshProcess.cancel();
       }
       // Hiding all properties
       for (let propView of this.propertyViews) {
         propView.refresh();
       }
       return promise.resolve(undefined);
     }
 
-    if (element === this.viewedElement) {
+    if (element === this._viewedElement) {
       return promise.resolve(undefined);
     }
 
-    this.viewedElement = element;
+    this._viewedElement = element;
     this.refreshSourceFilter();
 
     return this.refreshPanel();
   },
 
   /**
    * Get the type of a given node in the computed-view
    *
@@ -430,33 +430,33 @@ CssComputedView.prototype = {
     this._createViewsProcess.schedule();
     return deferred.promise;
   },
 
   /**
    * Refresh the panel content.
    */
   refreshPanel: function () {
-    if (!this.viewedElement) {
+    if (!this._viewedElement) {
       return promise.resolve();
     }
 
     // Capture the current viewed element to return from the promise handler
     // early if it changed
-    let viewedElement = this.viewedElement;
+    let viewedElement = this._viewedElement;
 
     return promise.all([
       this._createPropertyViews(),
-      this.pageStyle.getComputed(this.viewedElement, {
+      this.pageStyle.getComputed(this._viewedElement, {
         filter: this._sourceFilter,
         onlyMatched: !this.includeBrowserStyles,
         markMatched: true
       })
     ]).then(([, computed]) => {
-      if (viewedElement !== this.viewedElement) {
+      if (viewedElement !== this._viewedElement) {
         return promise.resolve();
       }
 
       this._matchedProperties = new Set();
       for (let name in computed) {
         if (computed[name].matched) {
           this._matchedProperties.add(name);
         }
@@ -733,17 +733,17 @@ CssComputedView.prototype = {
       console.error(e);
     }
   },
 
   /**
    * Destructor for CssComputedView.
    */
   destroy: function () {
-    this.viewedElement = null;
+    this._viewedElement = null;
     this._outputParser = null;
 
     gDevTools.off("pref-changed", this._handlePrefChange);
 
     this._prefObserver.off(PREF_ORIG_SOURCES, this._onSourcePrefChanged);
     this._prefObserver.destroy();
 
     // Cancel tree construction
@@ -852,17 +852,17 @@ PropertyView.prototype = {
 
   // Matched selector expando
   matchedExpander: null,
 
   // Cache for matched selector views
   _matchedSelectorViews: null,
 
   // The previously selected element used for the selector view caches
-  prevViewedElement: null,
+  _prevViewedElement: null,
 
   /**
    * Get the computed style for the current property.
    *
    * @return {String} the computed style for the current property of the
    * currently highlighted element.
    */
   get value() {
@@ -882,17 +882,17 @@ PropertyView.prototype = {
   get hasMatchedSelectors() {
     return this.tree.matchedProperties.has(this.name);
   },
 
   /**
    * Should this property be visible?
    */
   get visible() {
-    if (!this.tree.viewedElement) {
+    if (!this.tree._viewedElement) {
       return false;
     }
 
     if (!this.tree.includeBrowserStyles && !this.hasMatchedSelectors) {
       return false;
     }
 
     let searchTerm = this.tree.searchField.value.toLowerCase();
@@ -1012,22 +1012,22 @@ PropertyView.prototype = {
 
   /**
    * Refresh the panel's CSS property value.
    */
   refresh: function () {
     this.element.className = this.propertyHeaderClassName;
     this.element.nextElementSibling.className = this.propertyContentClassName;
 
-    if (this.prevViewedElement !== this.tree.viewedElement) {
+    if (this._prevViewedElement !== this.tree._viewedElement) {
       this._matchedSelectorViews = null;
-      this.prevViewedElement = this.tree.viewedElement;
+      this._prevViewedElement = this.tree._viewedElement;
     }
 
-    if (!this.tree.viewedElement || !this.visible) {
+    if (!this.tree._viewedElement || !this.visible) {
       this.valueNode.textContent = this.valueNode.title = "";
       this.matchedSelectorsContainer.parentNode.hidden = true;
       this.matchedSelectorsContainer.textContent = "";
       this.matchedExpander.removeAttribute("open");
       return;
     }
 
     this.tree.numVisibleProperties++;
@@ -1057,17 +1057,17 @@ PropertyView.prototype = {
     if (hasMatchedSelectors) {
       this.matchedExpander.classList.add("expandable");
     } else {
       this.matchedExpander.classList.remove("expandable");
     }
 
     if (this.matchedExpanded && hasMatchedSelectors) {
       return this.tree.pageStyle
-        .getMatchedSelectors(this.tree.viewedElement, this.name)
+        .getMatchedSelectors(this.tree._viewedElement, this.name)
         .then(matched => {
           if (!this.matchedExpanded) {
             return promise.resolve(undefined);
           }
 
           this._matchedSelectorResponse = matched;
 
           return this._buildMatchedSelectors().then(() => {
@@ -1469,17 +1469,17 @@ ComputedViewTool.prototype = {
 
   refresh: function () {
     if (this.isSidebarActive()) {
       this.view.refreshPanel();
     }
   },
 
   onPanelSelected: function () {
-    if (this.inspector.selection.nodeFront === this.view.viewedElement) {
+    if (this.inspector.selection.nodeFront === this.view._viewedElement) {
       this.refresh();
     } else {
       this.onSelected();
     }
   },
 
   /**
    * When markup mutations occur, if an attribute of the selected node changes,

--- a/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
+++ b/devtools/client/inspector/computed/test/browser_computed_matched-selectors_01.js
@@ -17,17 +17,17 @@ add_task(function* () {
   yield selectNode("#test", inspector);
   yield testMatchedSelectors(view, inspector);
 });
 
 function* testMatchedSelectors(view, inspector) {
   info("checking selector counts, matched rules and titles");
 
   let nodeFront = yield getNodeFront("#test", inspector);
-  is(nodeFront, view.viewedElement,
+  is(nodeFront, view._viewedElement,
     "style inspector node matches the selected node");
 
   let propertyView = new PropertyView(view, "color");
   propertyView.buildMain();
   propertyView.buildSelectorContainer();
   propertyView.matchedExpanded = true;
 
   yield propertyView.refreshMatchedSelectors();