Fix focus ring when tabbing through service worker details
Make focus ring styles consistent for 'Service Workers' in 'Applicaton
Panel'.
Before: https://i.imgur.com/CzOOlGv.mp4
After: https://i.imgur.com/3XI5OU6.mp4
Bug: chromium:1130980
Change-Id: Ifcbc3851df06416292e9e5a86df7eab9a67e5046
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2422950
Commit-Queue: Wolfgang Beyer <[email protected]>
Reviewed-by: Mathias Bynens <[email protected]>
diff --git a/front_end/resources/ServiceWorkersView.js b/front_end/resources/ServiceWorkersView.js
index b3d158d..65cdb9d 100644
--- a/front_end/resources/ServiceWorkersView.js
+++ b/front_end/resources/ServiceWorkersView.js
@@ -347,7 +347,8 @@
_createSyncNotificationField(label, initialValue, placeholder, callback) {
const form =
this._wrapWidget(this._section.appendField(label)).createChild('form', 'service-worker-editor-with-button');
- const editor = form.createChild('input', 'source-code service-worker-notification-editor');
+ const editor = UI.UIUtils.createInput('source-code service-worker-notification-editor');
+ form.appendChild(editor);
const button = UI.UIUtils.createTextButton(label);
button.type = 'submit';
form.appendChild(button);
@@ -520,7 +521,7 @@
*/
_createLink(parent, title, listener, className, useCapture) {
const button = parent.createChild('button', className);
- button.classList.add('link');
+ button.classList.add('link', 'devtools-link');
button.textContent = title;
button.tabIndex = 0;
button.addEventListener('click', listener, useCapture);
