Web Inspector: show a debugging-oriented dashboard when scripts pause
https://bugs.webkit.org/show_bug.cgi?id=129913
Reviewed by Timothy Hatcher.
Using the dashboard swapping functionality just added, show a debugger dashboard
whenever the debugger pauses, and hide it when it resumes. The debugger manager
already coalesces pause/resume events across stepping commands.
The dashboard itself is straightforward, with the exception of how it uses the
navigation bar buttons. Since buttons from the same URL can't be reused if they
are bezeled, we don't bezel our button, and set the button image as the glyph mask
instead of the background image. This lets us easily animate the glyph shape.
We also have to more forcefully declare a bunch of icon rules that would otherwise
be messed up by the toolbar's icon rules (whereas we want to mostly emulate navigation
bar icon styles).
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Base/Main.js:
(WebInspector.loaded):
(WebInspector.contentLoaded):
(WebInspector._debuggerDidPause):
(WebInspector._debuggerDidResume):
* UserInterface/Controllers/DashboardManager.js:
(WebInspector.DashboardManager):
* UserInterface/Main.html:
* UserInterface/Models/DebuggerDashboard.js: Added.
(WebInspector.DebuggerDashboard):
* UserInterface/Views/ButtonNavigationItem.css:
(.navigation-bar .item.button.suppress-emboss > .glyph):
* UserInterface/Views/ButtonNavigationItem.js:
(WebInspector.ButtonNavigationItem.prototype._updateImage):
* UserInterface/Views/DashboardView.js:
(WebInspector.DashboardView):
* UserInterface/Views/DebuggerDashboardView.css: Added.
(.toolbar .dashboard.debugger):
(.dashboard.debugger > .message):
(.dashboard.debugger .navigation-bar):
(.toolbar:not(.small-size) .dashboard.debugger .navigation-bar):
(.dashboard.debugger .navigation-bar .item.button):
(.dashboard.debugger .navigation-bar .item.button > .glyph):
(@-webkit-keyframes pulse-pause-button):
(to):
(.dashboard.debugger > .divider):
(.dashboard.debugger > div):
(.dashboard.debugger > .location > :first-child):
(.toolbar:not(.small-size) .dashboard.debugger > .location :not(:first-child)):
(.dashboard.debugger > .location img.icon):
(.dashboard.debugger > .location .function-name):
(.dashboard.debugger > .location .function-name::after):
(.dashboard.debugger > .location .go-to-link):
(.toolbar.collapsed .dashboard.debugger > :not(.message):not(.navigation-bar )):
(.toolbar.small-size .dashboard.debugger > .message):
(.toolbar.small-size .dashboard.debugger > .location > :first-child):
* UserInterface/Views/DebuggerDashboardView.js: Added.
(WebInspector.DebuggerDashboardView):
(WebInspector.DebuggerDashboardView.prototype._rebuildLocation):
(WebInspector.DebuggerDashboardView.prototype._resumeButtonClicked):
* UserInterface/Views/DebuggerSidebarPanel.js:
(WebInspector.DebuggerSidebarPanel):
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@165383 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 0dc403e..632d1c2 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,5 +1,69 @@
2014-03-10 Brian Burg <bburg@apple.com>
+ Web Inspector: show a debugging-oriented dashboard when scripts pause
+ https://bugs.webkit.org/show_bug.cgi?id=129913
+
+ Reviewed by Timothy Hatcher.
+
+ Using the dashboard swapping functionality just added, show a debugger dashboard
+ whenever the debugger pauses, and hide it when it resumes. The debugger manager
+ already coalesces pause/resume events across stepping commands.
+
+ The dashboard itself is straightforward, with the exception of how it uses the
+ navigation bar buttons. Since buttons from the same URL can't be reused if they
+ are bezeled, we don't bezel our button, and set the button image as the glyph mask
+ instead of the background image. This lets us easily animate the glyph shape.
+
+ We also have to more forcefully declare a bunch of icon rules that would otherwise
+ be messed up by the toolbar's icon rules (whereas we want to mostly emulate navigation
+ bar icon styles).
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Base/Main.js:
+ (WebInspector.loaded):
+ (WebInspector.contentLoaded):
+ (WebInspector._debuggerDidPause):
+ (WebInspector._debuggerDidResume):
+ * UserInterface/Controllers/DashboardManager.js:
+ (WebInspector.DashboardManager):
+ * UserInterface/Main.html:
+ * UserInterface/Models/DebuggerDashboard.js: Added.
+ (WebInspector.DebuggerDashboard):
+ * UserInterface/Views/ButtonNavigationItem.css:
+ (.navigation-bar .item.button.suppress-emboss > .glyph):
+ * UserInterface/Views/ButtonNavigationItem.js:
+ (WebInspector.ButtonNavigationItem.prototype._updateImage):
+ * UserInterface/Views/DashboardView.js:
+ (WebInspector.DashboardView):
+ * UserInterface/Views/DebuggerDashboardView.css: Added.
+ (.toolbar .dashboard.debugger):
+ (.dashboard.debugger > .message):
+ (.dashboard.debugger .navigation-bar):
+ (.toolbar:not(.small-size) .dashboard.debugger .navigation-bar):
+ (.dashboard.debugger .navigation-bar .item.button):
+ (.dashboard.debugger .navigation-bar .item.button > .glyph):
+ (@-webkit-keyframes pulse-pause-button):
+ (to):
+ (.dashboard.debugger > .divider):
+ (.dashboard.debugger > div):
+ (.dashboard.debugger > .location > :first-child):
+ (.toolbar:not(.small-size) .dashboard.debugger > .location :not(:first-child)):
+ (.dashboard.debugger > .location img.icon):
+ (.dashboard.debugger > .location .function-name):
+ (.dashboard.debugger > .location .function-name::after):
+ (.dashboard.debugger > .location .go-to-link):
+ (.toolbar.collapsed .dashboard.debugger > :not(.message):not(.navigation-bar )):
+ (.toolbar.small-size .dashboard.debugger > .message):
+ (.toolbar.small-size .dashboard.debugger > .location > :first-child):
+ * UserInterface/Views/DebuggerDashboardView.js: Added.
+ (WebInspector.DebuggerDashboardView):
+ (WebInspector.DebuggerDashboardView.prototype._rebuildLocation):
+ (WebInspector.DebuggerDashboardView.prototype._resumeButtonClicked):
+ * UserInterface/Views/DebuggerSidebarPanel.js:
+ (WebInspector.DebuggerSidebarPanel):
+
+2014-03-10 Brian Burg <bburg@apple.com>
+
Web Inspector: convert the dashboard toolbar item to support multiple dashboards
https://bugs.webkit.org/show_bug.cgi?id=129898
diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
index cb65925..196509e 100644
--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Binary files differ
diff --git a/Source/WebInspectorUI/UserInterface/Base/Main.js b/Source/WebInspectorUI/UserInterface/Base/Main.js
index abf5dd0..fcaf098 100644
--- a/Source/WebInspectorUI/UserInterface/Base/Main.js
+++ b/Source/WebInspectorUI/UserInterface/Base/Main.js
@@ -122,6 +122,7 @@
// Register for events.
this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
+ this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.InspectModeStateChanged, this._inspectModeStateChanged, this);
this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, this._domNodeWasInspected, this);
this.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
@@ -280,10 +281,10 @@
this._consoleToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.toggleConsoleView, this);
this.toolbar.addToolbarItem(this._consoleToolbarButton, WebInspector.Toolbar.Section.Center);
- this._dashboardContainerView = new WebInspector.DashboardContainerView;
- this._dashboardContainerView.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.default);
+ this.dashboardContainer = new WebInspector.DashboardContainerView;
+ this.dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.default);
- this.toolbar.addToolbarItem(this._dashboardContainerView.toolbarItem, WebInspector.Toolbar.Section.Center);
+ this.toolbar.addToolbarItem(this.dashboardContainer.toolbarItem, WebInspector.Toolbar.Section.Center);
// The toolbar button for node inspection.
if (this.debuggableType === WebInspector.DebuggableType.Web) {
@@ -749,6 +750,7 @@
WebInspector._debuggerDidPause = function(event)
{
this.debuggerSidebarPanel.show();
+ this.dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
// Since the Scope Chain details sidebar panel might not be in the sidebar yet,
// set a flag to select and show it when it does become available.
@@ -757,6 +759,11 @@
InspectorFrontendHost.bringToFront();
}
+WebInspector._debuggerDidResume = function(event)
+{
+ this.dashboardContainer.closeDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
+}
+
WebInspector._mainFrameDidChange = function(event)
{
this.updateWindowTitle();
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js b/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js
index 8974650..781c819 100644
--- a/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js
+++ b/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js
@@ -28,6 +28,7 @@
this._dashboards = {};
this._dashboards.default = new WebInspector.DefaultDashboard;
+ this._dashboards.debugger = new WebInspector.DebuggerDashboard;
};
WebInspector.DashboardManager.prototype = {
diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html
index 3d9391a..657520f 100644
--- a/Source/WebInspectorUI/UserInterface/Main.html
+++ b/Source/WebInspectorUI/UserInterface/Main.html
@@ -62,6 +62,7 @@
<link rel="stylesheet" href="Views/DOMTreeDataGrid.css">
<link rel="stylesheet" href="Views/DOMTreeOutline.css">
<link rel="stylesheet" href="Views/DashboardContainerView.css">
+ <link rel="stylesheet" href="Views/DebuggerDashboardView.css">
<link rel="stylesheet" href="Views/DefaultDashboardView.css">
<link rel="stylesheet" href="Views/DataGrid.css">
<link rel="stylesheet" href="Views/DatabaseContentView.css">
@@ -218,9 +219,10 @@
<script src="Models/DOMSearchMatchObject.js"></script>
<script src="Models/DOMStorageObject.js"></script>
<script src="Models/DOMTree.js"></script>
- <script src="Models/DefaultDashboard.js"></script>
<script src="Models/DatabaseObject.js"></script>
<script src="Models/DatabaseTableObject.js"></script>
+ <script src="Models/DebuggerDashboard.js"></script>
+ <script src="Models/DefaultDashboard.js"></script>
<script src="Models/ExecutionContext.js"></script>
<script src="Models/ExecutionContextList.js"></script>
<script src="Models/Frame.js"></script>
@@ -350,6 +352,7 @@
<script src="Views/DebuggerSidebarPanel.js"></script>
<script src="Views/DetailsSection.js"></script>
<script src="Views/DashboardView.js"></script>
+ <script src="Views/DebuggerDashboardView.js"></script>
<script src="Views/DefaultDashboardView.js"></script>
<script src="Views/DetailsSectionDataGridRow.js"></script>
<script src="Views/DetailsSectionGroup.js"></script>
diff --git a/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js b/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js
new file mode 100644
index 0000000..d713943
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerDashboard = function() {
+ WebInspector.Object.call(this);
+};
+
+WebInspector.DebuggerDashboard.prototype = {
+ constructor: WebInspector.DebuggerDashboard,
+ __proto__: WebInspector.Object.prototype,
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
index c7d40a1..901658f 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css
@@ -60,6 +60,7 @@
}
.navigation-bar .item.button.suppress-emboss > .glyph {
+ background-color: rgb(153, 153, 153);
opacity: 0.7;
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
index 35ad4ce..d9b692e 100644
--- a/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
+++ b/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js
@@ -191,7 +191,7 @@
_updateImage: function()
{
if (this._suppressEmboss)
- this._glyphElement.style.backgroundImage = "url(" + this._image + ")";
+ this._glyphElement.style.webkitMask = "url(" + this._image + ")";
else
this._generateImages();
},
diff --git a/Source/WebInspectorUI/UserInterface/Views/DashboardView.js b/Source/WebInspectorUI/UserInterface/Views/DashboardView.js
index 26cbcbc..8b05ba2 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DashboardView.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DashboardView.js
@@ -32,6 +32,9 @@
if (representedObject instanceof WebInspector.DefaultDashboard)
return new WebInspector.DefaultDashboardView(representedObject);
+ if (representedObject instanceof WebInspector.DebuggerDashboard)
+ return new WebInspector.DebuggerDashboardView(representedObject);
+
throw "Can't make a DashboardView for an unknown representedObject.";
}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
new file mode 100644
index 0000000..831709d
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css
@@ -0,0 +1,133 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+.toolbar .dashboard.debugger {
+ display: -webkit-flex;
+ -webkit-flex-wrap: nowrap;
+ -webkit-justify-content: center;
+ -webkit-align-items: center;
+
+ font-size: 11px;
+ font-family: Lucida Grande, sans-serif;
+ text-align: center;
+ text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
+ color: rgb(60, 60, 60);
+ padding: 0 5px;
+}
+
+.dashboard.debugger > .message {
+ font-weight: bold;
+}
+
+.dashboard.debugger .navigation-bar {
+ border: 0;
+ margin: 0 5px 0 -5px;
+}
+
+.toolbar:not(.small-size) .dashboard.debugger .navigation-bar {
+ margin-top: 1px;
+}
+
+.dashboard.debugger .navigation-bar .item.button {
+ -webkit-flex-direction: row;
+ width: 16px;
+ cursor: pointer;
+ padding: 0;
+}
+
+.dashboard.debugger .navigation-bar .item.button > .glyph {
+ width: 16px;
+ height: 16px;
+ -webkit-animation-name: pulse-pause-button;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-timing-function: ease-out;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ background-color: rgb(102, 155, 199) !important;
+}
+
+@-webkit-keyframes pulse-pause-button {
+ from { opacity: 0.7; -webkit-transform: scale(1); }
+ to { opacity: 1; -webkit-transform: scale(1.1); }
+}
+
+.dashboard.debugger > .divider {
+ width: 1px;
+ height: 100%;
+
+ margin: 0 10px;
+
+ background-image: linear-gradient(rgb(190, 190, 190), rgb(190, 190, 190));
+ background-size: 100% 66%;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+
+.dashboard.debugger > div {
+ display: -webkit-flex;
+ -webkit-align-items: center;
+}
+
+.dashboard.debugger > .location > :first-child {
+ -webkit-align-self: center;
+ width: 16px;
+ height: 16px;
+ margin-right: 5px;
+}
+
+.toolbar:not(.small-size) .dashboard.debugger > .location :not(:first-child) {
+ margin-top: 1px;
+}
+
+.dashboard.debugger > .location img.icon {
+ width: 16px;
+ height: 16px;
+}
+
+.dashboard.debugger > .location .function-name {
+ color: rgb(30, 30, 30);
+}
+
+.dashboard.debugger > .location .function-name::after {
+ content: '\0A00\2014\0A00'; /* — */
+}
+
+.dashboard.debugger > .location .go-to-link {
+ padding-bottom: 1px;
+ -webkit-text-decoration-color: #aaa;
+}
+
+.toolbar.collapsed .dashboard.debugger > :not(.message):not(.navigation-bar ) {
+ display: none;
+}
+
+.toolbar.small-size .dashboard.debugger > .message {
+ font-size: 10px;
+}
+
+.toolbar.small-size .dashboard.debugger > .location img.icon,
+.toolbar.small-size .dashboard.debugger > .location > :first-child {
+ width: 14px;
+ height: 14px;
+}
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js
new file mode 100644
index 0000000..deaff5f
--- /dev/null
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js
@@ -0,0 +1,110 @@
+/*
+ * Copyright (C) 2014 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.DebuggerDashboardView = function(representedObject)
+{
+ WebInspector.DashboardView.call(this, representedObject, "debugger");
+
+ WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._rebuildLocation, this);
+
+ this._navigationBar = new WebInspector.NavigationBar;
+ this.element.appendChild(this._navigationBar.element);
+
+ var tooltip = WebInspector.UIString("Continue script execution (%s or %s)").format(WebInspector.debuggerSidebarPanel.pauseOrResumeKeyboardShortcut.displayName, WebInspector.debuggerSidebarPanel.pauseOrResumeAlternateKeyboardShortcut.displayName);
+ this._debuggerResumeButtonItem = new WebInspector.ActivateButtonNavigationItem("debugger-dashboard-pause", tooltip, tooltip, "Images/Resume.svg", 16, 16, true);
+ this._debuggerResumeButtonItem.activated = true;
+ this._debuggerResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._resumeButtonClicked, this);
+ this._navigationBar.addNavigationItem(this._debuggerResumeButtonItem);
+
+ var message = this._messageElement = document.createElement("div");
+ message.classList.add(WebInspector.DebuggerDashboardView.MessageStyleClassName);
+ message.title = message.textContent = WebInspector.UIString("Debugger Paused");
+ this.element.appendChild(message);
+
+ var dividerElement = document.createElement("div");
+ dividerElement.classList.add(WebInspector.DebuggerDashboardView.DividerStyleClassName);
+ this.element.appendChild(dividerElement);
+
+ var locationElement = this._locationElement = document.createElement("div");
+ locationElement.classList.add(WebInspector.DebuggerDashboardView.LocationStyleClassName);
+ this.element.appendChild(locationElement);
+
+ this._rebuildLocation();
+};
+
+WebInspector.DebuggerDashboardView.FunctionIconStyleClassName = WebInspector.CallFrameTreeElement.FunctionIconStyleClassName;
+WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName = WebInspector.CallFrameTreeElement.EventListenerIconStyleClassName;
+
+WebInspector.DebuggerDashboardView.IconStyleClassName = "icon";
+WebInspector.DebuggerDashboardView.MessageStyleClassName = "message";
+WebInspector.DebuggerDashboardView.DividerStyleClassName = "divider";
+WebInspector.DebuggerDashboardView.LocationStyleClassName = "location";
+WebInspector.DebuggerDashboardView.FunctionNameStyleClassname = "function-name";
+
+WebInspector.DebuggerDashboardView.prototype = {
+ constructor: WebInspector.DebuggerDashboardView,
+ __proto__: WebInspector.DashboardView.prototype,
+
+ _rebuildLocation: function()
+ {
+ if (!WebInspector.debuggerManager.activeCallFrame)
+ return;
+
+ this._locationElement.removeChildren();
+
+ var callFrame = WebInspector.debuggerManager.activeCallFrame;
+ var functionName = callFrame.functionName || WebInspector.UIString("(anonymous function)");
+
+ var iconClassName = WebInspector.DebuggerDashboardView.FunctionIconStyleClassName;
+
+ // This is more than likely an event listener function with an "on" prefix and it is
+ // as long or longer than the shortest event listener name -- "oncut".
+ if (callFrame.functionName && callFrame.functionName.startsWith("on") && callFrame.functionName.length >= 5)
+ iconClassName = WebInspector.DebuggerDashboardView.EventListenerIconStyleClassName;
+
+ var iconElement = document.createElement("div");
+ iconElement.classList.add(iconClassName);
+ this._locationElement.appendChild(iconElement);
+
+ var iconImageElement = document.createElement("img");
+ iconImageElement.className = WebInspector.DebuggerDashboardView.IconStyleClassName;
+ iconElement.appendChild(iconImageElement);
+
+ var nameElement = document.createElement("div");
+ nameElement.appendChild(document.createTextNode(functionName));
+ nameElement.classList.add(WebInspector.DebuggerDashboardView.FunctionNameStyleClassname);
+ this._locationElement.appendChild(nameElement);
+
+ var sourceCodeLocation = WebInspector.debuggerManager.activeCallFrame.sourceCodeLocation;
+ var shouldPreventLinkFloat = true;
+ var linkElement = WebInspector.createSourceCodeLocationLink(sourceCodeLocation, shouldPreventLinkFloat);
+ this._locationElement.appendChild(linkElement);
+ },
+
+ _resumeButtonClicked: function()
+ {
+ WebInspector.debuggerManager.resume();
+ }
+};
diff --git a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
index 92d607f..58b0368 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js
@@ -40,12 +40,12 @@
WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
- this._pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Y", this._debuggerPauseResumeButtonClicked.bind(this));
+ this.pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Y", this._debuggerPauseResumeButtonClicked.bind(this));
this._stepOverKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F6, this._debuggerStepOverButtonClicked.bind(this));
this._stepIntoKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F7, this._debuggerStepIntoButtonClicked.bind(this));
this._stepOutKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F8, this._debuggerStepOutButtonClicked.bind(this));
- this._pauseOrResumeAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Slash, this._debuggerPauseResumeButtonClicked.bind(this));
+ this.pauseOrResumeAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Slash, this._debuggerPauseResumeButtonClicked.bind(this));
this._stepOverAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.SingleQuote, this._debuggerStepOverButtonClicked.bind(this));
this._stepIntoAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepIntoButtonClicked.bind(this));
this._stepOutAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepOutButtonClicked.bind(this));
@@ -61,8 +61,8 @@
this._debuggerBreakpointsButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._breakpointsToggleButtonClicked, this);
this._navigationBar.addNavigationItem(this._debuggerBreakpointsButtonItem);
- toolTip = WebInspector.UIString("Pause script execution (%s or %s)").format(this._pauseOrResumeKeyboardShortcut.displayName, this._pauseOrResumeAlternateKeyboardShortcut.displayName);
- altToolTip = WebInspector.UIString("Continue script execution (%s or %s)").format(this._pauseOrResumeKeyboardShortcut.displayName, this._pauseOrResumeAlternateKeyboardShortcut.displayName);
+ toolTip = WebInspector.UIString("Pause script execution (%s or %s)").format(this.pauseOrResumeKeyboardShortcut.displayName, this.pauseOrResumeAlternateKeyboardShortcut.displayName);
+ altToolTip = WebInspector.UIString("Continue script execution (%s or %s)").format(this.pauseOrResumeKeyboardShortcut.displayName, this.pauseOrResumeAlternateKeyboardShortcut.displayName);
this._debuggerPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("debugger-pause-resume", toolTip, altToolTip, "Images/Pause.svg", "Images/Resume.svg", 16, 16);
this._debuggerPauseResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerPauseResumeButtonClicked, this);
