Title: [239953] trunk/Source/WebInspectorUI
- Revision
- 239953
- Author
- [email protected]
- Date
- 2019-01-14 14:52:31 -0800 (Mon, 14 Jan 2019)
Log Message
Web Inspector: Event breakpoints: text field and completion popover fonts should match
https://bugs.webkit.org/show_bug.cgi?id=193249
Reviewed by Matt Baker.
* UserInterface/Views/EventBreakpointPopover.css:
(.popover .event-breakpoint-content > .event-type > input): Added.
(.popover .event-breakpoint-content > .event-type > input::placeholder): Added.
* UserInterface/Views/EventBreakpointPopover.js:
(WI.EventBreakpointPopover.prototype.show):
(WI.EventBreakpointPopover.prototype._showSuggestionsView):
Subtract the <input> border and padding from the bounds position so the <input> text lines
up with the `WI.CompletionSuggestionsView` text.
* UserInterface/Views/CompletionSuggestionsView.js:
(WI.CompletionSuggestionsView):
Drive-by: force `dir=ltr` to match the `text-align: left;` CSS styling.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (239952 => 239953)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-01-14 22:51:56 UTC (rev 239952)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-01-14 22:52:31 UTC (rev 239953)
@@ -1,3 +1,23 @@
+2019-01-14 Devin Rousso <[email protected]>
+
+ Web Inspector: Event breakpoints: text field and completion popover fonts should match
+ https://bugs.webkit.org/show_bug.cgi?id=193249
+
+ Reviewed by Matt Baker.
+
+ * UserInterface/Views/EventBreakpointPopover.css:
+ (.popover .event-breakpoint-content > .event-type > input): Added.
+ (.popover .event-breakpoint-content > .event-type > input::placeholder): Added.
+ * UserInterface/Views/EventBreakpointPopover.js:
+ (WI.EventBreakpointPopover.prototype.show):
+ (WI.EventBreakpointPopover.prototype._showSuggestionsView):
+ Subtract the <input> border and padding from the bounds position so the <input> text lines
+ up with the `WI.CompletionSuggestionsView` text.
+
+ * UserInterface/Views/CompletionSuggestionsView.js:
+ (WI.CompletionSuggestionsView):
+ Drive-by: force `dir=ltr` to match the `text-align: left;` CSS styling.
+
2019-01-14 Nikita Vasilyev <[email protected]>
Web Inspector: Styles: pressing Down key on empty value field shouldn't discard completion popover
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js (239952 => 239953)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js 2019-01-14 22:51:56 UTC (rev 239952)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js 2019-01-14 22:52:31 UTC (rev 239953)
@@ -36,6 +36,7 @@
this._moveIntervalIdentifier = null;
this._element = document.createElement("div");
+ this._element.setAttribute("dir", "ltr");
this._element.classList.add("completion-suggestions", WI.Popover.IgnoreAutoDismissClassName);
this._containerElement = document.createElement("div");
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css (239952 => 239953)
--- trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css 2019-01-14 22:51:56 UTC (rev 239952)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css 2019-01-14 22:52:31 UTC (rev 239953)
@@ -32,3 +32,12 @@
display: flex;
margin-top: 4px;
}
+
+.popover .event-breakpoint-content > .event-type > input {
+ font-family: Menlo, monospace;
+ text-align: left;
+}
+
+.popover .event-breakpoint-content > .event-type > input::placeholder {
+ font-family: system-ui;
+}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js (239952 => 239953)
--- trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js 2019-01-14 22:51:56 UTC (rev 239952)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js 2019-01-14 22:52:31 UTC (rev 239953)
@@ -82,6 +82,7 @@
this._typeSelectElement.hidden = true;
this._domEventNameInputElement = typeContainer.appendChild(document.createElement("input"));
+ this._domEventNameInputElement.setAttribute("dir", "ltr");
this._domEventNameInputElement.placeholder = WI.UIString("Example: \u201C%s\u201D").format("click");
this._domEventNameInputElement.spellcheck = false;
this._domEventNameInputElement.addEventListener("keydown", (event) => {
@@ -190,6 +191,12 @@
_showSuggestionsView()
{
- this._suggestionsView.show(WI.Rect.rectFromClientRect(this._domEventNameInputElement.getBoundingClientRect()));
+ let computedStyle = window.getComputedStyle(this._domEventNameInputElement);
+ let padding = parseInt(computedStyle.borderLeftWidth) + parseInt(computedStyle.paddingLeft);
+
+ let rect = WI.Rect.rectFromClientRect(this._domEventNameInputElement.getBoundingClientRect());
+ rect.origin.x += padding;
+ rect.size.width -= padding + parseInt(computedStyle.borderRightWidth) + parseInt(computedStyle.paddingRight);
+ this._suggestionsView.show(rect);
}
};
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
