mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 12:33:47 +08:00
Brian Cui
949ba8ebf4
This CL updates the Console and Issues counters shown in the upper right of DevTools next to the Settings gear icon to be more accessible. - The counter element has changed from a <div> to a <button> element. Previously, the counters were not tab accessible (see bug); the <button> element is tab accessible by default and makes more semantic sense as they open the Console and Issues panels. - The styling has been updated slightly to include a border and hover effect when focused to indicate interactivity. Previously, the only indication that the counters were interactive was the pointer cursor shown upon hover. - The description text (tooltip) is updated to be more clear. We have received reports from users regarding confusion around the meaning of the existing descriptions, e.g. "5 errors, 2 warnings". This text has been changed to explicitly state the interaction outcome, e.g. "Open Console to view 5 errors, 2 warnings". - General code refactors. Before: https://i.imgur.com/waQPBhH.gif After: https://i.imgur.com/zmztxvi.mp4 Bug: 1133060 Change-Id: If0cbc4f58705f3443e480498ca842d68222bc0a9 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2436646 Commit-Queue: Brian Cui <brcui@microsoft.com> Reviewed-by: Sigurd Schneider <sigurds@chromium.org> Reviewed-by: Shane Clifford <shanejc@microsoft.com> Reviewed-by: Mathias Bynens <mathias@chromium.org>
32 lines
536 B
CSS
32 lines
536 B
CSS
/*
|
|
* Copyright (c) 2015 The Chromium Authors. All rights reserved.
|
|
* Use of this source code is governed by a BSD-style license that can be
|
|
* found in the LICENSE file.
|
|
*/
|
|
|
|
:host(div:nth-child(1)) {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
background-color: #f3f3f3;
|
|
border: 1px solid #d0d0d0;
|
|
border-radius: 2px;
|
|
color: #333;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
button:hover,
|
|
button:focus-visible {
|
|
background-color: #eaeaea;
|
|
}
|
|
|
|
.counter-item {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.counter-item.counter-item-first {
|
|
margin-left: 0;
|
|
}
|