Modified: trunk/Source/WebInspectorUI/ChangeLog (172043 => 172044)
--- 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)
@@ -1,3 +1,47 @@
+2014-08-05 Brian J. Burg <b...@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):
+
2014-08-05 Saam Barati <sbar...@apple.com>
Web Inspector: shown() called on a content view when stepping over an instruction in the debugger
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.css (172043 => 172044)
--- 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)
@@ -91,7 +91,7 @@
left: 0;
right: 0;
- padding: 0 5px;
+ padding: 0 10px 0 5px;
background-color: rgb(252, 252, 252);
box-shadow: inset white 0 1px 0;
@@ -120,6 +120,10 @@
z-index: 1; /* Establish a stacking context. */
}
+.toolbar .dashboard:not(.visible) {
+ opacity: 0;
+}
+
.toolbar .dashboard.slide-out-up {
-webkit-animation-name: slide-top-edge;
-webkit-animation-direction: reverse;
@@ -155,3 +159,50 @@
-webkit-transform: translateY(30px);
}
}
+
+.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%;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DashboardContainerView.js (172043 => 172044)
--- 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)
@@ -28,12 +28,23 @@
this._toolbarItem = new WebInspector.NavigationItem("dashboard-container", "group", WebInspector.UIString("Activity Viewer"));
+ 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));
+
// Represents currently open dashboards, with the most recent entries appended to the end.
this._dashboardStack = [];
this._currentIndex = -1;
+
+ this._updateAdvanceArrowVisibility();
};
WebInspector.DashboardContainerView.VisibleDashboardStyleClassName = "visible";
+WebInspector.DashboardContainerView.InactiveStyleClassName = "inactive";
WebInspector.DashboardContainerView.AdvanceDirection = {
Forward: "dashboard-container-view-advance-direction-forward",
@@ -103,6 +114,30 @@
// Private
+ _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);
+ },
+
_dashboardViewForRepresentedObject: function(representedObject, onlyReturnExistingViews)
{
console.assert(representedObject);
@@ -137,14 +172,18 @@
if (this._currentIndex === index)
return;
- var advanceDirection = WebInspector.DashboardContainerView.AdvanceDirection.Forward;
+ var advanceDirection = null;
+ if (this._currentIndex < index)
+ advanceDirection = WebInspector.DashboardContainerView.AdvanceDirection.Forward;
+ else
+ advanceDirection = WebInspector.DashboardContainerView.AdvanceDirection.Backward;
var initialDirection = WebInspector.DashboardContainerView.AdvanceDirection.None;
- var isFirstDashboard = this._currentIndex === -1;
- if (!isFirstDashboard)
+ var isInitialDashboard = this._currentIndex === -1;
+ if (!isInitialDashboard)
this._hideDashboardView(this.currentDashboardView, advanceDirection);
this._currentIndex = index;
- this._showDashboardView(this.currentDashboardView, isFirstDashboard ? initialDirection : advanceDirection);
+ this._showDashboardView(this.currentDashboardView, isInitialDashboard ? initialDirection : advanceDirection);
},
_showDashboardView: function(dashboardView, advanceDirection)
@@ -152,6 +191,7 @@
console.assert(dashboardView instanceof WebInspector.DashboardView);
dashboardView.shown();
+ this._dismissAdvanceArrows();
var animationClass = null;
if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Forward)
@@ -159,6 +199,9 @@
if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Backward)
animationClass = WebInspector.DashboardContainerView.BackwardIncomingDashboardStyleClassName;
+ var container = this;
+ dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+
if (animationClass) {
function animationEnded(event) {
if (event.target !== dashboardView.element)
@@ -166,12 +209,11 @@
dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
dashboardView.element.classList.remove(animationClass);
- dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+ container._updateAdvanceArrowVisibility();
}
dashboardView.element.classList.add(animationClass);
dashboardView.element.addEventListener("webkitAnimationEnd", animationEnded);
- } else
- dashboardView.element.classList.add(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+ }
return dashboardView;
},
@@ -182,6 +224,7 @@
console.assert(this.currentDashboardView === dashboardView);
dashboardView.hidden();
+ this._dismissAdvanceArrows();
var animationClass = null;
if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Forward)
@@ -189,6 +232,8 @@
if (advanceDirection === WebInspector.DashboardContainerView.AdvanceDirection.Backward)
animationClass = WebInspector.DashboardContainerView.BackwardOutgoingDashboardStyleClassName;
+ var container = this;
+
if (animationClass) {
function animationEnded(event) {
if (event.target !== dashboardView.element)
@@ -197,6 +242,7 @@
dashboardView.element.removeEventListener("webkitAnimationEnd", animationEnded);
dashboardView.element.classList.remove(animationClass);
dashboardView.element.classList.remove(WebInspector.DashboardContainerView.VisibleDashboardStyleClassName);
+ container._updateAdvanceArrowVisibility();
if (typeof callback === "function")
callback();
@@ -231,5 +277,7 @@
if (this._currentIndex > index)
--this._currentIndex;
dissociateDashboardView.call(this);
+
+ this._updateAdvanceArrowVisibility();
}
};
