Diff
Modified: trunk/Source/WebCore/ChangeLog (116853 => 116854)
--- trunk/Source/WebCore/ChangeLog 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/ChangeLog 2012-05-12 13:39:09 UTC (rev 116854)
@@ -1,3 +1,58 @@
+2012-05-12 Eugene Klyuchnikov <[email protected]>
+
+ Web Inspector: Turn HelpScreen to be View.
+ https://bugs.webkit.org/show_bug.cgi?id=85711
+
+ Reviewed by Yury Semikhatsky.
+
+ Motivation: for further UI changes, HelpSceen needs to be View.
+ It is planned to combine Settings Screen and Shortcuts Screen in one
+ tabbed screen.
+ Bonus: "helpScreen.css" will be lazy-loaded.
+ Additional changes: move settingsScreen logic out of inspector.js
+
+ UI change, no test required.
+
+ * WebCore.gypi: Change "helpScreen.css" file group.
+ * inspector/front-end/HelpScreen.js:
+ (WebInspector.HelpScreen): Turned to View subclass.
+ (WebInspector.HelpScreen.prototype.showModal): Remove "onHide" param
+ (WebInspector.HelpScreen.prototype.hide): Ditto.
+ (WebInspector.HelpScreen.prototype._onKeyDown): Adopt View members.
+ (WebInspector.HelpScreen.prototype._onBlur): Ditto.
+ * inspector/front-end/SettingsScreen.js: Adopt new workflow.
+ (WebInspector.SettingsScreen): Put onHide function to member
+ (WebInspector.SettingsScreen.prototype.willHide): Invoke onHide
+ (WebInspector.SettingsController): Mediator pattern - this class
+ takes care of status bar button - settings screen relationship.
+ (WebInspector.SettingsController.prototype.get statusBarItem):
+ Getter fot representative element.
+ (WebInspector.SettingsController.prototype._buttonClicked):
+ Classifies user action.
+ (WebInspector.SettingsController.prototype._onHideSettingsScreen):
+ Cleanup after settings screen is hidden.
+ (WebInspector.SettingsController.prototype._showSettingsScreen):
+ Presents settings screen.
+ (WebInspector.SettingsController.prototype._hideSettingsScreen):
+ Hides settings screen.
+ * inspector/front-end/ShortcutsScreen.js: Adopt new workflow.
+ (WebInspector.ShortcutsScreen.prototype.wasShown): Lazy initialization.
+ * inspector/front-end/WorkerManager.js: Adopt new workflow.
+ (WebInspector.WorkerManager.prototype._disconnectedFromWorker): Ditto.
+ (WebInspector.WorkerTerminatedScreen.prototype.willHide): Ditto.
+ * inspector/front-end/helpScreen.css: Fix spacing.
+ (.help-window-outer): Ditto.
+ (body.compact .help-window-outer): Ditto.
+ (body.compact .help-window-main): Ditto.
+ (body.compact .help-window-caption): Ditto.
+ (.help-content): Ditto.
+ (body.compact .help-content): Ditto.
+ (.help-content select): Ditto.
+ * inspector/front-end/inspector.html: Ditto.
+ * inspector/front-end/inspector.js: Ditto.
+ (WebInspector._createGlobalStatusBarItems): Create SettingsController.
+ (WebInspector.documentKeyDown): Adopt new workflow.
+
2012-05-12 Pavel Feldman <[email protected]>
Web Inspector: add tab context menu
Modified: trunk/Source/WebCore/WebCore.gypi (116853 => 116854)
--- trunk/Source/WebCore/WebCore.gypi 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/WebCore.gypi 2012-05-12 13:39:09 UTC (rev 116854)
@@ -6507,7 +6507,6 @@
'inspector/front-end/WorkerManager.js',
'inspector/front-end/WorkersSidebarPane.js',
'inspector/front-end/dialog.css',
- 'inspector/front-end/helpScreen.css',
'inspector/front-end/inspector.css',
'inspector/front-end/inspectorSyntaxHighlight.css',
'inspector/front-end/popover.css',
@@ -6519,6 +6518,7 @@
'inspector/front-end/elementsPanel.css',
'inspector/front-end/filteredItemSelectionDialog.css',
'inspector/front-end/heapProfiler.css',
+ 'inspector/front-end/helpScreen.css',
'inspector/front-end/indexedDBViews.css',
'inspector/front-end/inspectorCommon.css',
'inspector/front-end/navigatorView.css',
Modified: trunk/Source/WebCore/inspector/front-end/HelpScreen.js (116853 => 116854)
--- trunk/Source/WebCore/inspector/front-end/HelpScreen.js 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/inspector/front-end/HelpScreen.js 2012-05-12 13:39:09 UTC (rev 116854)
@@ -30,16 +30,19 @@
/**
* @constructor
+ * @extends {WebInspector.View}
*/
WebInspector.HelpScreen = function(title)
{
- this._element = document.createElement("div");
- this._element.className = "help-window-outer";
- this._element.addEventListener("keydown", this._onKeyDown.bind(this), false);
- this._element.tabIndex = 0;
- this._element.addEventListener("focus", this._onBlur.bind(this), false);
+ WebInspector.View.call(this);
+ this.registerRequiredCSS("helpScreen.css");
- var mainWindow = this._element.createChild("div", "help-window-main");
+ this.element.className = "help-window-outer";
+ this.element.addEventListener("keydown", this._onKeyDown.bind(this), false);
+ this.element.tabIndex = 0;
+ this.element.addEventListener("focus", this._onBlur.bind(this), false);
+
+ var mainWindow = this.element.createChild("div", "help-window-main");
var captionWindow = mainWindow.createChild("div", "help-window-caption");
var closeButton = captionWindow.createChild("button", "help-close-button");
this.contentElement = mainWindow.createChild("div", "help-content");
@@ -49,38 +52,34 @@
closeButton.addEventListener("click", this.hide.bind(this), false);
}
+/**
+ * @type {WebInspector.HelpScreen}
+ */
WebInspector.HelpScreen.visibleScreen_ = null;
WebInspector.HelpScreen.prototype = {
- show: function(onHide)
+ showModal: function()
{
- if (this._isShown)
+ var visibleHelpScreen = WebInspector.HelpScreen._visibleScreen;
+ if (visibleHelpScreen === this)
return;
- if (WebInspector.HelpScreen.visibleScreen_)
- WebInspector.HelpScreen.visibleScreen_.hide();
- WebInspector.HelpScreen.visibleScreen_ = this;
-
- document.body.appendChild(this._element);
- this._isShown = true;
- this._onHide = onHide;
- this._previousFocusElement = WebInspector.currentFocusElement();
- WebInspector.setCurrentFocusElement(this._element);
+ if (visibleHelpScreen)
+ visibleHelpScreen.hide();
+ WebInspector.HelpScreen._visibleScreen = this;
+ this.show(WebInspector.inspectorView.element);
+ this.focus();
},
hide: function()
{
- if (!this._isShown)
+ if (!this.isShowing())
return;
- this._isShown = false;
- document.body.removeChild(this._element);
- WebInspector.setCurrentFocusElement(this._previousFocusElement);
- WebInspector.HelpScreen.visibleScreen_ = null;
- if (this._onHide) {
- this._onHide();
- delete this._onHide;
- }
+ WebInspector.HelpScreen._visibleScreen = null;
+
+ WebInspector.restoreFocusFromElement(this.element);
+ this.detach();
},
/**
@@ -98,7 +97,7 @@
_onKeyDown: function(event)
{
- if (this._isShown && this.isClosingKey(event.keyCode)) {
+ if (this.isShowing() && this.isClosingKey(event.keyCode)) {
this.hide();
event.consume();
}
@@ -107,7 +106,9 @@
_onBlur: function(event)
{
// Pretend we're modal, grab focus back if we're still shown.
- if (this._isShown && !this._element.isSelfOrAncestor(event.target))
- WebInspector.setCurrentFocusElement(this._element);
+ if (this.isShowing() && !this.element.isSelfOrAncestor(event.target))
+ WebInspector.setCurrentFocusElement(this.element);
}
}
+
+WebInspector.HelpScreen.prototype.__proto__ = WebInspector.View.prototype;
Modified: trunk/Source/WebCore/inspector/front-end/SettingsScreen.js (116853 => 116854)
--- trunk/Source/WebCore/inspector/front-end/SettingsScreen.js 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/inspector/front-end/SettingsScreen.js 2012-05-12 13:39:09 UTC (rev 116854)
@@ -30,12 +30,16 @@
/**
* @constructor
+ * @param {!function()} onHide
* @extends {WebInspector.HelpScreen}
*/
-WebInspector.SettingsScreen = function()
+WebInspector.SettingsScreen = function(onHide)
{
WebInspector.HelpScreen.call(this, WebInspector.UIString("Settings"));
+ /** @type {!function()} */
+ this._onHide = onHide;
+
this._leftColumnElement = document.createElement("td");
this._rightColumnElement = document.createElement("td");
var p = this._appendSection(WebInspector.UIString("General"));
@@ -127,6 +131,15 @@
},
/**
+ * @override
+ */
+ willHide: function()
+ {
+ this._onHide();
+ WebInspector.HelpScreen.prototype.willHide.call(this);
+ },
+
+ /**
* @param {string} name
* @param {boolean=} right
*/
@@ -593,3 +606,52 @@
}
WebInspector.SettingsScreen.prototype.__proto__ = WebInspector.HelpScreen.prototype;
+
+/**
+ * @constructor
+ */
+WebInspector.SettingsController = function()
+{
+ this._statusBarButton = new WebInspector.StatusBarButton(WebInspector.UIString("Settings"), "settings-status-bar-item");;
+ this._statusBarButton.addEventListener("click", this._buttonClicked.bind(this), false);
+
+ /** @type {?WebInspector.SettingsScreen} */
+ this._settingsScreen;
+}
+
+WebInspector.SettingsController.prototype =
+{
+ get statusBarItem()
+ {
+ return this._statusBarButton.element;
+ },
+
+ _buttonClicked: function()
+ {
+ if (this._statusBarButton.toggled)
+ this._hideSettingsScreen();
+ else
+ this._showSettingsScreen();
+ },
+
+ _onHideSettingsScreen: function()
+ {
+ this._statusBarButton.toggled = false;
+ delete this._settingsScreen;
+ },
+
+ _showSettingsScreen: function()
+ {
+ if (!this._settingsScreen)
+ this._settingsScreen = new WebInspector.SettingsScreen(this._onHideSettingsScreen.bind(this));
+
+ this._settingsScreen.showModal();
+ this._statusBarButton.toggled = true;
+ },
+
+ _hideSettingsScreen: function()
+ {
+ if (this._settingsScreen)
+ this._settingsScreen.hide();
+ }
+}
Modified: trunk/Source/WebCore/inspector/front-end/ShortcutsScreen.js (116853 => 116854)
--- trunk/Source/WebCore/inspector/front-end/ShortcutsScreen.js 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/inspector/front-end/ShortcutsScreen.js 2012-05-12 13:39:09 UTC (rev 116854)
@@ -48,10 +48,13 @@
return section;
},
- show: function(onHide)
+ /**
+ * @override
+ */
+ wasShown: function()
{
this._buildTable(this.contentElement);
- WebInspector.HelpScreen.prototype.show.call(this, onHide);
+ WebInspector.HelpScreen.prototype.wasShown.call(this);
},
/**
Modified: trunk/Source/WebCore/inspector/front-end/WorkerManager.js (116853 => 116854)
--- trunk/Source/WebCore/inspector/front-end/WorkerManager.js 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/inspector/front-end/WorkerManager.js 2012-05-12 13:39:09 UTC (rev 116854)
@@ -205,13 +205,9 @@
_disconnectedFromWorker: function()
{
- function onHide()
- {
- WebInspector.debuggerModel.removeEventListener(WebInspector.DebuggerModel.Events.GlobalObjectCleared, screen.hide, screen);
- }
var screen = new WebInspector.WorkerTerminatedScreen();
WebInspector.debuggerModel.addEventListener(WebInspector.DebuggerModel.Events.GlobalObjectCleared, screen.hide, screen);
- screen.show(onHide.bind(this));
+ screen.showModal();
}
}
@@ -272,4 +268,15 @@
p.textContent = WebInspector.UIString("Inspected worker has terminated. Once it restarts we will attach to it automatically.");
}
+WebInspector.WorkerTerminatedScreen.prototype = {
+ /**
+ * @override
+ */
+ willHide: function()
+ {
+ WebInspector.debuggerModel.removeEventListener(WebInspector.DebuggerModel.Events.GlobalObjectCleared, this.hide, this);
+ WebInspector.HelpScreen.prototype.willHide.call(this);
+ }
+}
+
WebInspector.WorkerTerminatedScreen.prototype.__proto__ = WebInspector.HelpScreen.prototype;
Modified: trunk/Source/WebCore/inspector/front-end/helpScreen.css (116853 => 116854)
--- trunk/Source/WebCore/inspector/front-end/helpScreen.css 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/inspector/front-end/helpScreen.css 2012-05-12 13:39:09 UTC (rev 116854)
@@ -1,23 +1,23 @@
.help-window-outer {
position: absolute;
- top: 60px;
+ top: 12px;
left: 5%;
width: 90%;
- bottom: 40px;
+ bottom: 12px;
z-index: 2000;
}
body.compact .help-window-outer {
- top: 32px;
+ top: 0;
left: 0;
width: 100%;
- bottom: 23px;
+ bottom: 0;
}
.help-window-main {
max-height: 100%;
color: white;
- background-color: rgba(34, 34, 34, 0.85);
+ background-color: rgba(17, 17, 17, 0.85);
display: -webkit-box;
-webkit-box-orient: vertical;
border-top-width: 0;
@@ -26,24 +26,16 @@
body.compact .help-window-main {
height: 100%;
- padding: 10px;
-}
-
-body.compact .help-window-main {
border-radius: 0;
- -webkit-box-shadow: 0 0 0;
}
.help-window-caption {
border-bottom: solid 1px rgb(153, 153, 153);
- margin: 0 16px;
+ margin: 0 8px;
+ padding: 0 2px;
line-height: 36px;
}
-body.compact .help-window-caption {
- margin: 0;
-}
-
.help-window-title {
font-size: 16px;
margin: 0;
@@ -54,7 +46,8 @@
overflow-x: hidden;
scrollbar-width: 11px;
-webkit-box-flex: 1;
- margin: 0px 16px 16px 16px;
+ margin: 8px;
+ padding: 0 4px;
font-size: 13px;
}
@@ -95,12 +88,8 @@
margin: 10px 0;
}
-body.compact .help-close-button {
- margin: 0;
-}
-
body.compact .help-content {
- margin: 8px 0 0 8px;
+ margin-bottom: 8px;
}
.help-close-button:hover {
@@ -185,13 +174,12 @@
}
.help-content p.help-section {
- margin-bottom: 15px;
+ margin: 0 0 15px 0;
}
.help-section-title {
color: rgb(221, 221, 0);
text-align: left;
- padding-top: 8px;
}
.settings-experiments-warning-subsection-warning {
@@ -217,7 +205,7 @@
background-color: rgb(64, 64, 64);
color: white;
border-color: black;
- padding: 0px 4px;
+ padding: 0 4px;
}
.help-content select:disabled {
Modified: trunk/Source/WebCore/inspector/front-end/inspector.html (116853 => 116854)
--- trunk/Source/WebCore/inspector/front-end/inspector.html 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/inspector/front-end/inspector.html 2012-05-12 13:39:09 UTC (rev 116854)
@@ -33,7 +33,6 @@
<link rel="stylesheet" type="text/css" href=""
<link rel="stylesheet" type="text/css" href=""
<link rel="stylesheet" type="text/css" href=""
- <link rel="stylesheet" type="text/css" href=""
<link rel="stylesheet" type="text/css" href=""
<script type="text/_javascript_" src=""
<script type="text/_javascript_" src=""
Modified: trunk/Source/WebCore/inspector/front-end/inspector.js (116853 => 116854)
--- trunk/Source/WebCore/inspector/front-end/inspector.js 2012-05-12 13:09:41 UTC (rev 116853)
+++ trunk/Source/WebCore/inspector/front-end/inspector.js 2012-05-12 13:39:09 UTC (rev 116854)
@@ -77,9 +77,6 @@
this._dockToggleButton.toggled = !this.attached;
WebInspector.updateDockToggleButton();
- this._settingsButton = new WebInspector.StatusBarButton(WebInspector.UIString("Settings"), "settings-status-bar-item");
- this._settingsButton.addEventListener("click", this._toggleSettings.bind(this), false);
-
var anchoredStatusBar = document.getElementById("anchored-status-bar-items");
anchoredStatusBar.appendChild(this._dockToggleButton.element);
@@ -89,7 +86,7 @@
if (this.panels.elements)
anchoredStatusBar.appendChild(this.panels.elements.nodeSearchButton.element);
- anchoredStatusBar.appendChild(this._settingsButton.element);
+ anchoredStatusBar.appendChild(this.settingsController.statusBarItem);
},
_dockButtonTitle: function()
@@ -146,35 +143,6 @@
this.drawer.show(view, WebInspector.Drawer.AnimationType.Immediately);
},
- _toggleSettings: function()
- {
- this._settingsButton.toggled = !this._settingsButton.toggled;
- if (this._settingsButton.toggled)
- this._showSettingsScreen();
- else
- this._hideSettingsScreen();
- },
-
- _showSettingsScreen: function()
- {
- function onhide()
- {
- this._settingsButton.toggled = false;
- delete this._settingsScreen;
- }
-
- if (!this._settingsScreen) {
- this._settingsScreen = new WebInspector.SettingsScreen();
- this._settingsScreen.show(onhide.bind(this));
- }
- },
-
- _hideSettingsScreen: function()
- {
- if (this._settingsScreen)
- this._settingsScreen.hide();
- },
-
get attached()
{
return this._attached;
@@ -436,6 +404,7 @@
this.searchController = new WebInspector.SearchController();
this.advancedSearchController = new WebInspector.AdvancedSearchController();
+ this.settingsController = new WebInspector.SettingsController();
if (Capabilities.nativeInstrumentationEnabled)
this.domBreakpointsSidebarPane = new WebInspector.DOMBreakpointsSidebarPane();
@@ -708,7 +677,7 @@
if (event.keyIdentifier === "F1" ||
(event.keyIdentifier === helpKey && event.shiftKey && (!WebInspector.isBeingEdited(event.target) || event.metaKey))) {
- WebInspector.shortcutsScreen.show();
+ WebInspector.shortcutsScreen.showModal();
event.consume(true);
return;
}
