Bug 1237441 - Move styleinspector directory into the shared inspector directory r=pbro

devtools/client/inspector/computed/computed.js

@@ -11,19 +11,19 @@
 const {Cc, Ci, Cu} = require("chrome");
 
 const ToolDefinitions = require("devtools/client/main").Tools;
-const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+const {CssLogic} = require("devtools/shared/inspector/css-logic");
 const {ELEMENT_STYLE} = require("devtools/server/actors/styles");
 const promise = require("promise");
 const {setTimeout, clearTimeout} = Cu.import("resource://gre/modules/Timer.jsm", {});
 const {OutputParser} = require("devtools/client/shared/output-parser");
 const {PrefObserver, PREF_ORIG_SOURCES} = require("devtools/client/styleeditor/utils");
-const {createChild} = require("devtools/client/styleinspector/utils");
+const {createChild} = require("devtools/client/inspector/shared/utils");
 const {gDevTools} = Cu.import("resource://devtools/client/framework/gDevTools.jsm", {});
 
 loader.lazyRequireGetter(this, "overlays",
-  "devtools/client/styleinspector/style-inspector-overlays");
+  "devtools/client/inspector/shared/style-inspector-overlays");
 loader.lazyRequireGetter(this, "StyleInspectorMenu",
-  "devtools/client/styleinspector/style-inspector-menu");
+  "devtools/client/inspector/shared/style-inspector-menu");
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@@ -31,6 +31,16 @@ Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",
                                   "resource://gre/modules/PluralForm.jsm");
 
+XPCOMUtils.defineLazyGetter(CssComputedView, "_strings", function() {
+  return Services.strings.createBundle(
+    "chrome://devtools-shared/locale/styleinspector.properties");
+});
+
+XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
+  return Cc["@mozilla.org/widget/clipboardhelper;1"]
+         .getService(Ci.nsIClipboardHelper);
+});
+
 const FILTER_CHANGED_TIMEOUT = 150;
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
@@ -223,16 +233,6 @@ CssComputedView.l10n = function(name) {
   }
 };
 
-XPCOMUtils.defineLazyGetter(CssComputedView, "_strings", function() {
-  return Services.strings.createBundle(
-    "chrome://devtools-shared/locale/styleinspector.properties");
-});
-
-XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
-  return Cc["@mozilla.org/widget/clipboardhelper;1"]
-         .getService(Ci.nsIClipboardHelper);
-});
-
 CssComputedView.prototype = {
   // Cache the list of properties that match the selected element.
   _matchedProperties: null,
@@ -1406,5 +1406,125 @@ SelectorView.prototype = {
   }
 };
 
