<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[165383] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/165383">165383</a></dd>
<dt>Author</dt> <dd>bburg@apple.com</dd>
<dt>Date</dt> <dd>2014-03-10 11:15:09 -0700 (Mon, 10 Mar 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>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):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersDashboardManagerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsButtonNavigationItemcss">trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsButtonNavigationItemjs">trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDashboardViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DashboardView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsDebuggerDashboardjs">trunk/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -1,5 +1,69 @@
</span><span class="cx"> 2014-03-10 Brian Burg <bburg@apple.com>
</span><span class="cx">
</span><ins>+ 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>
+
</ins><span class="cx"> Web Inspector: convert the dashboard toolbar item to support multiple dashboards
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=129898
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -110,6 +110,7 @@
</span><span class="cx"> l o c a l i z e d S t r i n g s [ " D a t a b a s e s " ] = " D a t a b a s e s " ;
</span><span class="cx"> l o c a l i z e d S t r i n g s [ " D e b u g : " ] = " D e b u g : " ;
</span><span class="cx"> l o c a l i z e d S t r i n g s [ " D e b u g g e r " ] = " D e b u g g e r " ;
</span><ins>+ l o c a l i z e d S t r i n g s [ " D e b u g g e r P a u s e d " ] = " D e b u g g e r P a u s e d " ;
</ins><span class="cx"> l o c a l i z e d S t r i n g s [ " D e c o d e d " ] = " D e c o d e d " ;
</span><span class="cx"> l o c a l i z e d S t r i n g s [ " D e l e t e " ] = " D e l e t e " ;
</span><span class="cx"> l o c a l i z e d S t r i n g s [ " D e l e t e B r e a k p o i n t " ] = " D e l e t e B r e a k p o i n t " ;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -122,6 +122,7 @@
</span><span class="cx">
</span><span class="cx"> // Register for events.
</span><span class="cx"> this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Paused, this._debuggerDidPause, this);
</span><ins>+ this.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
</ins><span class="cx"> this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.InspectModeStateChanged, this._inspectModeStateChanged, this);
</span><span class="cx"> this.domTreeManager.addEventListener(WebInspector.DOMTreeManager.Event.DOMNodeWasInspected, this._domNodeWasInspected, this);
</span><span class="cx"> this.frameResourceManager.addEventListener(WebInspector.FrameResourceManager.Event.MainFrameDidChange, this._mainFrameDidChange, this);
</span><span class="lines">@@ -280,10 +281,10 @@
</span><span class="cx"> this._consoleToolbarButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this.toggleConsoleView, this);
</span><span class="cx"> this.toolbar.addToolbarItem(this._consoleToolbarButton, WebInspector.Toolbar.Section.Center);
</span><span class="cx">
</span><del>- this._dashboardContainerView = new WebInspector.DashboardContainerView;
- this._dashboardContainerView.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.default);
</del><ins>+ this.dashboardContainer = new WebInspector.DashboardContainerView;
+ this.dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.default);
</ins><span class="cx">
</span><del>- this.toolbar.addToolbarItem(this._dashboardContainerView.toolbarItem, WebInspector.Toolbar.Section.Center);
</del><ins>+ this.toolbar.addToolbarItem(this.dashboardContainer.toolbarItem, WebInspector.Toolbar.Section.Center);
</ins><span class="cx">
</span><span class="cx"> // The toolbar button for node inspection.
</span><span class="cx"> if (this.debuggableType === WebInspector.DebuggableType.Web) {
</span><span class="lines">@@ -749,6 +750,7 @@
</span><span class="cx"> WebInspector._debuggerDidPause = function(event)
</span><span class="cx"> {
</span><span class="cx"> this.debuggerSidebarPanel.show();
</span><ins>+ this.dashboardContainer.showDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
</ins><span class="cx">
</span><span class="cx"> // Since the Scope Chain details sidebar panel might not be in the sidebar yet,
</span><span class="cx"> // set a flag to select and show it when it does become available.
</span><span class="lines">@@ -757,6 +759,11 @@
</span><span class="cx"> InspectorFrontendHost.bringToFront();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+WebInspector._debuggerDidResume = function(event)
+{
+ this.dashboardContainer.closeDashboardViewForRepresentedObject(this.dashboardManager.dashboards.debugger);
+}
+
</ins><span class="cx"> WebInspector._mainFrameDidChange = function(event)
</span><span class="cx"> {
</span><span class="cx"> this.updateWindowTitle();
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersDashboardManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -28,6 +28,7 @@
</span><span class="cx">
</span><span class="cx"> this._dashboards = {};
</span><span class="cx"> this._dashboards.default = new WebInspector.DefaultDashboard;
</span><ins>+ this._dashboards.debugger = new WebInspector.DebuggerDashboard;
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.DashboardManager.prototype = {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -62,6 +62,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/DOMTreeDataGrid.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/DOMTreeOutline.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/DashboardContainerView.css">
</span><ins>+ <link rel="stylesheet" href="Views/DebuggerDashboardView.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/DefaultDashboardView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/DataGrid.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/DatabaseContentView.css">
</span><span class="lines">@@ -218,9 +219,10 @@
</span><span class="cx"> <script src="Models/DOMSearchMatchObject.js"></script>
</span><span class="cx"> <script src="Models/DOMStorageObject.js"></script>
</span><span class="cx"> <script src="Models/DOMTree.js"></script>
</span><del>- <script src="Models/DefaultDashboard.js"></script>
</del><span class="cx"> <script src="Models/DatabaseObject.js"></script>
</span><span class="cx"> <script src="Models/DatabaseTableObject.js"></script>
</span><ins>+ <script src="Models/DebuggerDashboard.js"></script>
+ <script src="Models/DefaultDashboard.js"></script>
</ins><span class="cx"> <script src="Models/ExecutionContext.js"></script>
</span><span class="cx"> <script src="Models/ExecutionContextList.js"></script>
</span><span class="cx"> <script src="Models/Frame.js"></script>
</span><span class="lines">@@ -350,6 +352,7 @@
</span><span class="cx"> <script src="Views/DebuggerSidebarPanel.js"></script>
</span><span class="cx"> <script src="Views/DetailsSection.js"></script>
</span><span class="cx"> <script src="Views/DashboardView.js"></script>
</span><ins>+ <script src="Views/DebuggerDashboardView.js"></script>
</ins><span class="cx"> <script src="Views/DefaultDashboardView.js"></script>
</span><span class="cx"> <script src="Views/DetailsSectionDataGridRow.js"></script>
</span><span class="cx"> <script src="Views/DetailsSectionGroup.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsDebuggerDashboardjsfromrev165382trunkSourceWebInspectorUIUserInterfaceControllersDashboardManagerjs"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js (from rev 165382, trunk/Source/WebInspectorUI/UserInterface/Controllers/DashboardManager.js) (0 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DebuggerDashboard.js 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -0,0 +1,33 @@
</span><ins>+/*
+ * 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,
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsButtonNavigationItemcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.css 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -60,6 +60,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .navigation-bar .item.button.suppress-emboss > .glyph {
</span><ins>+ background-color: rgb(153, 153, 153);
</ins><span class="cx"> opacity: 0.7;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsButtonNavigationItemjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ButtonNavigationItem.js 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -191,7 +191,7 @@
</span><span class="cx"> _updateImage: function()
</span><span class="cx"> {
</span><span class="cx"> if (this._suppressEmboss)
</span><del>- this._glyphElement.style.backgroundImage = "url(" + this._image + ")";
</del><ins>+ this._glyphElement.style.webkitMask = "url(" + this._image + ")";
</ins><span class="cx"> else
</span><span class="cx"> this._generateImages();
</span><span class="cx"> },
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDashboardViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardView.js (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardView.js 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardView.js 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -32,6 +32,9 @@
</span><span class="cx"> if (representedObject instanceof WebInspector.DefaultDashboard)
</span><span class="cx"> return new WebInspector.DefaultDashboardView(representedObject);
</span><span class="cx">
</span><ins>+ if (representedObject instanceof WebInspector.DebuggerDashboard)
+ return new WebInspector.DebuggerDashboardView(representedObject);
+
</ins><span class="cx"> throw "Can't make a DashboardView for an unknown representedObject.";
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewcss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css (0 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.css 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -0,0 +1,133 @@
</span><ins>+/*
+ * 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'; /* &nbsp;&mdash;&nbsp; */
+}
+
+.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;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerDashboardViewjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js (0 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerDashboardView.js 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -0,0 +1,110 @@
</span><ins>+/*
+ * 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();
+ }
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDebuggerSidebarPaneljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js (165382 => 165383)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2014-03-10 18:07:29 UTC (rev 165382)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DebuggerSidebarPanel.js 2014-03-10 18:15:09 UTC (rev 165383)
</span><span class="lines">@@ -40,12 +40,12 @@
</span><span class="cx"> WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.Resumed, this._debuggerDidResume, this);
</span><span class="cx"> WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ActiveCallFrameDidChange, this._debuggerActiveCallFrameDidChange, this);
</span><span class="cx">
</span><del>- this._pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Y", this._debuggerPauseResumeButtonClicked.bind(this));
</del><ins>+ this.pauseOrResumeKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Control | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "Y", this._debuggerPauseResumeButtonClicked.bind(this));
</ins><span class="cx"> this._stepOverKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F6, this._debuggerStepOverButtonClicked.bind(this));
</span><span class="cx"> this._stepIntoKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F7, this._debuggerStepIntoButtonClicked.bind(this));
</span><span class="cx"> this._stepOutKeyboardShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.F8, this._debuggerStepOutButtonClicked.bind(this));
</span><span class="cx">
</span><del>- this._pauseOrResumeAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Slash, this._debuggerPauseResumeButtonClicked.bind(this));
</del><ins>+ this.pauseOrResumeAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Slash, this._debuggerPauseResumeButtonClicked.bind(this));
</ins><span class="cx"> this._stepOverAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.SingleQuote, this._debuggerStepOverButtonClicked.bind(this));
</span><span class="cx"> this._stepIntoAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepIntoButtonClicked.bind(this));
</span><span class="cx"> this._stepOutAlternateKeyboardShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift | WebInspector.KeyboardShortcut.Modifier.CommandOrControl, WebInspector.KeyboardShortcut.Key.Semicolon, this._debuggerStepOutButtonClicked.bind(this));
</span><span class="lines">@@ -61,8 +61,8 @@
</span><span class="cx"> this._debuggerBreakpointsButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._breakpointsToggleButtonClicked, this);
</span><span class="cx"> this._navigationBar.addNavigationItem(this._debuggerBreakpointsButtonItem);
</span><span class="cx">
</span><del>- 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);
</del><ins>+ 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);
</ins><span class="cx">
</span><span class="cx"> this._debuggerPauseResumeButtonItem = new WebInspector.ToggleButtonNavigationItem("debugger-pause-resume", toolTip, altToolTip, "Images/Pause.svg", "Images/Resume.svg", 16, 16);
</span><span class="cx"> this._debuggerPauseResumeButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._debuggerPauseResumeButtonClicked, this);
</span></span></pre>
</div>
</div>
</body>
</html>