Commit 76c3616e authored by dgozman@chromium.org's avatar dgozman@chromium.org

[DevTools] Add Toolbox page to undocked DevTools frontend.

Toolbox page is the same frontend launched with "toolbox=true" parameter.
It has its own app, which creates a view hierarchy and reports to the main app.

Currently, toolbox is only created for responsive design.

BUG=327641

Review URL: https://codereview.chromium.org/298913004

git-svn-id: svn://svn.chromium.org/blink/trunk@175571 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 43245541
......@@ -264,7 +264,3 @@ var InspectorFrontendAPI = {
/** @typedef {!Object.<{type: string, keyCode: (number|undefined), keyIdentifier: (string|undefined), modifiers: (number|undefined)}>} */
InspectorFrontendAPI.ForwardedKeyboardEvent;
if (top !== window) {
top.InspectorFrontendAPI = window.InspectorFrontendAPI;
}
......@@ -259,11 +259,6 @@ WebInspector.InspectorFrontendHostStub.prototype = {
}
}
// Inherit bindings from the embedder.
if (top !== window) {
window.InspectorFrontendHost = top.InspectorFrontendHost;
}
if (!window.InspectorFrontendHost) {
InspectorFrontendHost = new WebInspector.InspectorFrontendHostStub();
} else {
......
......@@ -45,14 +45,12 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
this._enabled = false;
WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._updateOverridesSupportOnDockSideChange, this);
WebInspector.settings.responsiveDesignMode.addChangeListener(this._responsiveDesignModeChanged, this);
WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(this._maybeEnableResponsiveDesign, this);
WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(this._maybeEnableResponsiveDesign, this);
WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(this._maybeEnableResponsiveDesign, this);
this._updateOverridesSupportOnDockSideChange();
this._responsiveDesignModeChanged();
this._overridesWarningUpdated();
};
// Measured in DIP.
......@@ -72,7 +70,7 @@ WebInspector.ResponsiveDesignView.prototype = {
}
},
_responsiveDesignModeChanged: function()
_invalidateCache: function()
{
delete this._cachedScale;
delete this._cachedCssCanvasWidth;
......@@ -81,35 +79,32 @@ WebInspector.ResponsiveDesignView.prototype = {
delete this._cachedCssWidth;
delete this._cachedZoomFactor;
delete this._availableSize;
},
var enabled = WebInspector.settings.responsiveDesignMode.get() && WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
_responsiveDesignModeChanged: function()
{
var enabled = WebInspector.settings.responsiveDesignMode.get();
if (enabled && !this._enabled) {
this._invalidateCache();
this._ignoreResize = true;
this._enabled = true;
this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();
this._inspectedPagePlaceholder.show(this._pageContainer);
this._responsiveDesignContainer.show(this.element);
WebInspector.overridesSupport.setPageResizer(this);
this.update(this._dipWidth, this._dipHeight, this._scale);
delete this._ignoreResize;
}
if (!enabled && this._enabled) {
} else if (!enabled && this._enabled) {
this._invalidateCache();
this._ignoreResize = true;
this._enabled = false;
this._scale = 0;
this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins();
this._responsiveDesignContainer.detach();
this._inspectedPagePlaceholder.show(this.element);
WebInspector.overridesSupport.setPageResizer(null);
delete this._ignoreResize;
}
},
_updateOverridesSupportOnDockSideChange: function()
{
this._responsiveDesignModeChanged();
},
/**
* WebInspector.OverridesSupport.PageResizer override.
* @param {number} dipWidth
......@@ -118,9 +113,6 @@ WebInspector.ResponsiveDesignView.prototype = {
*/
update: function(dipWidth, dipHeight, scale)
{
if (!this._enabled)
return;
this._scale = scale;
this._dipWidth = dipWidth;
this._dipHeight = dipHeight;
......@@ -328,7 +320,7 @@ WebInspector.ResponsiveDesignView.prototype = {
_updateUI: function()
{
if (!this._enabled)
if (!this._enabled || !this.isShowing())
return;
var zoomFactor = WebInspector.zoomManager.zoomFactor();
......@@ -377,8 +369,10 @@ WebInspector.ResponsiveDesignView.prototype = {
{
if (!this._enabled || this._ignoreResize)
return;
var oldSize = this._availableSize;
delete this._availableSize;
this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged);
if (!this.availableDipSize().isEqual(oldSize))
this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged);
this._updateUI();
},
......@@ -465,7 +459,7 @@ WebInspector.ResponsiveDesignView.prototype = {
return;
this._warningMessage.classList.toggle("hidden", !message);
this._warningMessage.textContent = message;
this._responsiveDesignModeChanged();
this._invalidateCache();
this.onResize();
},
......
......@@ -677,8 +677,15 @@ WebInspector.VersionController.prototype = {
}
}
WebInspector.settings = new WebInspector.Settings();
WebInspector.experimentsSettings = new WebInspector.ExperimentsSettings(WebInspector.queryParam("experiments") !== null);
/**
* @type {!WebInspector.Settings}
*/
WebInspector.settings;
/**
* @type {!WebInspector.ExperimentsSettings}
*/
WebInspector.experimentsSettings;
// These methods are added for backwards compatibility with Devtools CodeSchool extension.
// DO NOT REMOVE
......@@ -754,5 +761,3 @@ WebInspector.PauseOnExceptionStateSetting.prototype = {
this._eventSupport.dispatchEventToListeners(this._name, this._value);
}
}
WebInspector.settings.pauseOnExceptionStateString = new WebInspector.PauseOnExceptionStateSetting();
......@@ -111,16 +111,20 @@ WebInspector.DockController.prototype = {
if (this._dockSide === dockSide)
return;
this.dispatchEventToListeners(WebInspector.DockController.Events.BeforeDockSideChanged, dockSide);
InspectorFrontendHost.setIsDocked(dockSide !== WebInspector.DockController.State.Undocked, this._setIsDockedResponse.bind(this));
var eventData = { from: this._dockSide, to: dockSide };
this.dispatchEventToListeners(WebInspector.DockController.Events.BeforeDockSideChanged, eventData);
InspectorFrontendHost.setIsDocked(dockSide !== WebInspector.DockController.State.Undocked, this._setIsDockedResponse.bind(this, eventData));
this._dockSide = dockSide;
this._updateUI();
this.dispatchEventToListeners(WebInspector.DockController.Events.DockSideChanged, this._dockSide);
this.dispatchEventToListeners(WebInspector.DockController.Events.DockSideChanged, eventData);
},
_setIsDockedResponse: function()
/**
* @param {{from: string, to: string}} eventData
*/
_setIsDockedResponse: function(eventData)
{
this.dispatchEventToListeners(WebInspector.DockController.Events.AfterDockSideChanged, this._dockSide);
this.dispatchEventToListeners(WebInspector.DockController.Events.AfterDockSideChanged, eventData);
},
_updateUI: function()
......
......@@ -9,6 +9,7 @@
WebInspector.AdvancedApp = function()
{
WebInspector.App.call(this);
WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._openToolboxWindow, this);
if (!WebInspector.experimentsSettings.responsiveDesign.isEnabled())
return;
......@@ -40,12 +41,13 @@ WebInspector.AdvancedApp.prototype = {
WebInspector.inspectorView.show(this._rootSplitView.sidebarElement());
this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds, this);
this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, this._onSetInspectedPageBounds.bind(this, false), this);
if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
var responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
responsiveDesignView.show(this._rootSplitView.mainElement());
} else
this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
this._responsiveDesignView.show(this._rootSplitView.mainElement());
} else {
this._inspectedPagePlaceholder.show(this._rootSplitView.mainElement());
}
WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._onBeforeDockSideChange, this);
WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._onDockSideChange, this);
......@@ -55,21 +57,91 @@ WebInspector.AdvancedApp.prototype = {
rootView.attachToBody();
},
_onBeforeDockSideChange: function()
/**
* @param {!WebInspector.Event} event
*/
_openToolboxWindow: function(event)
{
if (/** @type {string} */ (event.data.to) !== WebInspector.DockController.State.Undocked)
return;
if (this._toolboxWindow || !WebInspector.experimentsSettings.responsiveDesign.isEnabled())
return;
var toolbox = (window.location.search ? "&" : "?") + "toolbox=true";
var hash = window.location.hash;
var url = window.location.href.replace(hash, "") + toolbox + hash;
this._toolboxWindow = window.open(url, undefined);
},
/**
* @param {!WebInspector.Toolbox} toolbox
*/
_toolboxLoaded: function(toolbox)
{
this._toolbox = toolbox;
this._updatePageResizer();
},
_updatePageResizer: function()
{
if (WebInspector.experimentsSettings.responsiveDesign.isEnabled())
WebInspector.overridesSupport.setPageResizer(this._isDocked() ? this._responsiveDesignView : (this._toolbox ? this._toolbox._responsiveDesignView : null));
},
/**
* @param {!WebInspector.Event} event
*/
_onBeforeDockSideChange: function(event)
{
if (/** @type {string} */ (event.data.to) === WebInspector.DockController.State.Undocked && this._toolbox) {
// Hide inspectorView and force layout to mimic the undocked state.
this._rootSplitView.hideSidebar();
this._inspectedPagePlaceholder.update();
}
this._changingDockSide = true;
},
_onDockSideChange: function()
/**
* @param {!WebInspector.Event=} event
*/
_onDockSideChange: function(event)
{
var dockSide = WebInspector.dockController.dockSide();
if (dockSide === WebInspector.DockController.State.Undocked) {
this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
this._rootSplitView.hideMain();
this._updatePageResizer();
var toDockSide = event ? /** @type {string} */ (event.data.to) : WebInspector.dockController.dockSide();
if (toDockSide === WebInspector.DockController.State.Undocked) {
this._updateForUndocked();
} else if (this._toolbox && event && /** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
// Don't update yet for smooth transition.
this._rootSplitView.hideSidebar();
} else {
this._updateForDocked(toDockSide);
}
},
/**
* @param {!WebInspector.Event} event
*/
_onAfterDockSideChange: function(event)
{
// We may get here on the first dock side change while loading without BeforeDockSideChange.
if (!this._changingDockSide)
return;
this._changingDockSide = false;
if (/** @type {string} */ (event.data.from) === WebInspector.DockController.State.Undocked) {
// Restore docked layout in case of smooth transition.
this._updateForDocked(/** @type {string} */ (event.data.to));
}
this._inspectedPagePlaceholder.update();
},
/**
* @param {string} dockSide
*/
_updateForDocked: function(dockSide)
{
this._rootSplitView.setVertical(dockSide === WebInspector.DockController.State.DockedToLeft || dockSide === WebInspector.DockController.State.DockedToRight);
this._rootSplitView.setSecondIsSidebar(dockSide === WebInspector.DockController.State.DockedToRight || dockSide === WebInspector.DockController.State.DockedToBottom);
this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), true);
......@@ -77,10 +149,11 @@ WebInspector.AdvancedApp.prototype = {
this._rootSplitView.showBoth();
},
_onAfterDockSideChange: function()
_updateForUndocked: function()
{
this._changingDockSide = false;
this._inspectedPagePlaceholder.update();
this._rootSplitView.toggleResizer(this._rootSplitView.resizerElement(), false);
this._rootSplitView.toggleResizer(WebInspector.inspectorView.topResizerElement(), false);
this._rootSplitView.hideMain();
},
_isDocked: function()
......@@ -89,11 +162,12 @@ WebInspector.AdvancedApp.prototype = {
},
/**
* @param {boolean} toolbox
* @param {!WebInspector.Event} event
*/
_onSetInspectedPageBounds: function(event)
_onSetInspectedPageBounds: function(toolbox, event)
{
if (this._changingDockSide || !this._isDocked())
if (this._changingDockSide || (this._isDocked() === toolbox))
return;
var bounds = /** @type {{x: number, y: number, width: number, height: number}} */ (event.data);
InspectorFrontendHost.setInspectedPageBounds(bounds);
......@@ -120,4 +194,32 @@ WebInspector.AdvancedApp.ResponsiveDesignButtonProvider.prototype = {
return null;
return /** @type {!WebInspector.AdvancedApp} */ (WebInspector.app)._toggleResponsiveDesignButton || null;
}
}
\ No newline at end of file
}
/**
* @constructor
*/
WebInspector.Toolbox = function()
{
if (!window.opener)
return;
WebInspector.zoomManager = window.opener.WebInspector.zoomManager;
WebInspector.overridesSupport = window.opener.WebInspector.overridesSupport;
WebInspector.settings = window.opener.WebInspector.settings;
WebInspector.experimentsSettings = window.opener.WebInspector.experimentsSettings;
WebInspector.installPortStyles();
var advancedApp = /** @type {!WebInspector.AdvancedApp} */ (window.opener.WebInspector.app);
var rootView = new WebInspector.RootView();
this._inspectedPagePlaceholder = new WebInspector.InspectedPagePlaceholder();
this._inspectedPagePlaceholder.addEventListener(WebInspector.InspectedPagePlaceholder.Events.Update, advancedApp._onSetInspectedPageBounds.bind(advancedApp, true));
if (WebInspector.experimentsSettings.responsiveDesign.isEnabled()) {
this._responsiveDesignView = new WebInspector.ResponsiveDesignView(this._inspectedPagePlaceholder);
this._responsiveDesignView.show(rootView.element);
} else {
this._inspectedPagePlaceholder.show(rootView.element);
}
rootView.attachToBody();
advancedApp._toolboxLoaded(this);
}
......@@ -19,7 +19,7 @@ WebInspector.App.prototype = {
WebInspector.inspectorView.showInitialPanel();
WebInspector.overridesSupport.applyInitialOverrides();
if (WebInspector.overridesSupport.hasActiveOverrides())
if (WebInspector.overridesSupport.hasActiveOverrides() && !WebInspector.experimentsSettings.responsiveDesign.isEnabled())
WebInspector.inspectorView.showViewInDrawer("emulation", true);
}
};
......
......@@ -179,6 +179,16 @@ WebInspector.Main.prototype = {
_loaded: function()
{
if (WebInspector.queryParam("toolbox")) {
new WebInspector.Toolbox();
return;
}
WebInspector.settings = new WebInspector.Settings();
WebInspector.experimentsSettings = new WebInspector.ExperimentsSettings(WebInspector.queryParam("experiments") !== null);
// This setting is needed for backwards compatibility with Devtools CodeSchool extension. DO NOT REMOVE
WebInspector.settings.pauseOnExceptionStateString = new WebInspector.PauseOnExceptionStateSetting();
if (!InspectorFrontendHost.sendMessageToEmbedder) {
var helpScreen = new WebInspector.HelpScreen(WebInspector.UIString("Incompatible Chrome version"));
var p = helpScreen.contentElement.createChild("p", "help-section");
......
......@@ -41,6 +41,7 @@ WebInspector.OverridesSupport = function(responsiveDesignAvailable)
this._emulateViewportEnabled = false;
this._userAgent = "";
this._pageResizer = null;
this._initialized = false;
WebInspector.targetManager.observeTargets(this);
this._responsiveDesignAvailable = responsiveDesignAvailable;
}
......@@ -436,7 +437,8 @@ WebInspector.OverridesSupport.prototype = {
this._pageResizer.addEventListener(WebInspector.OverridesSupport.PageResizer.Events.AvailableSizeChanged, this._onPageResizerAvailableSizeChanged, this);
this._pageResizer.addEventListener(WebInspector.OverridesSupport.PageResizer.Events.ResizeRequested, this._onPageResizerResizeRequested, this);
}
this._deviceMetricsChanged();
if (this._initialized)
this._deviceMetricsChanged();
},
/**
......@@ -459,8 +461,11 @@ WebInspector.OverridesSupport.prototype = {
this.settings.emulateViewport.set(true);
delete this._deviceMetricsChangedListenerMuted;
delete this._userAgentChangedListenerMuted;
this._deviceMetricsChanged();
this._userAgentChanged();
if (this._initialized) {
this._deviceMetricsChanged();
this._userAgentChanged();
}
},
resetEmulatedDevice: function()
......@@ -473,8 +478,11 @@ WebInspector.OverridesSupport.prototype = {
this.settings.emulateViewport.set(false);
delete this._deviceMetricsChangedListenerMuted;
delete this._userAgentChangedListenerMuted;
this._deviceMetricsChanged();
this._userAgentChanged();
if (this._initialized) {
this._deviceMetricsChanged();
this._userAgentChanged();
}
},
reset: function()
......@@ -492,6 +500,33 @@ WebInspector.OverridesSupport.prototype = {
return;
}
this._initialized = true;
this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this);
this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
this.settings.overrideDeviceResolution.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetricsChanged, this);
this.settings.emulateViewport.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChanged, this);
WebInspector.settings.responsiveDesignMode.addChangeListener(this._deviceMetricsChanged, this);
this.settings.overrideGeolocation.addChangeListener(this._geolocationPositionChanged, this);
this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this);
this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this);
this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this);
this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this);
this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
WebInspector.settings.showMetricsRulers.addChangeListener(this._showRulersChanged, this);
if (this.settings.overrideDeviceOrientation.get())
this._deviceOrientationChanged();
......@@ -527,7 +562,8 @@ WebInspector.OverridesSupport.prototype = {
_onPageResizerAvailableSizeChanged: function()
{
this._deviceMetricsChanged();
if (this._initialized)
this._deviceMetricsChanged();
},
_onPageResizerResizeRequested: function(event)
......@@ -545,11 +581,12 @@ WebInspector.OverridesSupport.prototype = {
if (this._deviceMetricsChangedListenerMuted)
return;
var responsiveDesignAvailableAndDisabled = this._responsiveDesignAvailable && !WebInspector.settings.responsiveDesignMode.get();
var responsiveDesignAvailableAndDisabled = this._responsiveDesignAvailable && (!WebInspector.settings.responsiveDesignMode.get() || !this._pageResizer);
var overrideDeviceResolution = this.settings.overrideDeviceResolution.get();
if (responsiveDesignAvailableAndDisabled || (!overrideDeviceResolution && !this.settings.emulateViewport.get())) {
var emulationEnabled = overrideDeviceResolution || this.settings.emulateViewport.get();
if (responsiveDesignAvailableAndDisabled || !emulationEnabled) {
PageAgent.clearDeviceMetricsOverride(apiCallback.bind(this));
if (this._pageResizer)
if (this._pageResizer && !emulationEnabled)
this._pageResizer.update(0, 0, 0);
this.maybeHasActiveOverridesChanged();
return;
......@@ -726,7 +763,8 @@ WebInspector.OverridesSupport.prototype = {
_onMainFrameNavigated: function()
{
this._deviceMetricsChanged();
if (this._initialized)
this._deviceMetricsChanged();
this._updateUserAgentWarningMessage("");
this._updateDeviceMetricsWarningMessage("");
},
......@@ -790,30 +828,6 @@ WebInspector.OverridesSupport.prototype = {
this.maybeHasActiveOverridesChanged();
this.settings.overrideUserAgent.addChangeListener(this._userAgentChanged, this);
this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
this.settings.overrideDeviceResolution.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetricsChanged, this);
this.settings.emulateViewport.addChangeListener(this._deviceMetricsChanged, this);
this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChanged, this);
this.settings.overrideGeolocation.addChangeListener(this._geolocationPositionChanged, this);
this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this);
this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this);
this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this);
this.settings.emulateTouchEvents.addChangeListener(this._emulateTouchEventsChanged, this);
this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
WebInspector.settings.showMetricsRulers.addChangeListener(this._showRulersChanged, this);
if (this._applyInitialOverridesOnTargetAdded) {
delete this._applyInitialOverridesOnTargetAdded;
this.applyInitialOverrides();
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment