Modified: trunk/Source/WebInspectorUI/ChangeLog (194935 => 194936)
--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-13 01:05:20 UTC (rev 194935)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-13 01:14:14 UTC (rev 194936)
@@ -1,5 +1,61 @@
2016-01-12 Matt Baker <[email protected]>
+ Web Inspector: Timeline recording controls should use NavigationBar
+ https://bugs.webkit.org/show_bug.cgi?id=152997
+
+ Reviewed by Brian Burg.
+
+ NavigtaionBar should always be preferred over manually editing the DOM.
+ Reusing existing button types for the record button and status element lets us
+ eliminate a bunch of CSS, and will make future changes to the Timelines UI
+ (such as adding addition recording controls), easier to implement.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ New tooltip strings.
+
+ * UserInterface/Views/TimelineSidebarPanel.css:
+ (.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop):
+ (.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop:hover):
+ (.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop:active):
+ Replaced similar styles used for the record glyph.
+ (.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop *):
+ Prevent multiple mouseover/mouseout events while hovering the navigation item.
+ (.sidebar > .panel.navigation.timeline > .navigation-bar > .item.flexible-space):
+ Replaced similar styles used for the record status element.
+ (.sidebar > .panel.navigation.timeline > .status-bar): Deleted.
+ (body.window-inactive .sidebar > .panel.navigation.timeline > .status-bar): Deleted.
+ (.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph): Deleted.
+ (.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph:hover): Deleted.
+ (.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph:active): Deleted.
+ (.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph.recording): Deleted.
+ (.sidebar > .panel.navigation.timeline > .status-bar > .record-status): Deleted.
+ (.panel.timeline .navigation-bar.timelines-view): Deleted.
+ No longer used.
+
+ * UserInterface/Views/TimelineSidebarPanel.js:
+ Removed unused CSS static variables.
+ (WebInspector.TimelineSidebarPanel):
+ Create navigation bar, remove status bar DOM elements. Create keyboard shortcut
+ before the record button, so the shortcut's display name can be used in tooltips.
+ (WebInspector.TimelineSidebarPanel.prototype._capturingStartedOrStopped):
+ Update record button state and flexible space (status) text.
+ (WebInspector.TimelineSidebarPanel.prototype._recordButtonClicked):
+ Toggle recording state, and update record button state and flexible space (status) text.
+ (WebInspector.TimelineSidebarPanel.prototype._recordButtonMousedOver):
+ (WebInspector.TimelineSidebarPanel.prototype._recordButtonMousedOut):
+ Update flexible space (status) text.
+ (WebInspector.TimelineSidebarPanel.prototype._updateRecordButton):
+ (WebInspector.TimelineSidebarPanel.prototype._updateReplayInterfaceVisibility):
+ (WebInspector.TimelineSidebarPanel.prototype._toggleRecording): Deleted.
+ (WebInspector.TimelineSidebarPanel.prototype._capturingStarted): Deleted.
+ (WebInspector.TimelineSidebarPanel.prototype._capturingStopped): Deleted.
+ (WebInspector.TimelineSidebarPanel.prototype._recordGlyphMousedOver): Deleted.
+ (WebInspector.TimelineSidebarPanel.prototype._recordGlyphMousedOut): Deleted.
+ (WebInspector.TimelineSidebarPanel.prototype._recordGlyphClicked): Deleted.
+ No longer used.
+
+2016-01-12 Matt Baker <[email protected]>
+
Web Inspector: Move helper methods for getting icons/text to TimelineTabContentView
https://bugs.webkit.org/show_bug.cgi?id=152996
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (194935 => 194936)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-13 01:05:20 UTC (rev 194935)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-13 01:14:14 UTC (rev 194936)
@@ -65,8 +65,8 @@
localizedStrings["All Resources"] = "All Resources";
localizedStrings["All Storage"] = "All Storage";
localizedStrings["All Uncaught Exceptions"] = "All Uncaught Exceptions";
+localizedStrings["An error occurred trying to load the resource."] = "An error occurred trying to load the resource.";
localizedStrings["An error occurred trying to read the %s table."] = "An error occurred trying to read the %s table.";
-localizedStrings["An error occurred trying to load the resource."] = "An error occurred trying to load the resource.";
localizedStrings["An unexpected error %s occurred."] = "An unexpected error %s occurred.";
localizedStrings["An unexpected error occurred."] = "An unexpected error occurred.";
localizedStrings["Angle"] = "Angle";
@@ -124,8 +124,6 @@
localizedStrings["Clear samples"] = "Clear samples";
localizedStrings["Clear watch expressions"] = "Clear watch expressions";
localizedStrings["Click Listener"] = "Click Listener";
-localizedStrings["Click or press the spacebar to record."] = "Click or press the spacebar to record.";
-localizedStrings["Click or press the spacebar to stop recording."] = "Click or press the spacebar to stop recording.";
localizedStrings["Click to add a new rule."] = "Click to add a new rule.";
localizedStrings["Click to clear modified properties"] = "Click to clear modified properties";
localizedStrings["Click to close this tab"] = "Click to close this tab";
@@ -602,6 +600,7 @@
localizedStrings["Start Playback"] = "Start Playback";
localizedStrings["Start Recording"] = "Start Recording";
localizedStrings["Start Time"] = "Start Time";
+localizedStrings["Start recording (%s)\nCreate new recording (%s)"] = "Start recording (%s)\nCreate new recording (%s)";
localizedStrings["State"] = "State";
localizedStrings["Status"] = "Status";
localizedStrings["Step"] = "Step";
@@ -609,6 +608,7 @@
localizedStrings["Step out (%s or %s)"] = "Step out (%s or %s)";
localizedStrings["Step over (%s or %s)"] = "Step over (%s or %s)";
localizedStrings["Stop Recording"] = "Stop Recording";
+localizedStrings["Stop recording (%s)"] = "Stop recording (%s)";
localizedStrings["Storage"] = "Storage";
localizedStrings["Style"] = "Style";
localizedStrings["Style Attribute"] = "Style Attribute";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css (194935 => 194936)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css 2016-01-13 01:05:20 UTC (rev 194935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.css 2016-01-13 01:14:14 UTC (rev 194936)
@@ -23,65 +23,26 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
-.sidebar > .panel.navigation.timeline > .status-bar {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- height: 29px;
- border-bottom: 1px solid hsl(0, 0%, 70%);
-}
-
-body.window-inactive .sidebar > .panel.navigation.timeline > .status-bar {
- border-bottom-color: hsl(0, 0%, 85%);
-}
-
-.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph {
- position: absolute;
- top: 3px;
- left: 5px;
- width: 21px;
- height: 21px;
- padding: 0;
- border: none;
- outline: none;
- color: transparent;
- overflow: hidden;
-
- -webkit-appearance: none;
-
- background-color: transparent;
- background-repeat: no-repeat;
- background-image: url(../Images/Record.svg);
- background-size: 13px 13px;
- background-position: center;
-}
-
-.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph {
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop {
/* Workaround for background image clipping issue on non-retina machines. See http://webkit.org/b/147346. */
filter: brightness(100%);
}
-.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph:hover {
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop:hover {
filter: brightness(95%);
}
-.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph:active {
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop:active {
filter: brightness(80%);
}
-.sidebar > .panel.navigation.timeline > .status-bar > .record-glyph.recording {
- background-image: url(../Images/Stop.svg);
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.record-start-stop * {
+ pointer-events: none;
}
-.sidebar > .panel.navigation.timeline > .status-bar > .record-status {
- position: absolute;
- top: 3px;
- right: 21px;
- left: 27px;
+.sidebar > .panel.navigation.timeline > .navigation-bar > .item.flexible-space {
+ justify-content: center;
- text-align: center;
-
line-height: 20px;
font-weight: bold;
@@ -89,10 +50,6 @@
text-shadow: hsla(0, 0%, 100%, 0.5) 0 1px 0;
}
-.panel.timeline .navigation-bar.timelines-view {
- justify-content: flex-end;
-}
-
.sidebar > .panel.navigation.timeline > .title-bar {
position: absolute;
left: 0;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js (194935 => 194936)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2016-01-13 01:05:20 UTC (rev 194935)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineSidebarPanel.js 2016-01-13 01:14:14 UTC (rev 194936)
@@ -115,30 +115,37 @@
this._timelinesContentContainerElement.appendChild(this._frameSelectionChartSection.element);
}
- var statusBarElement = this._statusBarElement = document.createElement("div");
- statusBarElement.classList.add(WebInspector.TimelineSidebarPanel.StatusBarStyleClass);
- this.element.insertBefore(statusBarElement, this.element.firstChild);
+ this._toggleRecordingShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Space, this._toggleRecordingOnSpacebar.bind(this));
+ this._toggleRecordingShortcut.implicitlyPreventsDefault = false;
+ this._toggleRecordingShortcut.disabled = true;
- this._recordGlyphElement = document.createElement("div");
- this._recordGlyphElement.className = WebInspector.TimelineSidebarPanel.RecordGlyphStyleClass;
- this._recordGlyphElement.title = WebInspector.UIString("Click or press the spacebar to record.")
- this._recordGlyphElement.addEventListener("mouseover", this._recordGlyphMousedOver.bind(this));
- this._recordGlyphElement.addEventListener("mouseout", this._recordGlyphMousedOut.bind(this));
- this._recordGlyphElement.addEventListener("click", this._recordGlyphClicked.bind(this));
- statusBarElement.appendChild(this._recordGlyphElement);
+ this._toggleNewRecordingShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Space, this._toggleNewRecordingOnSpacebar.bind(this));
+ this._toggleNewRecordingShortcut.implicitlyPreventsDefault = false;
+ this._toggleNewRecordingShortcut.disabled = true;
- this._recordStatusElement = document.createElement("div");
- this._recordStatusElement.className = WebInspector.TimelineSidebarPanel.RecordStatusStyleClass;
- statusBarElement.appendChild(this._recordStatusElement);
+ this._recordingNavigationBar = new WebInspector.NavigationBar;
+ this.element.insertBefore(this._recordingNavigationBar.element, this.element.firstChild);
+ let toolTip = WebInspector.UIString("Start recording (%s)\nCreate new recording (%s)").format(this._toggleRecordingShortcut.displayName, this._toggleNewRecordingShortcut.displayName);
+ let altToolTip = WebInspector.UIString("Stop recording (%s)").format(this._toggleRecordingShortcut.displayName);
+
+ this._recordButton = new WebInspector.ToggleButtonNavigationItem("record-start-stop", toolTip, altToolTip, "Images/Record.svg", "Images/Stop.svg", 13, 13);
+ this._recordButton.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._recordButtonClicked, this);
+ this._recordButton.element.addEventListener("mouseover", this._recordButtonMousedOver.bind(this));
+ this._recordButton.element.addEventListener("mouseout", this._recordButtonMousedOut.bind(this));
+ this._recordingNavigationBar.addNavigationItem(this._recordButton);
+
+ this._recordingStatusItem = new WebInspector.FlexibleSpaceNavigationItem;
+ this._recordingNavigationBar.addNavigationItem(this._recordingStatusItem);
+
WebInspector.showReplayInterfaceSetting.addEventListener(WebInspector.Setting.Event.Changed, this._updateReplayInterfaceVisibility, this);
// We always create a replay navigation bar; its visibility is controlled by WebInspector.showReplayInterfaceSetting.
this._replayNavigationBar = new WebInspector.NavigationBar;
this.element.appendChild(this._replayNavigationBar.element);
- var toolTip = WebInspector.UIString("Begin Capturing");
- var altToolTip = WebInspector.UIString("End Capturing");
+ toolTip = WebInspector.UIString("Begin Capturing");
+ altToolTip = WebInspector.UIString("End Capturing");
this._replayCaptureButtonItem = new WebInspector.ActivateButtonNavigationItem("replay-capture", toolTip, altToolTip, "Images/Circle.svg", 16, 16);
this._replayCaptureButtonItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._replayCaptureButtonClicked, this);
this._replayCaptureButtonItem.enabled = true;
@@ -154,7 +161,7 @@
WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStarted, this._captureStarted, this);
WebInspector.replayManager.addEventListener(WebInspector.ReplayManager.Event.CaptureStopped, this._captureStopped, this);
- this._statusBarElement._oncontextmenu_ = this._contextMenuNavigationBarOrStatusBar.bind(this);
+ this._recordingNavigationBar.element._oncontextmenu_ = this._contextMenuNavigationBarOrStatusBar.bind(this);
this._replayNavigationBar.element._oncontextmenu_ = this._contextMenuNavigationBarOrStatusBar.bind(this);
this._updateReplayInterfaceVisibility();
@@ -162,8 +169,8 @@
WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingLoaded, this._recordingLoaded, this);
this.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
- WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStarted, this);
- WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStopped, this);
+ WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStarted, this._capturingStartedOrStopped, this);
+ WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.CapturingStopped, this._capturingStartedOrStopped, this);
for (var recording of WebInspector.timelineManager.recordings)
this._addRecording(recording);
@@ -172,14 +179,6 @@
if (WebInspector.timelineManager.activeRecording)
this._recordingLoaded();
-
- this._toggleRecordingShortcut = new WebInspector.KeyboardShortcut(null, WebInspector.KeyboardShortcut.Key.Space, this._toggleRecordingOnSpacebar.bind(this));
- this._toggleRecordingShortcut.implicitlyPreventsDefault = false;
- this._toggleRecordingShortcut.disabled = true;
-
- this._toggleNewRecordingShortcut = new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.Shift, WebInspector.KeyboardShortcut.Key.Space, this._toggleNewRecordingOnSpacebar.bind(this));
- this._toggleNewRecordingShortcut.implicitlyPreventsDefault = false;
- this._toggleNewRecordingShortcut.disabled = true;
}
// Public
@@ -552,14 +551,10 @@
{
if (WebInspector.timelineManager.isCapturing()) {
WebInspector.timelineManager.stopCapturing();
-
- this._recordGlyphElement.title = WebInspector.UIString("Click or press the spacebar to record.")
} else {
WebInspector.timelineManager.startCapturing(shouldCreateRecording);
// Show the timeline to which events will be appended.
this._recordingLoaded();
-
- this._recordGlyphElement.title = WebInspector.UIString("Click or press the spacebar to stop recording.")
}
}
@@ -635,18 +630,12 @@
this._refreshFrameSelectionChart();
}
- _capturingStarted(event)
+ _capturingStartedOrStopped(event)
{
- this._recordStatusElement.textContent = WebInspector.UIString("Recording");
- this._recordGlyphElement.classList.add(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass);
+ let isCapturing = WebInspector.timelineManager.isCapturing();
+ this._updateRecordButton(isCapturing);
}
- _capturingStopped(event)
- {
- this._recordStatusElement.textContent = "";
- this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass);
- }
-
_recordingCreated(event)
{
this._addRecording(event.data.recording)
@@ -844,32 +833,34 @@
this.contentView.element.style.top = (overviewHeight + contentElementOffset) + "px";
}
- _recordGlyphMousedOver(event)
+ _recordButtonClicked(event)
{
- this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+ let isCapturing = !WebInspector.timelineManager.isCapturing();
+ this._updateRecordButton(isCapturing);
+ this._toggleRecording(event.shiftKey);
+ }
+
+ _recordButtonMousedOver(event)
+ {
if (WebInspector.timelineManager.isCapturing())
- this._recordStatusElement.textContent = WebInspector.UIString("Stop Recording");
+ this._recordingStatusItem.element.textContent = WebInspector.UIString("Stop Recording");
else
- this._recordStatusElement.textContent = WebInspector.UIString("Start Recording");
+ this._recordingStatusItem.element.textContent = WebInspector.UIString("Start Recording");
}
- _recordGlyphMousedOut(event)
+ _recordButtonMousedOut(event)
{
- this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
if (WebInspector.timelineManager.isCapturing())
- this._recordStatusElement.textContent = WebInspector.UIString("Recording");
+ this._recordingStatusItem.element.textContent = WebInspector.UIString("Recording");
else
- this._recordStatusElement.textContent = "";
+ this._recordingStatusItem.element.textContent = "";
}
- _recordGlyphClicked(event)
+ _updateRecordButton(isCapturing)
{
- // Add forced class to prevent the glyph from showing a confusing status after click.
- this._recordGlyphElement.classList.add(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
-
- this._toggleRecording(event.shiftKey);
+ this._recordingStatusItem.element.textContent = isCapturing ? WebInspector.UIString("Recording") : "";
+ this._recordButton.toggled = isCapturing;
}
_viewModeSelected(event)
@@ -995,7 +986,7 @@
{
var shouldShowReplayInterface = !!(window.ReplayAgent && WebInspector.showReplayInterfaceSetting.value);
- this._statusBarElement.classList.toggle(WebInspector.TimelineSidebarPanel.HiddenStyleClassName, shouldShowReplayInterface);
+ this._recordingNavigationBar.element.classList.toggle(WebInspector.TimelineSidebarPanel.HiddenStyleClassName, shouldShowReplayInterface);
this._replayNavigationBar.element.classList.toggle(WebInspector.TimelineSidebarPanel.HiddenStyleClassName, !shouldShowReplayInterface);
}
@@ -1068,11 +1059,6 @@
};
WebInspector.TimelineSidebarPanel.HiddenStyleClassName = "hidden";
-WebInspector.TimelineSidebarPanel.StatusBarStyleClass = "status-bar";
-WebInspector.TimelineSidebarPanel.RecordGlyphStyleClass = "record-glyph";
-WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass = "recording";
-WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass = "forced";
-WebInspector.TimelineSidebarPanel.RecordStatusStyleClass = "record-status";
WebInspector.TimelineSidebarPanel.TitleBarStyleClass = "title-bar";
WebInspector.TimelineSidebarPanel.TitleBarTextStyleClass = "title-bar-text";
WebInspector.TimelineSidebarPanel.TitleBarScopeBarStyleClass = "title-bar-scope-bar";
