WebKit Bugzilla
Attachment 358628 Details for
Bug 193249
: Web Inspector: Event breakpoints: text field and completion popover fonts should match
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-193249-20190108142235.patch (text/plain), 4.52 KB, created by
Devin Rousso
on 2019-01-08 13:22:37 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Devin Rousso
Created:
2019-01-08 13:22:37 PST
Size:
4.52 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index a74d140966ebdff1ee88a5ba5c631a085afdcd98..13e469af56fd62ee3f50dbacf343a7d8635b0285 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,23 @@ >+2019-01-08 Devin Rousso <drousso@apple.com> >+ >+ Web Inspector: Event breakpoints: text field and completion popover fonts should match >+ https://bugs.webkit.org/show_bug.cgi?id=193249 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * 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-07 Devin Rousso <drousso@apple.com> > > Web Inspector: Audit: run arrow shouldn't be visible when running tests >diff --git a/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js >index 30cc228e6f625ce770324fcfbdb83a98e076ff1b..2732eba4f4b73a64fab9d69ebe44b2002b67b9f1 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js >+++ b/Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js >@@ -36,6 +36,7 @@ WI.CompletionSuggestionsView = class CompletionSuggestionsView extends WI.Object > this._anchorBounds = 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"); >diff --git a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css >index 4a42ece745c919e2420b74f4a08e49db8d84e360..a5bc03767a933f51c183aa0763541f25fe03eea8 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css >+++ b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.css >@@ -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; >+} >diff --git a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js >index c38ba0a9d90b8c80e8a79d10487bf6fcd65f0671..8a018c13115a0221c7e5840dd3d15011d0deae63 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js >+++ b/Source/WebInspectorUI/UserInterface/Views/EventBreakpointPopover.js >@@ -82,6 +82,7 @@ WI.EventBreakpointPopover = class EventBreakpointPopover extends WI.Popover > 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 @@ WI.EventBreakpointPopover = class EventBreakpointPopover extends WI.Popover > > _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); > } > };
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 193249
:
358620
| 358628