diff --git a/devtools/client/definitions.js b/devtools/client/definitions.js
index 22f85a3367d4..acbc710a22ab 100644
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -9,7 +9,7 @@ const osString = Services.appinfo.OS;
// Panels
loader.lazyGetter(this, "OptionsPanel", () => require("devtools/client/framework/toolbox-options").OptionsPanel);
-loader.lazyGetter(this, "InspectorPanel", () => require("devtools/client/inspector/inspector-panel").InspectorPanel);
+loader.lazyGetter(this, "InspectorPanel", () => require("devtools/client/inspector/panel").InspectorPanel);
loader.lazyGetter(this, "WebConsolePanel", () => require("devtools/client/webconsole/panel").WebConsolePanel);
loader.lazyGetter(this, "DebuggerPanel", () => require("devtools/client/debugger/panel").DebuggerPanel);
loader.lazyGetter(this, "StyleEditorPanel", () => require("devtools/client/styleeditor/styleeditor-panel").StyleEditorPanel);
diff --git a/devtools/client/inspector/inspector-panel.js b/devtools/client/inspector/inspector-panel.js
index 4b4ee7ca7bb8..d1cf8bcf45ba 100644
--- a/devtools/client/inspector/inspector-panel.js
+++ b/devtools/client/inspector/inspector-panel.js
@@ -4,8 +4,12 @@
* 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 window */
+
"use strict";
+var Cu = Components.utils;
+var { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
var Services = require("Services");
var promise = require("promise");
var defer = require("devtools/shared/defer");
@@ -81,11 +85,11 @@ const PORTRAIT_MODE_WIDTH = 700;
* Fired when the stylesheet source links have been updated (when switching
* to source-mapped files)
*/
-function InspectorPanel(iframeWindow, toolbox) {
+function Inspector(toolbox) {
this._toolbox = toolbox;
this._target = toolbox.target;
- this.panelDoc = iframeWindow.document;
- this.panelWin = iframeWindow;
+ this.panelDoc = window.document;
+ this.panelWin = window;
this.panelWin.inspector = this;
this.telemetry = new Telemetry();
@@ -113,13 +117,11 @@ function InspectorPanel(iframeWindow, toolbox) {
EventEmitter.decorate(this);
}
-exports.InspectorPanel = InspectorPanel;
-
-InspectorPanel.prototype = {
+Inspector.prototype = {
/**
* open is effectively an asynchronous constructor
*/
- open: Task.async(function* () {
+ init: Task.async(function* () {
// Localize all the nodes containing a data-localization attribute.
localizeMarkup(this.panelDoc);
@@ -147,6 +149,10 @@ InspectorPanel.prototype = {
return this._toolbox.selection;
},
+ get highlighter() {
+ return this._toolbox.highlighter;
+ },
+
get isOuterHTMLEditable() {
return this._target.client.traits.editOuterHTML;
},
@@ -276,7 +282,7 @@ InspectorPanel.prototype = {
},
_getPageStyle: function () {
- return this._toolbox.inspector.getPageStyle().then(pageStyle => {
+ return this.inspector.getPageStyle().then(pageStyle => {
this.pageStyle = pageStyle;
}, this._handleRejectionIfNotDestroyed);
},
@@ -1828,3 +1834,72 @@ InspectorPanel.prototype = {
}, console.error);
}
};
+
+// URL constructor doesn't support chrome: scheme
+let href = window.location.href.replace(/chrome:/, "http://");
+let url = new window.URL(href);
+
+// Only use this method to attach the toolbox if some query parameters are given
+if (url.search.length > 1) {
+ const { targetFromURL } = require("devtools/client/framework/target-from-url");
+ const { attachThread } = require("devtools/client/framework/attach-thread");
+ const { BrowserLoader } =
+ Cu.import("resource://devtools/client/shared/browser-loader.js", {});
+
+ const { Selection } = require("devtools/client/framework/selection");
+ const { InspectorFront } = require("devtools/shared/fronts/inspector");
+ const { getHighlighterUtils } = require("devtools/client/framework/toolbox-highlighter-utils");
+
+ Task.spawn(function* () {
+ let target = yield targetFromURL(url);
+
+ let fakeToolbox = {
+ target,
+ hostType: "bottom",
+ doc: window.document,
+ win: window,
+ on() {}, emit() {}, off() {},
+ initInspector() {},
+ browserRequire: BrowserLoader({
+ window: window,
+ useOnlyShared: true
+ }).require,
+ get React() {
+ return this.browserRequire("devtools/client/shared/vendor/react");
+ },
+ get ReactDOM() {
+ return this.browserRequire("devtools/client/shared/vendor/react-dom");
+ },
+ isToolRegistered() {
+ return false;
+ },
+ // For attachThread:
+ highlightTool() {},
+ unhighlightTool() {},
+ selectTool() {},
+ raise() {},
+ getNotificationBox() {}
+ };
+
+ // attachThread also expect a toolbox as argument
+ fakeToolbox.threadClient = yield attachThread(fakeToolbox);
+
+ let inspector = InspectorFront(target.client, target.form);
+ let showAllAnonymousContent =
+ Services.prefs.getBoolPref("devtools.inspector.showAllAnonymousContent");
+ let walker = yield inspector.getWalker({ showAllAnonymousContent });
+ let selection = new Selection(walker);
+ let highlighter = yield inspector.getHighlighter(false);
+
+ fakeToolbox.inspector = inspector;
+ fakeToolbox.walker = walker;
+ fakeToolbox.selection = selection;
+ fakeToolbox.highlighter = highlighter;
+ fakeToolbox.highlighterUtils = getHighlighterUtils(fakeToolbox);
+
+ let inspectorUI = new Inspector(fakeToolbox);
+ inspectorUI.init();
+ }).then(null, e => {
+ window.alert("Unable to start the inspector:" + e.message + "\n" + e.stack);
+ });
+}
diff --git a/devtools/client/inspector/inspector.xhtml b/devtools/client/inspector/inspector.xhtml
index 106c03697f4d..8df97dcdca80 100644
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -25,6 +25,7 @@
+
diff --git a/devtools/client/inspector/moz.build b/devtools/client/inspector/moz.build
index dad750369bc9..c2013bd0893e 100644
--- a/devtools/client/inspector/moz.build
+++ b/devtools/client/inspector/moz.build
@@ -14,9 +14,9 @@ DIRS += [
DevToolsModules(
'breadcrumbs.js',
'inspector-commands.js',
- 'inspector-panel.js',
'inspector-search.js',
'inspector.xhtml',
+ 'panel.js',
'toolsidebar.js',
)
diff --git a/devtools/client/inspector/panel.js b/devtools/client/inspector/panel.js
new file mode 100644
index 000000000000..7f733491b952
--- /dev/null
+++ b/devtools/client/inspector/panel.js
@@ -0,0 +1,19 @@
+/* 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";
+
+function InspectorPanel(iframeWindow, toolbox) {
+ this._inspector = new iframeWindow.Inspector(toolbox);
+}
+InspectorPanel.prototype = {
+ open() {
+ return this._inspector.init();
+ },
+
+ destroy() {
+ return this._inspector.destroy();
+ }
+};
+exports.InspectorPanel = InspectorPanel;
diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn
index 153602a02a2c..627cc3435d03 100644
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -25,6 +25,7 @@ devtools.jar:
content/shared/frame-script-utils.js (shared/frame-script-utils.js)
content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
content/storage/storage.xul (storage/storage.xul)
+ content/inspector/inspector-panel.js (inspector/inspector-panel.js)
content/inspector/fonts/fonts.js (inspector/fonts/fonts.js)
content/inspector/markup/markup.xhtml (inspector/markup/markup.xhtml)
content/animationinspector/animation-controller.js (animationinspector/animation-controller.js)