+function ComputedViewTool(inspector, window) {
+  this.inspector = inspector;
+  this.document = window.document;
+
+  this.view = new CssComputedView(this.inspector, this.document,
+    this.inspector.pageStyle);
+
+  this.onSelected = this.onSelected.bind(this);
+  this.refresh = this.refresh.bind(this);
+  this.onPanelSelected = this.onPanelSelected.bind(this);
+  this.onMutations = this.onMutations.bind(this);
+  this.onResized = this.onResized.bind(this);
+
+  this.inspector.selection.on("detached", this.onSelected);
+  this.inspector.selection.on("new-node-front", this.onSelected);
+  this.inspector.selection.on("pseudoclass", this.refresh);
+  this.inspector.sidebar.on("computedview-selected", this.onPanelSelected);
+  this.inspector.pageStyle.on("stylesheet-updated", this.refresh);
+  this.inspector.walker.on("mutations", this.onMutations);
+  this.inspector.walker.on("resize", this.onResized);
+
+  this.view.selectElement(null);
+
+  this.onSelected();
+}
+
+ComputedViewTool.prototype = {
+  isSidebarActive: function() {
+    if (!this.view) {
+      return false;
+    }
+    return this.inspector.sidebar.getCurrentTabID() == "computedview";
+  },
+
+  onSelected: function(event) {
+    // Ignore the event if the view has been destroyed, or if it's inactive.
+    // But only if the current selection isn't null. If it's been set to null,
+    // let the update go through as this is needed to empty the view on
+    // navigation.
+    if (!this.view) {
+      return;
+    }
+
+    let isInactive = !this.isSidebarActive() &&
+                     this.inspector.selection.nodeFront;
+    if (isInactive) {
+      return;
+    }
+
+    this.view.setPageStyle(this.inspector.pageStyle);
+
+    if (!this.inspector.selection.isConnected() ||
+        !this.inspector.selection.isElementNode()) {
+      this.view.selectElement(null);
+      return;
+    }
+
+    if (!event || event == "new-node-front") {
+      let done = this.inspector.updating("computed-view");
+      this.view.selectElement(this.inspector.selection.nodeFront).then(() => {
+        done();
+      });
+    }
+  },
+
+  refresh: function() {
+    if (this.isSidebarActive()) {
+      this.view.refreshPanel();
+    }
+  },
+
+  onPanelSelected: function() {
+    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,
+   * we need to refresh the view as that might change the node's styles.
+   */
+  onMutations: function(mutations) {
+    for (let {type, target} of mutations) {
+      if (target === this.inspector.selection.nodeFront &&
+          type === "attributes") {
+        this.refresh();
+        break;
+      }
+    }
+  },
+
+  /**
+   * When the window gets resized, this may cause media-queries to match, and
+   * therefore, different styles may apply.
+   */
+  onResized: function() {
+    this.refresh();
+  },
+
+  destroy: function() {
+    this.inspector.walker.off("mutations", this.onMutations);
+    this.inspector.walker.off("resize", this.onResized);
+    this.inspector.sidebar.off("computedview-selected", this.refresh);
+    this.inspector.selection.off("pseudoclass", this.refresh);
+    this.inspector.selection.off("new-node-front", this.onSelected);
+    this.inspector.selection.off("detached", this.onSelected);
+    this.inspector.sidebar.off("computedview-selected", this.onPanelSelected);
+    if (this.inspector.pageStyle) {
+      this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
+    }
+
+    this.view.destroy();
+
+    this.view = this.document = this.inspector = null;
+  }
+};
+
 exports.CssComputedView = CssComputedView;
+exports.ComputedViewTool = ComputedViewTool;
 exports.PropertyView = PropertyView;

devtools/client/inspector/computed/computed.xhtml

@@ -38,8 +38,8 @@
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
         let {require} = Components.utils.import("resource://devtools/shared/Loader.jsm", {});
-        let inspector = require("devtools/client/styleinspector/style-inspector");
-        this.computedview = new inspector.ComputedViewTool(panel, window);
+        let {ComputedViewTool} = require("devtools/client/inspector/computed/computed");
+        this.computedview = new ComputedViewTool(panel, window);
       }
       window.onunload = function() {
         if (this.computedview) {

devtools/client/inspector/computed/test/browser_computed_getNodeInfo.js

@@ -20,7 +20,7 @@ const {
   VIEW_NODE_PROPERTY_TYPE,
   VIEW_NODE_VALUE_TYPE,
   VIEW_NODE_IMAGE_URL_TYPE
-} = require("devtools/client/styleinspector/style-inspector-overlays");
+} = require("devtools/client/inspector/shared/style-inspector-overlays");
 
 const TEST_URI = `
   <style type="text/css">

devtools/client/inspector/computed/test/browser_computed_media-queries.js

@@ -10,7 +10,7 @@
 const TEST_URI = TEST_URL_ROOT + "doc_media_queries.html";
 
 var {PropertyView} = require("devtools/client/inspector/computed/computed");
-var {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+var {CssLogic} = require("devtools/shared/inspector/css-logic");
 
 add_task(function*() {
   yield addTab(TEST_URI);

devtools/client/inspector/moz.build

@@ -7,7 +7,8 @@ DIRS += [
     'fonts',
     'layout',
     'markup',
-    'rules'
+    'rules',
+    'shared'
 ]
 
 DevToolsModules(

devtools/client/inspector/rules/models/element-style.js

@@ -9,7 +9,7 @@
 const {Cc, Ci, Cu} = require("chrome");
 const promise = require("promise");
 const {Rule} = require("devtools/client/inspector/rules/models/rule");
-const {promiseWarn} = require("devtools/client/styleinspector/utils");
+const {promiseWarn} = require("devtools/client/inspector/shared/utils");
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 

devtools/client/inspector/rules/models/rule.js

@@ -8,11 +8,11 @@
 
 const {Cc, Ci, Cu} = require("chrome");
 const promise = require("promise");
-const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+const {CssLogic} = require("devtools/shared/inspector/css-logic");
 const {ELEMENT_STYLE} = require("devtools/server/actors/styles");
 const {TextProperty} =
       require("devtools/client/inspector/rules/models/text-property");
-const {promiseWarn} = require("devtools/client/styleinspector/utils");
+const {promiseWarn} = require("devtools/client/inspector/shared/utils");
 const {parseDeclarations} = require("devtools/client/shared/css-parsing-utils");
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");

devtools/client/inspector/rules/rules.js

@@ -3,14 +3,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* globals gDevTools */
 
 "use strict";
 
 const {Cc, Ci, Cu} = require("chrome");
 const promise = require("promise");
+const {Tools} = require("devtools/client/main");
 const {setTimeout, clearTimeout} =
       Cu.import("resource://gre/modules/Timer.jsm", {});
-const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+const {CssLogic} = require("devtools/shared/inspector/css-logic");
 const {InplaceEditor, editableField, editableItem} =
       require("devtools/client/shared/inplace-editor");
 const {ELEMENT_STYLE} = require("devtools/server/actors/styles");
@@ -27,7 +29,7 @@ const {
   blurOnMultipleProperties,
   promiseWarn,
   throttle
-} = require("devtools/client/styleinspector/utils");
+} = require("devtools/client/inspector/shared/utils");
 const {
   parseDeclarations,
   parseSingleValue,
@@ -39,6 +41,16 @@ const {
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
+loader.lazyGetter(this, "gDevTools", () =>
+  Cu.import("resource://devtools/client/framework/gDevTools.jsm", {}).gDevTools);
+loader.lazyRequireGetter(this, "overlays",
+  "devtools/client/inspector/shared/style-inspector-overlays");
+loader.lazyRequireGetter(this, "EventEmitter",
+  "devtools/shared/event-emitter");
+loader.lazyRequireGetter(this, "StyleInspectorMenu",
+  "devtools/client/inspector/shared/style-inspector-menu");
+loader.lazyImporter(this, "Services", "resource://gre/modules/Services.jsm");
+
 XPCOMUtils.defineLazyGetter(this, "clipboardHelper", function() {
   return Cc["@mozilla.org/widget/clipboardhelper;1"]
     .getService(Ci.nsIClipboardHelper);
@@ -53,14 +65,6 @@ loader.lazyGetter(this, "AutocompletePopup", function() {
   return require("devtools/client/shared/autocomplete-popup").AutocompletePopup;
 });
 
-loader.lazyRequireGetter(this, "overlays",
-  "devtools/client/styleinspector/style-inspector-overlays");
-loader.lazyRequireGetter(this, "EventEmitter",
-  "devtools/shared/event-emitter");
-loader.lazyRequireGetter(this, "StyleInspectorMenu",
-  "devtools/client/styleinspector/style-inspector-menu");
-loader.lazyImporter(this, "Services", "resource://gre/modules/Services.jsm");
-
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
@@ -248,8 +252,6 @@ function CssRuleView(inspector, document, store, pageStyle) {
   EventEmitter.decorate(this);
 }
 
-exports.CssRuleView = CssRuleView;
-
 CssRuleView.prototype = {
   // The element that we're inspecting.
   _viewedElement: null,
@@ -2837,3 +2839,176 @@ function getPropertyNameAndValue(node) {
     node = node.parentNode;
   }
 }
+
+function RuleViewTool(inspector, window) {
+  this.inspector = inspector;
+  this.document = window.document;
+
+  this.view = new CssRuleView(this.inspector, this.document);
+
+  this.onLinkClicked = this.onLinkClicked.bind(this);
+  this.onSelected = this.onSelected.bind(this);
+  this.refresh = this.refresh.bind(this);
+  this.clearUserProperties = this.clearUserProperties.bind(this);
+  this.onPropertyChanged = this.onPropertyChanged.bind(this);
+  this.onViewRefreshed = this.onViewRefreshed.bind(this);
+  this.onPanelSelected = this.onPanelSelected.bind(this);
+  this.onMutations = this.onMutations.bind(this);
+  this.onResized = this.onResized.bind(this);
+
+  this.view.on("ruleview-changed", this.onPropertyChanged);
+  this.view.on("ruleview-refreshed", this.onViewRefreshed);
+  this.view.on("ruleview-linked-clicked", this.onLinkClicked);
+
+  this.inspector.selection.on("detached", this.onSelected);
+  this.inspector.selection.on("new-node-front", this.onSelected);
+  this.inspector.selection.on("pseudoclass", this.refresh);
+  this.inspector.target.on("navigate", this.clearUserProperties);
+  this.inspector.sidebar.on("ruleview-selected", this.onPanelSelected);
+  this.inspector.pageStyle.on("stylesheet-updated", this.refresh);
+  this.inspector.walker.on("mutations", this.onMutations);
+  this.inspector.walker.on("resize", this.onResized);
+
+  this.onSelected();
+}
+
+RuleViewTool.prototype = {
+  isSidebarActive: function() {
+    if (!this.view) {
+      return false;
+    }
+    return this.inspector.sidebar.getCurrentTabID() == "ruleview";
+  },
+
+  onSelected: function(event) {
+    // Ignore the event if the view has been destroyed, or if it's inactive.
+    // But only if the current selection isn't null. If it's been set to null,
+    // let the update go through as this is needed to empty the view on
+    // navigation.
+    if (!this.view) {
+      return;
+    }
+
+    let isInactive = !this.isSidebarActive() &&
+                     this.inspector.selection.nodeFront;
+    if (isInactive) {
+      return;
+    }
+
+    this.view.setPageStyle(this.inspector.pageStyle);
+
+    if (!this.inspector.selection.isConnected() ||
+        !this.inspector.selection.isElementNode()) {
+      this.view.selectElement(null);
+      return;
+    }
+
+    if (!event || event == "new-node-front") {
+      let done = this.inspector.updating("rule-view");
+      this.view.selectElement(this.inspector.selection.nodeFront)
+        .then(done, done);
+    }
+  },
+
+  refresh: function() {
+    if (this.isSidebarActive()) {
+      this.view.refreshPanel();
+    }
+  },
+
+  clearUserProperties: function() {
+    if (this.view && this.view.store && this.view.store.userProperties) {
+      this.view.store.userProperties.clear();
+    }
+  },
+
+  onPanelSelected: function() {
+    if (this.inspector.selection.nodeFront === this.view.viewedElement) {
+      this.refresh();
+    } else {
+      this.onSelected();
+    }
+  },
+
+  onLinkClicked: function(e, rule) {
+    let sheet = rule.parentStyleSheet;
+
+    // Chrome stylesheets are not listed in the style editor, so show
+    // these sheets in the view source window instead.
+    if (!sheet || sheet.isSystem) {
+      let href = rule.nodeHref || rule.href;
+      let toolbox = gDevTools.getToolbox(this.inspector.target);
+      toolbox.viewSource(href, rule.line);
+      return;
+    }
+
+    let location = promise.resolve(rule.location);
+    if (Services.prefs.getBoolPref(PREF_ORIG_SOURCES)) {
+      location = rule.getOriginalLocation();
+    }
+    location.then(({ source, href, line, column }) => {
+      let target = this.inspector.target;
+      if (Tools.styleEditor.isTargetSupported(target)) {
+        gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
+          let sheet = source || href;
+          toolbox.getCurrentPanel().selectStyleSheet(sheet, line, column);
+        });
+      }
+      return;
+    });
+  },
+
+  onPropertyChanged: function() {
+    this.inspector.markDirty();
+  },
+
+  onViewRefreshed: function() {
+    this.inspector.emit("rule-view-refreshed");
+  },
+
+  /**
+   * When markup mutations occur, if an attribute of the selected node changes,
+   * we need to refresh the view as that might change the node's styles.
+   */
+  onMutations: function(mutations) {
+    for (let {type, target} of mutations) {
+      if (target === this.inspector.selection.nodeFront &&
+          type === "attributes") {
+        this.refresh();
+        break;
+      }
+    }
+  },
+
+  /**
+   * When the window gets resized, this may cause media-queries to match, and
+   * therefore, different styles may apply.
+   */
+  onResized: function() {
+    this.refresh();
+  },
+
+  destroy: function() {
+    this.inspector.walker.off("mutations", this.onMutations);
+    this.inspector.walker.off("resize", this.onResized);
+    this.inspector.selection.off("detached", this.onSelected);
+    this.inspector.selection.off("pseudoclass", this.refresh);
+    this.inspector.selection.off("new-node-front", this.onSelected);
+    this.inspector.target.off("navigate", this.clearUserProperties);
+    this.inspector.sidebar.off("ruleview-selected", this.onPanelSelected);
+    if (this.inspector.pageStyle) {
+      this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
+    }
+
+    this.view.off("ruleview-linked-clicked", this.onLinkClicked);
+    this.view.off("ruleview-changed", this.onPropertyChanged);
+    this.view.off("ruleview-refreshed", this.onViewRefreshed);
+
+    this.view.destroy();
+
+    this.view = this.document = this.inspector = null;
+  }
+};
+
+exports.CssRuleView = CssRuleView;
+exports.RuleViewTool = RuleViewTool;

devtools/client/inspector/rules/rules.xhtml

@@ -23,8 +23,8 @@
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
         let {require} = Components.utils.import("resource://devtools/shared/Loader.jsm", {});
-        let inspector = require("devtools/client/styleinspector/style-inspector");
-        this.ruleview = new inspector.RuleViewTool(panel, window);
+        let {RuleViewTool} = require("devtools/client/inspector/rules/rules");
+        this.ruleview = new RuleViewTool(panel, window);
       }
       window.onunload = function() {
         if (this.ruleview) {

devtools/client/inspector/rules/test/doc_frame_script.js

@@ -18,7 +18,7 @@
 var {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
 
 var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
-var {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+var {CssLogic} = require("devtools/shared/inspector/css-logic");
 var promise = require("promise");
 
 /**

devtools/client/inspector/rules/test/head.js

@@ -10,7 +10,7 @@ var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
 var {TargetFactory} = require("devtools/client/framework/target");
 var {CssRuleView, _ElementStyle} =
     require("devtools/client/inspector/rules/rules");
-var {CssLogic, CssSelector} = require("devtools/shared/styleinspector/css-logic");
+var {CssLogic, CssSelector} = require("devtools/shared/inspector/css-logic");
 var DevToolsUtils = require("devtools/shared/DevToolsUtils");
 var promise = require("promise");
 var {editableField, getInplaceEditorForSpan: inplaceEditor} =

devtools/client/inspector/shared/moz.build

@@ -4,11 +4,10 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
-
 DevToolsModules(
     'style-inspector-menu.js',
     'style-inspector-overlays.js',
-    'style-inspector.js',
-    'utils.js',
+    'utils.js'
 )
+
+BROWSER_CHROME_MANIFESTS += ['test/browser.ini']

devtools/client/inspector/shared/style-inspector-menu.js

@@ -3,14 +3,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* global _strings */
 
 "use strict";
 
-const {Cc, Ci, Cu} = require("chrome");
 const {PREF_ORIG_SOURCES} = require("devtools/client/styleeditor/utils");
 
 loader.lazyRequireGetter(this, "overlays",
-  "devtools/client/styleinspector/style-inspector-overlays");
+  "devtools/client/inspector/shared/style-inspector-overlays");
 loader.lazyImporter(this, "Services", "resource://gre/modules/Services.jsm");
 loader.lazyServiceGetter(this, "clipboardHelper",
   "@mozilla.org/widget/clipboardhelper;1", "nsIClipboardHelper");
@@ -71,7 +71,7 @@ StyleInspectorMenu.prototype = {
       this.styleDocument.popupNode = event.explicitOriginalTarget;
       this.styleWindow.focus();
       this._menupopup.openPopupAtScreen(event.screenX, event.screenY, true);
-    } catch(e) {
+    } catch (e) {
       console.error(e);
     }
   },

devtools/client/inspector/shared/style-inspector-overlays.js

@@ -12,7 +12,7 @@
 // - in-content highlighters that appear when hovering over property values
 // - etc.
 
-const {Cc, Ci, Cu} = require("chrome");
+const {Cu} = require("chrome");
 const {
   Tooltip,
   SwatchColorPickerTooltip,

devtools/client/inspector/shared/test/.eslintrc

@@ -1,4 +1,4 @@
 {
   // Extend from the shared list of defined globals for mochitests.
-  "extends": "../../../.eslintrc.mochitests"
+  "extends": "../../../../.eslintrc.mochitests"
 }

devtools/client/inspector/shared/test/doc_frame_script.js

@@ -18,7 +18,7 @@
 var {classes: Cc, interfaces: Ci, utils: Cu, results: Cr} = Components;
 
 var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
-var {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+var {CssLogic} = require("devtools/shared/inspector/css-logic");
 var promise = require("promise");
 
 /**

devtools/client/inspector/shared/test/head.js

@@ -9,7 +9,7 @@ var {gDevTools} = Cu.import("resource://devtools/client/framework/gDevTools.jsm"
 var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
 var {TargetFactory} = require("devtools/client/framework/target");
 var {CssRuleView, _ElementStyle} = require("devtools/client/inspector/rules/rules");
-var {CssLogic, CssSelector} = require("devtools/shared/styleinspector/css-logic");
+var {CssLogic, CssSelector} = require("devtools/shared/inspector/css-logic");
 var DevToolsUtils = require("devtools/shared/DevToolsUtils");
 var promise = require("promise");
 var {editableField, getInplaceEditorForSpan: inplaceEditor} =
@@ -21,9 +21,9 @@ var {console} =
 waitForExplicitFinish();
 
 const TEST_URL_ROOT =
-  "http://example.com/browser/devtools/client/styleinspector/test/";
+  "http://example.com/browser/devtools/client/inspector/shared/test/";
 const TEST_URL_ROOT_SSL =
-  "https://example.com/browser/devtools/client/styleinspector/test/";
+  "https://example.com/browser/devtools/client/inspector/shared/test/";
 const ROOT_TEST_DIR = getRootDirectory(gTestPath);
 const FRAME_SCRIPT_URL = ROOT_TEST_DIR + "doc_frame_script.js";
 

devtools/client/moz.build

@@ -31,7 +31,6 @@ DIRS += [
     'sourceeditor',
     'storage',
     'styleeditor',
-    'styleinspector',
     'themes',
     'tilt',
     'webaudioeditor',

devtools/client/shared/test/unit/test_advanceValidate.js

@@ -10,7 +10,7 @@
 var Cu = Components.utils;
 var Ci = Components.interfaces;
 var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
-var {advanceValidate} = require("devtools/client/styleinspector/utils");
+var {advanceValidate} = require("devtools/client/inspector/shared/utils");
 
 //                            1         2         3
 //                  0123456789012345678901234567890

devtools/client/styleeditor/StyleSheetEditor.jsm

@@ -14,7 +14,7 @@ const Cu = Components.utils;
 const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
 const Editor  = require("devtools/client/sourceeditor/editor");
 const promise = require("promise");
-const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+const {CssLogic} = require("devtools/shared/inspector/css-logic");
 const {console} = require("resource://gre/modules/Console.jsm");
 
 Cu.import("resource://gre/modules/Services.jsm");

devtools/client/styleeditor/test/browser_styleeditor_sync.js

@@ -6,7 +6,7 @@
 // Test that changes in the style inspector are synchronized into the
 // style editor.
 
-Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/styleinspector/test/head.js", this);
+Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
 
 const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
 

devtools/client/styleeditor/test/browser_styleeditor_syncAddRule.js

@@ -5,7 +5,7 @@
 
 // Test that adding a new rule is synced to the style editor.
 
-Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/styleinspector/test/head.js", this);
+Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
 
 const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
 

devtools/client/styleeditor/test/browser_styleeditor_syncAlreadyOpen.js

@@ -6,7 +6,7 @@
 // Test that changes in the style inspector are synchronized into the
 // style editor.
 
-Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/styleinspector/test/head.js", this);
+Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
 
 const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
 

devtools/client/styleeditor/test/browser_styleeditor_syncEditSelector.js

@@ -6,7 +6,7 @@
 // Test that changes in the style inspector are synchronized into the
 // style editor.
 
-Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/styleinspector/test/head.js", this);
+Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
 
 const TESTCASE_URI = TEST_BASE_HTTP + "sync.html";
 

devtools/client/styleeditor/test/browser_styleeditor_syncIntoRuleView.js

@@ -6,7 +6,7 @@
 // Test that changes in the style editor are synchronized into the
 // style inspector.
 
-Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/styleinspector/test/head.js", this);
+Services.scriptloader.loadSubScript("chrome://mochitests/content/browser/devtools/client/inspector/shared/test/head.js", this);
 
 const TEST_URI = `
   <style type='text/css'>

devtools/client/styleinspector/style-inspector.js

@@ -1,317 +0,0 @@
-/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=80: */
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const {Cu} = require("chrome");
-const promise = require("promise");
-const {Tools} = require("devtools/client/main");
-Cu.import("resource://gre/modules/Services.jsm");
-const {PREF_ORIG_SOURCES} = require("devtools/client/styleeditor/utils");
-
-loader.lazyGetter(this, "gDevTools", () =>
-  Cu.import("resource://devtools/client/framework/gDevTools.jsm", {}).gDevTools);
-loader.lazyGetter(this, "RuleView",
-  () => require("devtools/client/inspector/rules/rules"));
-loader.lazyGetter(this, "ComputedView",
-  () => require("devtools/client/inspector/computed/computed"));
-loader.lazyGetter(this, "_strings", () => Services.strings
-  .createBundle("chrome://devtools-shared/locale/styleinspector.properties"));
-
-// This module doesn't currently export any symbols directly, it only
-// registers inspector tools.
-
-function RuleViewTool(inspector, window) {
-  this.inspector = inspector;
-  this.document = window.document;
-
-  this.view = new RuleView.CssRuleView(this.inspector, this.document);
-
-  this.onLinkClicked = this.onLinkClicked.bind(this);
-  this.onSelected = this.onSelected.bind(this);
-  this.refresh = this.refresh.bind(this);
-  this.clearUserProperties = this.clearUserProperties.bind(this);
-  this.onPropertyChanged = this.onPropertyChanged.bind(this);
-  this.onViewRefreshed = this.onViewRefreshed.bind(this);
-  this.onPanelSelected = this.onPanelSelected.bind(this);
-  this.onMutations = this.onMutations.bind(this);
-  this.onResized = this.onResized.bind(this);
-
-  this.view.on("ruleview-changed", this.onPropertyChanged);
-  this.view.on("ruleview-refreshed", this.onViewRefreshed);
-  this.view.on("ruleview-linked-clicked", this.onLinkClicked);
-
-  this.inspector.selection.on("detached", this.onSelected);
-  this.inspector.selection.on("new-node-front", this.onSelected);
-  this.inspector.selection.on("pseudoclass", this.refresh);
-  this.inspector.target.on("navigate", this.clearUserProperties);
-  this.inspector.sidebar.on("ruleview-selected", this.onPanelSelected);
-  this.inspector.pageStyle.on("stylesheet-updated", this.refresh);
-  this.inspector.walker.on("mutations", this.onMutations);
-  this.inspector.walker.on("resize", this.onResized);
-
-  this.onSelected();
-}
-
-RuleViewTool.prototype = {
-  isSidebarActive: function() {
-    if (!this.view) {
-      return false;
-    }
-    return this.inspector.sidebar.getCurrentTabID() == "ruleview";
-  },
-
-  onSelected: function(event) {
-    // Ignore the event if the view has been destroyed, or if it's inactive.
-    // But only if the current selection isn't null. If it's been set to null,
-    // let the update go through as this is needed to empty the view on
-    // navigation.
-    if (!this.view) {
-      return;
-    }
-
-    let isInactive = !this.isSidebarActive() &&
-                     this.inspector.selection.nodeFront;
-    if (isInactive) {
-      return;
-    }
-
-    this.view.setPageStyle(this.inspector.pageStyle);
-
-    if (!this.inspector.selection.isConnected() ||
-        !this.inspector.selection.isElementNode()) {
-      this.view.selectElement(null);
-      return;
-    }
-
-    if (!event || event == "new-node-front") {
-      let done = this.inspector.updating("rule-view");
-      this.view.selectElement(this.inspector.selection.nodeFront)
-        .then(done, done);
-    }
-  },
-
-  refresh: function() {
-    if (this.isSidebarActive()) {
-      this.view.refreshPanel();
-    }
-  },
-
-  clearUserProperties: function() {
-    if (this.view && this.view.store && this.view.store.userProperties) {
-      this.view.store.userProperties.clear();
-    }
-  },
-
-  onPanelSelected: function() {
-    if (this.inspector.selection.nodeFront === this.view.viewedElement) {
-      this.refresh();
-    } else {
-      this.onSelected();
-    }
-  },
-
-  onLinkClicked: function(e, rule) {
-    let sheet = rule.parentStyleSheet;
-
-    // Chrome stylesheets are not listed in the style editor, so show
-    // these sheets in the view source window instead.
-    if (!sheet || sheet.isSystem) {
-      let href = rule.nodeHref || rule.href;
-      let toolbox = gDevTools.getToolbox(this.inspector.target);
-      toolbox.viewSource(href, rule.line);
-      return;
-    }
-
-    let location = promise.resolve(rule.location);
-    if (Services.prefs.getBoolPref(PREF_ORIG_SOURCES)) {
-      location = rule.getOriginalLocation();
-    }
-    location.then(({ source, href, line, column }) => {
-      let target = this.inspector.target;
-      if (Tools.styleEditor.isTargetSupported(target)) {
-        gDevTools.showToolbox(target, "styleeditor").then(function(toolbox) {
-          let sheet = source || href;
-          toolbox.getCurrentPanel().selectStyleSheet(sheet, line, column);
-        });
-      }
-      return;
-    });
-  },
-
-  onPropertyChanged: function() {
-    this.inspector.markDirty();
-  },
-
-  onViewRefreshed: function() {
-    this.inspector.emit("rule-view-refreshed");
-  },
-
-  /**
-   * When markup mutations occur, if an attribute of the selected node changes,
-   * we need to refresh the view as that might change the node's styles.
-   */
-  onMutations: function(mutations) {
-    for (let {type, target} of mutations) {
-      if (target === this.inspector.selection.nodeFront &&
-          type === "attributes") {
-        this.refresh();
-        break;
-      }
-    }
-  },
-
-  /**
-   * When the window gets resized, this may cause media-queries to match, and
-   * therefore, different styles may apply.
-   */
-  onResized: function() {
-    this.refresh();
-  },
-
-  destroy: function() {
-    this.inspector.walker.off("mutations", this.onMutations);
-    this.inspector.walker.off("resize", this.onResized);
-    this.inspector.selection.off("detached", this.onSelected);
-    this.inspector.selection.off("pseudoclass", this.refresh);
-    this.inspector.selection.off("new-node-front", this.onSelected);
-    this.inspector.target.off("navigate", this.clearUserProperties);
-    this.inspector.sidebar.off("ruleview-selected", this.onPanelSelected);
-    if (this.inspector.pageStyle) {
-      this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
-    }
-
-    this.view.off("ruleview-linked-clicked", this.onLinkClicked);
-    this.view.off("ruleview-changed", this.onPropertyChanged);
-    this.view.off("ruleview-refreshed", this.onViewRefreshed);
-
-    this.view.destroy();
-
-    this.view = this.document = this.inspector = null;
-  }
-};
-
-function ComputedViewTool(inspector, window) {
-  this.inspector = inspector;
-  this.document = window.document;
-
-  this.view = new ComputedView.CssComputedView(this.inspector, this.document,
-                                               this.inspector.pageStyle);
-
-  this.onSelected = this.onSelected.bind(this);
-  this.refresh = this.refresh.bind(this);
-  this.onPanelSelected = this.onPanelSelected.bind(this);
-  this.onMutations = this.onMutations.bind(this);
-  this.onResized = this.onResized.bind(this);
-
-  this.inspector.selection.on("detached", this.onSelected);
-  this.inspector.selection.on("new-node-front", this.onSelected);
-  this.inspector.selection.on("pseudoclass", this.refresh);
-  this.inspector.sidebar.on("computedview-selected", this.onPanelSelected);
-  this.inspector.pageStyle.on("stylesheet-updated", this.refresh);
-  this.inspector.walker.on("mutations", this.onMutations);
-  this.inspector.walker.on("resize", this.onResized);
-
-  this.view.selectElement(null);
-
-  this.onSelected();
-}
-
-ComputedViewTool.prototype = {
-  isSidebarActive: function() {
-    if (!this.view) {
-      return false;
-    }
-    return this.inspector.sidebar.getCurrentTabID() == "computedview";
-  },
-
-  onSelected: function(event) {
-    // Ignore the event if the view has been destroyed, or if it's inactive.
-    // But only if the current selection isn't null. If it's been set to null,
-    // let the update go through as this is needed to empty the view on
-    // navigation.
-    if (!this.view) {
-      return;
-    }
-
-    let isInactive = !this.isSidebarActive() &&
-                     this.inspector.selection.nodeFront;
-    if (isInactive) {
-      return;
-    }
-
-    this.view.setPageStyle(this.inspector.pageStyle);
-
-    if (!this.inspector.selection.isConnected() ||
-        !this.inspector.selection.isElementNode()) {
-      this.view.selectElement(null);
-      return;
-    }
-
-    if (!event || event == "new-node-front") {
-      let done = this.inspector.updating("computed-view");
-      this.view.selectElement(this.inspector.selection.nodeFront).then(() => {
-        done();
-      });
-    }
-  },
-
-  refresh: function() {
-    if (this.isSidebarActive()) {
-      this.view.refreshPanel();
-    }
-  },
-
-  onPanelSelected: function() {
-    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,
-   * we need to refresh the view as that might change the node's styles.
-   */
-  onMutations: function(mutations) {
-    for (let {type, target} of mutations) {
-      if (target === this.inspector.selection.nodeFront &&
-          type === "attributes") {
-        this.refresh();
-        break;
-      }
-    }
-  },
-
-  /**
-   * When the window gets resized, this may cause media-queries to match, and
-   * therefore, different styles may apply.
-   */
-  onResized: function() {
-    this.refresh();
-  },
-
-  destroy: function() {
-    this.inspector.walker.off("mutations", this.onMutations);
-    this.inspector.walker.off("resize", this.onResized);
-    this.inspector.sidebar.off("computedview-selected", this.refresh);
-    this.inspector.selection.off("pseudoclass", this.refresh);
-    this.inspector.selection.off("new-node-front", this.onSelected);
-    this.inspector.selection.off("detached", this.onSelected);
-    this.inspector.sidebar.off("computedview-selected", this.onPanelSelected);
-    if (this.inspector.pageStyle) {
-      this.inspector.pageStyle.off("stylesheet-updated", this.refresh);
-    }
-
-    this.view.destroy();
-
-    this.view = this.document = this.inspector = null;
-  }
-};
-
-exports.RuleViewTool = RuleViewTool;
-exports.ComputedViewTool = ComputedViewTool;

devtools/server/actors/csscoverage.js

@@ -23,7 +23,7 @@ loader.lazyGetter(this, "stylesheets", () => {
   return require("devtools/server/actors/stylesheets");
 });
 loader.lazyGetter(this, "CssLogic", () => {
-  return require("devtools/shared/styleinspector/css-logic").CssLogic;
+  return require("devtools/shared/inspector/css-logic").CssLogic;
 });
 
 const CSSRule = Ci.nsIDOMCSSRule;

devtools/server/actors/highlighters/utils/markup.js

@@ -11,7 +11,7 @@ const { getCurrentZoom,
 const lazyContainer = {};
 
 loader.lazyRequireGetter(lazyContainer, "CssLogic",
-  "devtools/shared/styleinspector/css-logic", true);
+  "devtools/shared/inspector/css-logic", true);
 exports.getComputedStyle = (node) =>
   lazyContainer.CssLogic.getComputedStyle(node);
 

devtools/server/actors/inspector.js

@@ -138,7 +138,7 @@ loader.lazyGetter(this, "eventListenerService", function() {
            .getService(Ci.nsIEventListenerService);
 });
 
-loader.lazyGetter(this, "CssLogic", () => require("devtools/shared/styleinspector/css-logic").CssLogic);
+loader.lazyGetter(this, "CssLogic", () => require("devtools/shared/inspector/css-logic").CssLogic);
 
 // XXX: A poor man's makeInfallible until we move it out of transport.js
 // Which should be very soon.

devtools/server/actors/script.js

@@ -30,7 +30,7 @@ loader.lazyGetter(this, "Debugger", () => {
 });
 loader.lazyRequireGetter(this, "SourceMapConsumer", "source-map", true);
 loader.lazyRequireGetter(this, "SourceMapGenerator", "source-map", true);
-loader.lazyRequireGetter(this, "CssLogic", "devtools/shared/styleinspector/css-logic", true);
+loader.lazyRequireGetter(this, "CssLogic", "devtools/shared/inspector/css-logic", true);
 loader.lazyRequireGetter(this, "events", "sdk/event/core");
 loader.lazyRequireGetter(this, "mapURIToAddonID", "devtools/server/actors/utils/map-uri-to-addon-id");
 loader.lazyRequireGetter(this, "setTimeout", "sdk/timers", true);

devtools/server/actors/styleeditor.js

@@ -18,7 +18,7 @@ const {Arg, Option, method, RetVal, types} = protocol;
 const {LongStringActor, ShortLongString} = require("devtools/server/actors/string");
 const {fetch} = require("devtools/shared/DevToolsUtils");
 
-loader.lazyGetter(this, "CssLogic", () => require("devtools/shared/styleinspector/css-logic").CssLogic);
+loader.lazyGetter(this, "CssLogic", () => require("devtools/shared/inspector/css-logic").CssLogic);
 
 var TRANSITION_CLASS = "moz-styleeditor-transitioning";
 var TRANSITION_DURATION_MS = 500;

devtools/server/actors/styles.js

@@ -19,7 +19,7 @@ const {UPDATE_PRESERVING_RULES, UPDATE_GENERAL} =
 loader.lazyRequireGetter(this, "CSS", "CSS");
 
 loader.lazyGetter(this, "CssLogic", () => {
-  return require("devtools/shared/styleinspector/css-logic").CssLogic;
+  return require("devtools/shared/inspector/css-logic").CssLogic;
 });
 loader.lazyGetter(this, "DOMUtils", () => {
   return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);

devtools/server/actors/stylesheets.js

@@ -21,7 +21,7 @@ const {fetch} = require("devtools/shared/DevToolsUtils");
 const {listenOnce} = require("devtools/shared/async-utils");
 const {SourceMapConsumer} = require("source-map");
 
-loader.lazyGetter(this, "CssLogic", () => require("devtools/shared/styleinspector/css-logic").CssLogic);
+loader.lazyGetter(this, "CssLogic", () => require("devtools/shared/inspector/css-logic").CssLogic);
 
 const {
   getIndentationFromPrefs,

devtools/server/tests/mochitest/test_css-logic-inheritance.html

@@ -20,7 +20,7 @@ Test that css-logic handles inherited properties correctly
 
     const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
     Cu.import("resource://gre/modules/Services.jsm");
-    const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+    const {CssLogic} = require("devtools/shared/inspector/css-logic");
 
     SimpleTest.waitForExplicitFinish();
 

devtools/server/tests/mochitest/test_css-logic-media-queries.html

@@ -31,7 +31,7 @@ Test that css-logic handles media-queries correctly
 
     var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
     Cu.import("resource://gre/modules/Services.jsm");
-    const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+    const {CssLogic} = require("devtools/shared/inspector/css-logic");
 
     SimpleTest.waitForExplicitFinish();
 

devtools/server/tests/mochitest/test_css-logic-specificity.html

@@ -15,7 +15,7 @@ Test that css-logic calculates CSS specificity properly
     var {utils: Cu, classes: Cc, interfaces: Ci} = Components;
 
     const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
-    const {CssLogic, CssSelector} = require("devtools/shared/styleinspector/css-logic");
+    const {CssLogic, CssSelector} = require("devtools/shared/inspector/css-logic");
     const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
                        .getService(Ci.inIDOMUtils);
 

devtools/server/tests/mochitest/test_css-logic.html

@@ -11,7 +11,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
   <script type="application/javascript;version=1.8" src="inspector-helpers.js"></script>
   <script type="application/javascript;version=1.8">
-const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+const {CssLogic} = require("devtools/shared/inspector/css-logic");
 
 window.onload = function() {
   SimpleTest.waitForExplicitFinish();

devtools/server/tests/mochitest/test_styles-matched.html

@@ -12,7 +12,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=
   <script type="application/javascript;version=1.8" src="inspector-helpers.js"></script>
   <script type="application/javascript;version=1.8">
 const inspector = require("devtools/server/actors/inspector");
-const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+const {CssLogic} = require("devtools/shared/inspector/css-logic");
 
 window.onload = function() {
   SimpleTest.waitForExplicitFinish();

devtools/shared/moz.build

@@ -13,6 +13,7 @@ DIRS += [
     'discovery',
     'gcli',
     'heapsnapshot',
+    'inspector',
     'jsbeautify',
     'layout',
     'locales',
@@ -22,7 +23,6 @@ DIRS += [
     'security',
     'sourcemap',
     'shims',
-    'styleinspector',
     'touch',
     'transport',
     'webconsole',

devtools/shared/tests/unit/test_prettifyCSS.js

@@ -5,7 +5,7 @@
 
 "use strict";
 
-const {CssLogic} = require("devtools/shared/styleinspector/css-logic");
+const {CssLogic} = require("devtools/shared/inspector/css-logic");
 
 const TESTS = [
   { name: "simple test",