This CL turns on the use_theme_colors stylelint rule which enforces that
any colors use variables defined in our codebase.
There are many, many violations, unsurprisingly (about 1500), so for now
I have disabled every single violation. The goal of the dark mode
migration will be in part to remove all violations of this rule.
Additionally, new code going forwards should adhere to the rule and not
add the comment to disable the warning.
Bug: 1152736
Change-Id: I51372724ea51485daef3d4f75b7d3f60a7c8016f
No-Presubmit: true
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2671323
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
The recent fixes done in the Elements pane to force a horizontal
scrollbar when there isn't enough space have introduced a regression
whereby when hovering over nodes in the Elements tree, a scrollbar can
sometimes appear, and disappear as soon as you stop hovering.
Those recent fixes are:
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2393465/https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366972/
The reason the jumpy scrollbar occurs is that when a node is hovered,
instead of having its normal 12px padding left (to indent it compared to
its parent node), it gets a 5px padding left + 1px border + 6px margin.
This is so that expanded nodes can have a left border to easily see how
far down the go in the tree.
Moving from a padding to a combination of padding, margin and border
messes with how the width is calculated. And because of my previous
changes to the Elements pane, it forced a scrollbar to appear where it
should not.
My fix here is to always keep the 12px padding, and instead of using a
border to draw the indentation line, we now use a linear-gradient.
The advantage is that it doesn't mess with the width of the element.
Before: https://imgur.com/qDtSrug.gif
After: https://imgur.com/Mjl1vMz.gif
Bug: 1128873
Change-Id: Ie6952f4631e7f5842578fbe4429b66b2f3dc9111
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2414748
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
In this recent CL: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366972/
I made a change so that the Elements pane would scroll horizontally when
it became too narrow to accomodate the displayed nodes (instead of
forcing them to wrap as veyr narrow columns of characters).
This is a follow-up fix to this change.
I realized that when the pane was scrolled to the right, then hovering
over nodes would not display the usual hovered background color or
highlight the corresponding node in the page.
The first part of the fix was to make sure long attributes could break
anywhere they needed. This is useful since a lot of pages have <a>
or <script> nodes that have very long url attributes.
The second part was making the nodes inline-block display so they could
naturally expand the whole width of the scrollable container instead of
being constrained to 100% (which does not covers the overflow area).
Before: https://imgur.com/O6ya2Td.gif
After: https://imgur.com/U4sWMhj.gif
Bug: 880265
Change-Id: I4a4900052e25839f015e4fee3d20be500d8a0de4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2393465
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
The Elements tree does not scroll horizontally for now.
In most cases, it's good, because some nodes tend to be quite long, and
it's better to have them wrap on multiple lines so you can still see
everything at once without constantly scrolling left and right (which,
depending on the mouse/trackpad device you use, can be difficult).
However, we often run in cases where the lack of horizontal scrollbar is
a problem:
- long attribute values, such as urls wrap in places where it doesn't
make much sense and are harder to read
- more importantly: some web pages have deeply nested DOM trees, so much
that after a point, the nodes have so much left indentation that they
have no space left to the right to display any content. So you can be in
situations where a node is displayed 1 character at a time, over many
lines. Or even worse, certain nodes are not visible anymore.
This change removes the overflow-x:hidden CSS property so the Elements
panel can scroll if needed.
The change still retains the nodes' abilities to wrap (using
word-break: normal; make them wrap at word boundaries only) so in a lot
of cases, nothing will change for users.
However, this also introduces a minimum width for every node in the tree
which will force the horizontal scrollbar to appear after a point, and
will make sure each node has at least that much horizontal space to
display content.
Before/after example screenshot: https://imgur.com/MPO04CU.jpg
Bug: 880265
Change-Id: Ia3bfc1476868ce31ab8ac2f0d8adc59c61894d90
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2366972
Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
:focus-visible is basically the exact same functionality as the custom
data-keyboard-focus attribute that devtools maintains. This CL converts
all of our uses of data-keyboard-focus in CSS to use :focus-visible.
This has no intended behaviour change although it's possible there are
small differences in our implementation vs. the web platform one, so
this might cause some regression with focus styles for keyboard
interaction.
I tested a few of these manually to verify they still do the same thing.
The CSS linter was unhappy about the ordering of some rules due to
specificity-ordering checks, so there is some re-ordering too.
A follow-up CL will remove our implementation of data-keyboard-focus.
Change-Id: Ifc273f7d82e16ea07e24ed2d1faa6f794a12501d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2352236
Commit-Queue: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Kalon Hinds <kahinds@microsoft.com>
Reviewed-by: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
This patch drops unnecessary -webkit- prefixes in CSS and enables
a lint check to enforce that prevent such properties from being
added in the future. Note that the use of vendor-prefixed CSS
properties is still accepted in cases where there is no standardized
and browser-supported alternative.
Bug: chromium:1104187
Change-Id: I29ae93d5a760c4f5037f20663754f448b5083235
Fixed: chromium:1031475
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2297386
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
My previous CL for the CSS style fix-it dropped a CSS rule. This adds
it back.
Drive-by: Allow custom types to appear in style sheets if the custom
type starts with devtools-, and use ".-theme-preserve" (as a class
name) in the selector for dark mode.
Fixed: chromium:1101680
Bug: chromium:1083142
Change-Id: I4deef5885ce3365f8116631875d7b0212840b012
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2278470
Commit-Queue: Yang Guo <yangguo@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Auto-Submit: Sigurd Schneider <sigurds@chromium.org>
Update the DOM tree panel by fixing missing expanded glyph, removed the
borders, set by the system. The borders should only be visible,
when elements are hovered or selected.
Made sure all the panels, Style, Computed, Event Listeners,
DOM Breakpoints, Properties, and Accessibility, have a hover state,
if there is one, in Default mode. Otherwise, all panels
should be navigable, with keyboard.
Before: https://imgur.com/a/XaXWvFW
After: https://imgur.com/a/1lBV1Br
Update:1
Addressed comments to move styles to a central location,
removed unnecessary use of forced-colors and !important
and unused rule sets.
Update:2
Address change to use border color, more refactoring work
to remove unnecessary !important, more work on centralizing
styles
Bug: 1048378
Change-Id: I6942eb46d6c741fdea3f062ac61ead7c6e9d1bbc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2007930
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
We currently hard-code the line-height to 15px. The default font-size is
11px, which means it's a line-height of 1.36. By changing it to be
numeric value we can account for different font-sizes being set via
Chrome's settings.
Bug: 880612
Change-Id: I0fe7aefd04b9c4d4f68c81b5713213d901efbf0d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1787607
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@google.com>
Cr-Original-Commit-Position: refs/heads/master@{#696796}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d8e167268d480246a437657e4a123db9b15c6517
- Replace usage of 'title' in the DOMLinkifier and AuditsReportRenderer
with 'tooltip'. This was a bug introduced during the initial DOMLinkifier
refactor, see: https://crrev.com/a74a3fc0
- Refactor to pass the options into the Elements.DOMLinkifier.linkifyNodeReference
instead of just the tooltip text, making it easier to extend and
following the options config pattern.
- DOM linkified nodes by default can take keyboard
focus by giving them a tab index and link activation on 'Enter' key.
- The nodes are also given the role of link for screen reader identification.
- API consumers can-opt out of keyboard focus by providing the option
{preventKeyboardFocus: true}; this is useful if link navigation is
handled by a context menu.
- Audits report nodes opt-in to keyboard focus.
- Performance event log nodes opt-in to keyboard focus.
- The following views are set to opt-out of keyboard focus to match their
existing behavior as a migration strategy; these views can opt-in gradually:
- AccessibilityNodeView
- StylesSidebarPane
This meets the following WCAG success criteria
1.3.1 Info and Relationships https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships
2.1.1 Keyboard https://www.w3.org/WAI/WCAG21/quickref/#keyboard
4.1.2 Name, Role, Value https://www.w3.org/WAI/WCAG21/quickref/#name-role-value
Screenshot (Audits tooltip): https://i.imgur.com/zgQUHC3.png
Screenshot (Audits Light Theme): https://i.imgur.com/2eB7pJ4.png
Screenshot (Audits Dark Theme): https://i.imgur.com/VfEFbAF.png
Screenshot (Performance Event Log): https://i.imgur.com/f9YcbC5.png
of the accessibility audit details to view a linkified node.
Test: Create an empty .html file, host it and run an accessibility audit, expand any
Bug: 963183
Change-Id: Ibc3acd4eccf03f408087248b1389d0dd807d9443
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1750153
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: Jeff Fisher <jeffish@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#691276}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: c4f6092e42657a3b4544d70223b507fd39a4fd31
Accessibility testing revealed the following issues within the tool:
1. no focus indicator on javascript VM instances list
This change:
changes current selected/hover and adds selected but inactive color to match treeoutline in Element
Bug: 963183
Workflow gif: https://imgur.com/a/lHNTOP7
Change-Id: Iaed79d7166bf70011711be548ba66c65a57922da
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1678946
Commit-Queue: Junyi Xiao <juxiao@microsoft.com>
Reviewed-by: Alexei Filippov <alph@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#690483}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 522709bc5b3158fdaef516f391d382d7321e505f
Holding ArrowUp/Down to quickly navigate the Elements tree can cause
a 5+ sec freeze in DT UI, with LayoutNG.
This CL avoids the slowdown, primarily caused by proliferous
re-layouts when adding/removing the 'selected' class.
Bug: 980399
Change-Id: I5459a4a7571843cd9e7072b6ff0c9e36ce19e10e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1702746
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#677513}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: a54c956bf3e164c7ee168474ecea07b4f3064ea5
Introduces a common interface between ElementsTreeOutlines and
ObjectPropertiesSections. This allows both to be keyboard navigable
in Console.
Bug: 865674
Change-Id: I405d161692147374827918cce2369d129620a9fd
Reviewed-on: https://chromium-review.googlesource.com/c/1275225
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#604855}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: de8a9c26f6a4e28bc14e613e0d97cae69aef749b
This CL
- Changes _messagesClicked's useCapture: true > false.
- Hides gutter on Elements rendered outside ElementsTreeOutline.
This affects two cases:
A) Group with expandable objects (e.g. `console.group({x: 1})`),
user clicks on the object.
Now, clicking an object only expands the object, not the group.
B) Element logged in Console (e.g. `document.body`),
user clicks on "expand triangle", which overlaps with its gutter.
Now that _messagesClicked does not capture, context menu would show
upon clicking the gutter. This CL hides the gutter to allow
expanding Elements in Console.
Bug: 876162
Change-Id: I259f7f305d5ab975a4e8313d9200ff81d13eb9ec
Reviewed-on: https://chromium-review.googlesource.com/1198422
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#592574}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: b420ade8c887d6f9acd7be0d4f0b14c6553ac743
Jack Franklin
