<!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>[172044] 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/172044">172044</a></dd>
<dt>Author</dt> <dd>burg@cs.washington.edu</dd>
<dt>Date</dt> <dd>2014-08-05 12:25:07 -0700 (Tue, 05 Aug 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: cannot navigate between multiple applicable dashboards
https://bugs.webkit.org/show_bug.cgi?id=135130
Reviewed by Timothy Hatcher.
Add navigation arrows between dashboards when multiple dashboards are applicable.
For example, the user should be able to go back to the default dashboard while paused
at a breakpoint. Dashboards form a stack based on when they are first introduced.
* UserInterface/Views/DashboardContainerView.css:
(.toolbar .dashboard): Increase padding-right a bit to make room for arrows.
(.toolbar .dashboard:not(.visible)): Fix a bug where higher dashboards in the dashboard stack
can shine through when animating between two lower dashboards that have transparent background.
This ensures that at most two dashboards (namely, the ones being animated) are displayed.
(.dashboard-container .advance-arrow): Main style class for navigation arrows.
(.dashboard-container .advance-arrow:hover):
(.dashboard-container .advance-arrow:active):
(.dashboard-container .advance-arrow.inactive):
(.toolbar.label-only .dashboard-container .advance-arrow): Make arrows slightly smaller when
the dashboards get shorter.
(.dashboard-container .advance-arrow.advance-forward):
(.dashboard-container .advance-arrow.advance-backward):
* UserInterface/Views/DashboardContainerView.js:
(WebInspector.DashboardContainerView): Arrow styles are updated when a dashboard is shown,
hidden, or closed. When moving away, we dismiss (i.e., set zero opacity) arrows at animation
start. When the animation finishes, redisplay arrows that are applicable for the new dashboard.
(WebInspector.DashboardContainerView.prototype._advanceForwardArrowClicked):
(WebInspector.DashboardContainerView.prototype._advanceBackwardArrowClicked):
(WebInspector.DashboardContainerView.prototype._dismissAdvanceArrows):
(WebInspector.DashboardContainerView.prototype._updateAdvanceArrowVisibility):
(WebInspector.DashboardContainerView.prototype._showDashboardAtIndex): There was a bug here
where it would unconditionally use the same animation direction when showing a dashboard, but
it was hard to spot without arrows that must correlate with the animation direction.
(WebInspector.DashboardContainerView.prototype.animationEnded):
(WebInspector.DashboardContainerView.prototype._showDashboardView):
(WebInspector.DashboardContainerView.prototype._hideDashboardView):
(WebInspector.DashboardContainerView.prototype._closeDashboardView):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (172043 => 172044)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2014-08-05 19:16:57 UTC (rev 172043)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-08-05 19:25:07 UTC (rev 172044)
</span><span class="lines">@@ -1,3 +1,47 @@
</span><ins>+2014-08-05 Brian J. Burg <burg@cs.washington.edu>
+
+ Web Inspector: cannot navigate between multiple applicable dashboards
+ https://bugs.webkit.org/show_bug.cgi?id=135130
+
+ Reviewed by Timothy Hatcher.
+
+ Add navigation arrows between dashboards when multiple dashboards are applicable.
+ For example, the user should be able to go back to the default dashboard while paused
+ at a breakpoint. Dashboards form a stack based on when they are first introduced.
+
+ * UserInterface/Views/DashboardContainerView.css:
+ (.toolbar .dashboard): Increase padding-right a bit to make room for arrows.
+ (.toolbar .dashboard:not(.visible)): Fix a bug where higher dashboards in the dashboard stack
+ can shine through when animating between two lower dashboards that have transparent background.
+ This ensures that at most two dashboards (namely, the ones being animated) are displayed.
+
+ (.dashboard-container .advance-arrow): Main style class for navigation arrows.
+ (.dashboard-container .advance-arrow:hover):
+ (.dashboard-container .advance-arrow:active):
+ (.dashboard-container .advance-arrow.inactive):
+ (.toolbar.label-only .dashboard-container .advance-arrow): Make arrows slightly smaller when
+ the dashboards get shorter.
+
+ (.dashboard-container .advance-arrow.advance-forward):
+ (.dashboard-container .advance-arrow.advance-backward):
+ * UserInterface/Views/DashboardContainerView.js:
+ (WebInspector.DashboardContainerView): Arrow styles are updated when a dashboard is shown,
+ hidden, or closed. When moving away, we dismiss (i.e., set zero opacity) arrows at animation
+ start. When the animation finishes, redisplay arrows that are applicable for the new dashboard.
+
+ (WebInspector.DashboardContainerView.prototype._advanceForwardArrowClicked):
+ (WebInspector.DashboardContainerView.prototype._advanceBackwardArrowClicked):
+ (WebInspector.DashboardContainerView.prototype._dismissAdvanceArrows):
+ (WebInspector.DashboardContainerView.prototype._updateAdvanceArrowVisibility):
+ (WebInspector.DashboardContainerView.prototype._showDashboardAtIndex): There was a bug here
+ where it would unconditionally use the same animation direction when showing a dashboard, but
+ it was hard to spot without arrows that must correlate with the animation direction.
+
+ (WebInspector.DashboardContainerView.prototype.animationEnded):
+ (WebInspector.DashboardContainerView.prototype._showDashboardView):
+ (WebInspector.DashboardContainerView.prototype._hideDashboardView):
+ (WebInspector.DashboardContainerView.prototype._closeDashboardView):
+
</ins><span class="cx"> 2014-08-05 Saam Barati <sbarati@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: shown() called on a content view when stepping over an instruction in the debugger
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css (172043 => 172044)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2014-08-05 19:16:57 UTC (rev 172043)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css 2014-08-05 19:25:07 UTC (rev 172044)
</span><span class="lines">@@ -91,7 +91,7 @@
</span><span class="cx"> left: 0;
</span><span class="cx"> right: 0;
</span><span class="cx">
</span><del>- padding: 0 5px;
</del><ins>+ padding: 0 10px 0 5px;
</ins><span class="cx">
</span><span class="cx"> background-color: rgb(252, 252, 252);
</span><span class="cx"> box-shadow: inset white 0 1px 0;
</span><span class="lines">@@ -120,6 +120,10 @@
</span><span class="cx"> z-index: 1; /* Establish a stacking context. */
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.toolbar .dashboard:not(.visible) {
+ opacity: 0;
+}
+
</ins><span class="cx"> .toolbar .dashboard.slide-out-up {
</span><span class="cx"> -webkit-animation-name: slide-top-edge;
</span><span class="cx"> -webkit-animation-direction: reverse;
</span><span class="lines">@@ -155,3 +159,50 @@
</span><span class="cx"> -webkit-transform: translateY(30px);
</span><span class="cx"> }
</span><span class="cx"> }
</span><ins>+
+.dashboard-container .advance-arrow {
+ position: absolute;
+ right: 0px;
+ width: 10px;
+ height: 10px;
+ margin: 4px;
+ opacity: 0.6;
+
+ z-index: 1000;
+ background-repeat: no-repeat;
+ background-size: 8px;
+ background-image: url(../Images/UpDownArrows.svg);
+
+ transition-property: opacity;
+ transition-duration: 0.2s;
+}
+
+.dashboard-container .advance-arrow:hover {
+ opacity: 0.8;
+}
+
+.dashboard-container .advance-arrow:active {
+ opacity: 1;
+}
+
+.dashboard-container .advance-arrow.inactive {
+ opacity: 0;
+ pointer-events: none;
+}
+
+.toolbar.label-only .dashboard-container .advance-arrow {
+ width: 8px;
+ height: 8px;
+ margin: 2px 4px 2px 2px;
+ background-size: 6px;
+}
+
+.dashboard-container .advance-arrow.advance-forward {
+ top: 0;
+ background-position: 0% 0%;
+}
+
+.dashboard-container .advance-arrow.advance-backward {
+ bottom: 0;
+ background-position: 0% 100%;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDashboardContainerViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js (172043 => 172044)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js 2014-08-05 19:16:57 UTC (rev 172043)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js 2014-08-05 19:25:07 UTC (rev 172044)
</span><span class="lines">@@ -28,12 +28,23 @@
</span><span class="cx">
</span><span class="cx"> this._toolbarItem = new WebInspector.NavigationItem("dashboard-container", "group", WebInspector.UIString("Activity Viewer"));
</span><span class="cx">
</span><ins>+ this._advanceForwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
+ this._advanceForwardArrowElement.className = "advance-arrow advance-forward";
+ this._advanceBackwardArrowElement = this._toolbarItem.element.appendChild(document.createElement("div"));
+ this._advanceBackwardArrowElement.className = "advance-arrow advance-backward";
+
+ this._advanceForwardArrowElement.addEventListener("click", this._advanceForwardArrowClicked.bind(this));
+ this._advanceBackwardArrowElement.addEventListener("click", this._advanceBackwardArrowClicked.bind(this));
+
</ins><span class="cx"> // Represents currently open dashboards, with the most recent entries appended to the end.
</span><span class="cx"> this._dashboardStack = [];
</span><span class="cx"> this._currentIndex = -1;
</span><ins>+
+ this._updateAdvanceArrowVisibility();
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.DashboardContainerView.VisibleDashboardStyleClassName = "visible";
</span><ins>+WebInspector.DashboardContainerView.InactiveStyleClassName = "inactive";
</ins><span class="cx">
</span><span class="cx"> WebInspector.DashboardContainerView.AdvanceDirection = {
</span><span class="cx"> Forward: "dashboard-container-view-advance-direction-forward",
</span><span class="lines">@@ -103,6 +114,30 @@
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><ins>+ _advanceForwardArrowClicked: function()
+ {
+ this._showDashboardAtIndex(this._currentIndex + 1);
+ },
+
+ _advanceBackwardArrowClicked: function()
+ {
+ this._showDashboardAtIndex(this._currentIndex - 1);
+ },
+
+ _dismissAdvanceArrows: function()
+ {
+ this._advanceForwardArrowElement.classList.add(WebInspector.DashboardContainerView.InactiveStyleClassName);
+ this._advanceBackwardArrowElement.classList.add(WebInspector.DashboardContainerView.InactiveStyleClassName);
+ },
+
+ _updateAdvanceArrowVisibility: function()
+ {
+ var canAdvanceForward = this._currentIndex < this._dashboardStack.length - 1;
+ var canAdvanceBackward = this._currentIndex > 0;
+ this._advanceForwardArrowElement.classList.toggle(WebInspector.DashboardContainerView.InactiveStyleClassName, !canAdvanceForward);
+ this._advanceBackwardArrowElement.classList.toggle(WebInspector.DashboardContainerView.InactiveStyleClassName, !canAdvanceBackward);
+ },
+
</ins><span class="cx"> _dashboardViewForRepresentedObject: function(representedObject, onlyReturnExistingViews)
</span><span class="cx"> {
</span><span class="cx"> console.assert(representedObject);
</span><span class="lines">@@ -137,14 +172,18 @@
</span><span class="cx"> if (this._currentIndex === index)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var advanceDirection = WebInspector.DashboardContainerView.AdvanceDirection.Forward;
</del><ins>+ var advanceDirection = null;
+ if (this._currentIndex < index)
+ advanceDirection = WebInspector.DashboardContainerView.AdvanceDirection.Forward;
+ else
+ advanceDirection = WebInspector.DashboardContainerView.AdvanceDirection.Backward;
</ins><span class="cx"> var initialDirection = WebInspector.DashboardContainerView.AdvanceDirection.None;
</span><del>- var isFirstDashboard = this._currentIndex === -1;
- if (!isFirstDashboard)
</del><ins>+ var isInitialDashboard = this._currentIndex === -1;
+ if (!isInitialDashboard)
</ins><span class="cx"> this._hideDashboardView(this.currentDashboardView, advanceDirection);
</span><span class="cx">
</span><span class="cx"> this._currentIndex = index;
</span><del>- this._showDashboardView(this.currentDashboardView, isFirstDashboard ? initialDirection : advanceDirection);
</del><ins>+ this._showDashboardView(this.currentDashboardView, isInitialDashboard ? initialDirection : advanceDirection);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _showDashboardView: function(dashboardView, advanceDirection)
</span><span class="lines">@@ -152,6 +191,7 @@
</span><span class="cx"> console.assert(dashboardView instanceof WebInspector.DashboardView);
</span><span class="cx">
</span><span class="cx"> dashboardView.shown();
</span><ins>+ this._dismissAdvanceArrows();
</ins><span class="cx">
</span><span class="cx"> var animationClass = null;
</span><span class="cx"> if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Forward)
</span><span class="lines">@@ -159,6 +199,9 @@
</span><span class="cx"> if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Backward)
</span><span class="cx"> animationClass = WebInspector.DashboardContainerView.BackwardIncomingDashboardStyleClassName;
</span><span class="cx">
</span><ins>+ var container = this;
+ dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+
</ins><span class="cx"> if (animationClass) {
</span><span class="cx"> function animationEnded(event) {
</span><span class="cx"> if (event.target !== dashboardView.element)
</span><span class="lines">@@ -166,12 +209,11 @@
</span><span class="cx">
</span><span class="cx"> dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
</span><span class="cx"> dashboardView.element.classList.remove(animationClass);
</span><del>- dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
</del><ins>+ container._updateAdvanceArrowVisibility();
</ins><span class="cx"> }
</span><span class="cx"> dashboardView.element.classList.add(animationClass);
</span><span class="cx"> dashboardView.element.addEventListener("webkitAnimationEnd", animationEnded);
</span><del>- } else
- dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
</del><ins>+ }
</ins><span class="cx">
</span><span class="cx"> return dashboardView;
</span><span class="cx"> },
</span><span class="lines">@@ -182,6 +224,7 @@
</span><span class="cx"> console.assert(this.currentDashboardView === dashboardView);
</span><span class="cx">
</span><span class="cx"> dashboardView.hidden();
</span><ins>+ this._dismissAdvanceArrows();
</ins><span class="cx">
</span><span class="cx"> var animationClass = null;
</span><span class="cx"> if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Forward)
</span><span class="lines">@@ -189,6 +232,8 @@
</span><span class="cx"> if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Backward)
</span><span class="cx"> animationClass = WebInspector.DashboardContainerView.BackwardOutgoingDashboardStyleClassName;
</span><span class="cx">
</span><ins>+ var container = this;
+
</ins><span class="cx"> if (animationClass) {
</span><span class="cx"> function animationEnded(event) {
</span><span class="cx"> if (event.target !== dashboardView.element)
</span><span class="lines">@@ -197,6 +242,7 @@
</span><span class="cx"> dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
</span><span class="cx"> dashboardView.element.classList.remove(animationClass);
</span><span class="cx"> dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
</span><ins>+ container._updateAdvanceArrowVisibility();
</ins><span class="cx">
</span><span class="cx"> if (typeof callback === "function")
</span><span class="cx"> callback();
</span><span class="lines">@@ -231,5 +277,7 @@
</span><span class="cx"> if (this._currentIndex > index)
</span><span class="cx"> --this._currentIndex;
</span><span class="cx"> dissociateDashboardView.call(this);
</span><ins>+
+ this._updateAdvanceArrowVisibility();
</ins><span class="cx"> }
</span><span class="cx"> };
</span></span></pre>
</div>
</div>
</body>
</html>