- Revision
- 90014
- Author
- [email protected]
- Date
- 2011-06-29 06:58:09 -0700 (Wed, 29 Jun 2011)
Log Message
2011-06-29 Pavel Feldman <[email protected]>
Reviewed by Yury Semikhatsky.
Web Inspector: create status bar buttons programmatically. Add "Inspect" button to all panels.
https://bugs.webkit.org/show_bug.cgi?id=63450
Buttons should be created in code, not in HTML. Also making Inspect Element
action available on all panels (as an experiment).
* inspector/front-end/ConsoleView.js:
(WebInspector.ConsoleView.prototype.show):
(WebInspector.ConsoleView.prototype.hide):
* inspector/front-end/ElementsPanel.js:
(WebInspector.ElementsPanel):
(WebInspector.ElementsPanel.prototype.get statusBarItems):
(WebInspector.ElementsPanel.prototype.updateFocusedNode):
(WebInspector.ElementsPanel.prototype._setSearchingForNode):
(WebInspector.ElementsPanel.prototype.toggleSearchingForNode):
* inspector/front-end/inspector.css:
(button.dock-status-bar-item.status-bar-item .glyph):
(button.dock-status-bar-item.status-bar-item.toggled-on .glyph):
(.console-status-bar-item .glyph):
* inspector/front-end/inspector.html:
* inspector/front-end/inspector.js:
(WebInspector._createGlobalStatusBarItems):
(WebInspector.set attached):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (90013 => 90014)
--- trunk/Source/WebCore/ChangeLog 2011-06-29 13:47:00 UTC (rev 90013)
+++ trunk/Source/WebCore/ChangeLog 2011-06-29 13:58:09 UTC (rev 90014)
@@ -2,6 +2,34 @@
Reviewed by Yury Semikhatsky.
+ Web Inspector: create status bar buttons programmatically. Add "Inspect" button to all panels.
+ https://bugs.webkit.org/show_bug.cgi?id=63450
+
+ Buttons should be created in code, not in HTML. Also making Inspect Element
+ action available on all panels (as an experiment).
+
+ * inspector/front-end/ConsoleView.js:
+ (WebInspector.ConsoleView.prototype.show):
+ (WebInspector.ConsoleView.prototype.hide):
+ * inspector/front-end/ElementsPanel.js:
+ (WebInspector.ElementsPanel):
+ (WebInspector.ElementsPanel.prototype.get statusBarItems):
+ (WebInspector.ElementsPanel.prototype.updateFocusedNode):
+ (WebInspector.ElementsPanel.prototype._setSearchingForNode):
+ (WebInspector.ElementsPanel.prototype.toggleSearchingForNode):
+ * inspector/front-end/inspector.css:
+ (button.dock-status-bar-item.status-bar-item .glyph):
+ (button.dock-status-bar-item.status-bar-item.toggled-on .glyph):
+ (.console-status-bar-item .glyph):
+ * inspector/front-end/inspector.html:
+ * inspector/front-end/inspector.js:
+ (WebInspector._createGlobalStatusBarItems):
+ (WebInspector.set attached):
+
+2011-06-29 Pavel Feldman <[email protected]>
+
+ Reviewed by Yury Semikhatsky.
+
Web Inspector: tab crash after deleting trailing quote when editing attribute
https://bugs.webkit.org/show_bug.cgi?id=63544
Modified: trunk/Source/WebCore/inspector/front-end/ConsoleView.js (90013 => 90014)
--- trunk/Source/WebCore/inspector/front-end/ConsoleView.js 2011-06-29 13:47:00 UTC (rev 90013)
+++ trunk/Source/WebCore/inspector/front-end/ConsoleView.js 2011-06-29 13:58:09 UTC (rev 90014)
@@ -54,8 +54,7 @@
this.messagesElement.insertBefore(this.topGroup.element, this.promptElement);
this.currentGroup = this.topGroup;
- this.toggleConsoleButton = document.getElementById("console-status-bar-item");
- this.toggleConsoleButton.title = WebInspector.UIString("Show console.");
+ this.toggleConsoleButton = new WebInspector.StatusBarButton(WebInspector.UIString("Show console."), "console-status-bar-item");
this.toggleConsoleButton.addEventListener("click", this._toggleConsoleButtonClicked.bind(this), false);
// Will hold the list of filter elements
@@ -245,7 +244,7 @@
show: function()
{
- this.toggleConsoleButton.addStyleClass("toggled-on");
+ this.toggleConsoleButton.toggled = true;
this.toggleConsoleButton.title = WebInspector.UIString("Hide console.");
if (!this.prompt.isCaretInsidePrompt())
this.prompt.moveCaretToEndOfPrompt();
@@ -258,7 +257,7 @@
hide: function()
{
- this.toggleConsoleButton.removeStyleClass("toggled-on");
+ this.toggleConsoleButton.toggled = false;
this.toggleConsoleButton.title = WebInspector.UIString("Show console.");
},
Modified: trunk/Source/WebCore/inspector/front-end/ElementsPanel.js (90013 => 90014)
--- trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2011-06-29 13:47:00 UTC (rev 90013)
+++ trunk/Source/WebCore/inspector/front-end/ElementsPanel.js 2011-06-29 13:58:09 UTC (rev 90014)
@@ -107,8 +107,8 @@
this.sidebarResizeElement.className = "sidebar-resizer-vertical";
this.sidebarResizeElement.addEventListener("mousedown", this.rightSidebarResizerDragStart.bind(this), false);
- this._nodeSearchButton = new WebInspector.StatusBarButton(WebInspector.UIString("Select an element in the page to inspect it."), "node-search-status-bar-item");
- this._nodeSearchButton.addEventListener("click", this.toggleSearchingForNode.bind(this), false);
+ this.nodeSearchButton = new WebInspector.StatusBarButton(WebInspector.UIString("Select an element in the page to inspect it."), "node-search-status-bar-item");
+ this.nodeSearchButton.addEventListener("click", this.toggleSearchingForNode.bind(this), false);
this.element.appendChild(this.contentElement);
this.element.appendChild(this.sidebarElement);
@@ -134,7 +134,7 @@
get statusBarItems()
{
- return [this._nodeSearchButton.element, this.crumbsElement];
+ return [this.crumbsElement];
},
get defaultFocusedElement()
@@ -1138,15 +1138,15 @@
return;
this.focusedDOMNode = node;
- if (this._nodeSearchButton.toggled) {
+ if (this.nodeSearchButton.toggled) {
InspectorFrontendHost.bringToFront();
- this._nodeSearchButton.toggled = false;
+ this.nodeSearchButton.toggled = false;
}
},
_setSearchingForNode: function(enabled)
{
- this._nodeSearchButton.toggled = enabled;
+ this.nodeSearchButton.toggled = enabled;
},
setSearchingForNode: function(enabled)
@@ -1156,7 +1156,7 @@
toggleSearchingForNode: function()
{
- this.setSearchingForNode(!this._nodeSearchButton.toggled);
+ this.setSearchingForNode(!this.nodeSearchButton.toggled);
},
elementsToRestoreScrollPositionsFor: function()
Modified: trunk/Source/WebCore/inspector/front-end/inspector.css (90013 => 90014)
--- trunk/Source/WebCore/inspector/front-end/inspector.css 2011-06-29 13:47:00 UTC (rev 90013)
+++ trunk/Source/WebCore/inspector/front-end/inspector.css 2011-06-29 13:58:09 UTC (rev 90014)
@@ -548,19 +548,21 @@
-webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
}
-#dock-status-bar-item .glyph {
+
+button.dock-status-bar-item.status-bar-item .glyph {
-webkit-mask-position: 0 -48px;
}
-body.detached #dock-status-bar-item .glyph {
+button.dock-status-bar-item.status-bar-item.toggled-on .glyph {
-webkit-mask-position: -32px -24px;
+ background-color: rgba(0, 0, 0, 0.75);
}
body.port-qt #dock-status-bar-item {
display: none
}
-#console-status-bar-item .glyph {
+.console-status-bar-item .glyph {
-webkit-mask-position: -64px -24px;
}
Modified: trunk/Source/WebCore/inspector/front-end/inspector.html (90013 => 90014)
--- trunk/Source/WebCore/inspector/front-end/inspector.html 2011-06-29 13:47:00 UTC (rev 90013)
+++ trunk/Source/WebCore/inspector/front-end/inspector.html 2011-06-29 13:58:09 UTC (rev 90014)
@@ -180,7 +180,7 @@
</div>
<div id="main">
<div id="main-panels" spellcheck="false"></div>
- <div id="main-status-bar" class="status-bar"><div id="anchored-status-bar-items"><button id="dock-status-bar-item" class="status-bar-item"><div class="glyph"></div><div class="glyph shadow"></div></button><button id="console-status-bar-item" class="status-bar-item"><div class="glyph"></div><div class="glyph shadow"></div></button><div id="counters"><div id="error-warning-count" class="hidden"></div></div></div></div>
+ <div id="main-status-bar" class="status-bar"><div id="anchored-status-bar-items"><div id="counters"><div id="error-warning-count" class="hidden"></div></div></div></div>
</div>
<div id="drawer">
<div id="console-view"><div id="console-messages" class="monospace"><div id="console-prompt" spellcheck="false"><br></div></div></div>
Modified: trunk/Source/WebCore/inspector/front-end/inspector.js (90013 => 90014)
--- trunk/Source/WebCore/inspector/front-end/inspector.js 2011-06-29 13:47:00 UTC (rev 90013)
+++ trunk/Source/WebCore/inspector/front-end/inspector.js 2011-06-29 13:58:09 UTC (rev 90014)
@@ -177,6 +177,24 @@
this.panels.console = new WebInspector.ConsolePanel();
},
+ _createGlobalStatusBarItems: function()
+ {
+ this._dockToggleButton = new WebInspector.StatusBarButton(this._dockButtonTitle(), "dock-status-bar-item");
+ this._dockToggleButton.addEventListener("click", this.toggleAttach.bind(this), false);
+ this._dockToggleButton.toggled = !this.attached;
+
+ var anchoredStatusBar = document.getElementById("anchored-status-bar-items");
+ anchoredStatusBar.appendChild(this._dockToggleButton.element);
+ anchoredStatusBar.appendChild(this.console.toggleConsoleButton.element);
+ if (this.panels.elements)
+ anchoredStatusBar.appendChild(this.panels.elements.nodeSearchButton.element);
+ },
+
+ _dockButtonTitle: function()
+ {
+ return this.attached ? WebInspector.UIString("Undock into separate window.") : WebInspector.UIString("Dock to main window.");
+ },
+
get attached()
{
return this._attached;
@@ -189,19 +207,21 @@
this._attached = x;
- var dockToggleButton = document.getElementById("dock-status-bar-item");
var body = document.body;
if (x) {
body.removeStyleClass("detached");
body.addStyleClass("attached");
- dockToggleButton.title = WebInspector.UIString("Undock into separate window.");
} else {
body.removeStyleClass("attached");
body.addStyleClass("detached");
- dockToggleButton.title = WebInspector.UIString("Dock to main window.");
}
+ if (this._dockToggleButton) {
+ this._dockToggleButton.title = this._dockButtonTitle();
+ this._dockToggleButton.toggled = !x;
+ }
+
// This may be called before onLoadedDone, hence the bulk of inspector objects may
// not be created yet.
if (WebInspector.toolbar)
@@ -447,6 +467,8 @@
this.panels = {};
this._createPanels();
+ this._createGlobalStatusBarItems();
+
this._panelHistory = new WebInspector.PanelHistory();
this.toolbar = new WebInspector.Toolbar();
this.toolbar.attached = WebInspector.attached;
@@ -473,14 +495,6 @@
document.addEventListener("copy", this.documentCopy.bind(this), true);
document.addEventListener("contextmenu", this.contextMenuEventFired.bind(this), true);
- var dockToggleButton = document.getElementById("dock-status-bar-item");
- dockToggleButton.addEventListener("click", this.toggleAttach.bind(this), false);
-
- if (this.attached)
- dockToggleButton.title = WebInspector.UIString("Undock into separate window.");
- else
- dockToggleButton.title = WebInspector.UIString("Dock to main window.");
-
var errorWarningCount = document.getElementById("error-warning-count");
errorWarningCount.addEventListener("click", this.showConsole.bind(this), false);
this._updateErrorAndWarningCounts();
