Commit Graph
14 Commits
Author SHA1 Message Date
Jack Franklin 49a9481a74 Lint color usage in background and border-* properties.
The list of CSS properties we check for colors wasn't thorough and
didn't include `border-left/right/top/bottom` or `background` on its
own. This CL fixes that and disables the rule for any current
violations.

Bug: 1152736
Change-Id: Ic732d653fdfab0462a04dc891bcece1f44e5d471
No-Presubmit: true
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2676157
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
2021-02-05 15:39:39 +00:00
Jack Franklin 8064d3ba7a Lint against non-theme-color variables
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>
2021-02-03 11:02:09 +00:00
Jack Franklin fd9dfaa5e7 [Dark mode] replace #fff background-color
This CL searches for CSS that matches:

- background: #fff
- background: #ffffff
- background: #white
- background-color: #fff
- background-color: #ffffff
- background-color: #white

And replaces the declaration with var(--color-background) from the new
set of color variables.

Bug: 1152736
Change-Id: Ia0575ccfa4e23c92fd4f83e6c911236dbb893fea
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2577559
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2021-01-11 16:18:06 +00:00
Wolfgang Beyer 2d976f379e Remove "blackbox" - refactor CallStackSidebarPane
This patch replaces unwelcoming language with better terms.

Bug: 1152082
Design doc: http://doc/1UnwKLgjYPDsLsYCBh9LKiaPN6Aq2XLKvt4Ak3FT7J3k

Change-Id: Iffd7fd0a354562f1428cde6070f8c1dbe795f792
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2593138
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
2020-12-16 16:38:04 +00:00
Peter Marshall 9a3d85fa0b css: Use :focus-visible instead of our custom data-keyboard-focus
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>
2020-08-24 07:58:42 +00:00
Alex Rudenko 74414d30a4 Fix stylelint-config-standard issues in sources/callStackSidebarPane.css
Bug: chromium:1083142
Change-Id: I5133bab6d3954532ace2275b822eaf8f4a2a7fa0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2282505
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-07-06 13:44:41 +00:00
Mathias Bynens ca9fa2d73f Consistently format CSS color and opacity values
- Prefer the modern comma-free CSS color function syntax over the
  legacy syntax. [1]
- Explicitly use the `deg` suffix for angle values in colors, to
  clarify the range.
- Explicitly use the `%` suffix for percentages instead of formatting
  the value as a number, again to clarify the range.

[1]: https://twitter.com/mathias/status/1253242715304857601
[2]: https://goo.gle/devtools-css-color

Bug: chromium:1083142
Fixed: chromium:1073885
Change-Id: I8e1582a2dee3553a61df88564051ea84c2011d76
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2209091
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Mathias Bynens <mathias@chromium.org>
2020-05-19 16:50:26 +00:00
Mathias Bynens b0c1f4bce2 Fix stylelint-config-standard violations
Bug: chromium:1083142
Change-Id: I5ea4cc5d0f83e52856383ba37a47472e33eb19a2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2204113
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Auto-Submit: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
2020-05-15 17:05:27 +00:00
Kham Udom e991071f67 High contrast work on Sources debugger panel
The changes fixes the hover and and keyboard focus on the panel. The
header gets a focus ring and when hovering or focusing the content
item, the background and foreground changes.

Before: https://imgur.com/a/gZD8xLg
After: https://imgur.com/a/LVruJ6P

Bug: 1048378
Change-Id: If697639f8a5b7d73844e1aab63c9bb2db884b295
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2055546
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-02-14 16:06:43 +00:00
Jack Lynch 7cd600f9d2 Reland: Make call stack keyboard navigable
This is a reland of https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1880515,
which was reverted at https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1961190
due to test failures that do not repro or appear to be related.

This PR makes the call stack sidebar pane in the Sources panel more
accessible by:
  - enabling keyboard navigation of the call frame list by managing call
  frame selection outside of ListControl as suggested by Joel in [2]
  - adding the aria-disabled attribute to unselectable call frames
  - adding an aria description to blackboxed call frames

This will break several web tests, so [3] must be merged first to
disable them.
Originally reviewed in [1], where the web test fixes for this CL now
live.

Video showing navigation: https://i.imgur.com/55tJy2k.mp4

[1] https://chromium-review.googlesource.com/c/chromium/src/+/1715121
[2] https://chromium-review.googlesource.com/c/chromium/src/+/1690089/11#message-3e9e158cce4628b01398d9cf84e37550b55b14c6
[3] https://chromium-review.googlesource.com/c/chromium/src/+/1893117

Bug: 963183
Change-Id: I826e1c5c2f78c235823a71c956fde6ef73bcccac
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1965855
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
2020-01-13 23:13:35 +00:00
Simon Zünd 36acd549ae Revert "Make call stack keyboard navigable"
This reverts commit 4c4f65cb9d.

Reason for revert: Suspected to causes layout tests to fail. Found via
a local bisect of the first failing roll CL: https://crrev.com/c/1961233
Example failure: https://ci.chromium.org/p/chromium/builders/try/linux-rel/264054 

Original change's description:
> Make call stack keyboard navigable
> 
> This PR makes the call stack sidebar pane in the Sources panel more
> accessible by:
>   - enabling keyboard navigation of the call frame list by managing call
>   frame selection outside of ListControl as suggested by Joel in [2]
>   - adding the aria-disabled attribute to unselectable call frames
>   - adding an aria description to blackboxed call frames
> 
> This will break several web tests, so [3] must be merged first to
> disable them.
> Originally reviewed in [1], where the web test fixes for this CL now
> live.
> 
> 
> Video showing navigation: https://i.imgur.com/55tJy2k.mp4
> 
> [1] https://chromium-review.googlesource.com/c/chromium/src/+/1715121
> [2] https://chromium-review.googlesource.com/c/chromium/src/+/1690089/11#message-3e9e158cce4628b01398d9cf84e37550b55b14c6
> [3] https://chromium-review.googlesource.com/c/chromium/src/+/1893117
> 
> Change-Id: I4b3f56fc300a2cd381798650c61afd1062430e57
> Bug: 963183
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1880515
> Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
> Commit-Queue: Jack Lynch <jalyn@microsoft.com>

TBR=lomitch@microsoft.com,jalyn@microsoft.com

Change-Id: I3698f0eea8bcc00a092ce47eccb2d649169b8a32
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 963183
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1961190
Reviewed-by: Simon Zünd <szuend@chromium.org>
Commit-Queue: Simon Zünd <szuend@chromium.org>
2019-12-11 09:02:14 +00:00
Jack Lynch 4c4f65cb9d Make call stack keyboard navigable
This PR makes the call stack sidebar pane in the Sources panel more
accessible by:
  - enabling keyboard navigation of the call frame list by managing call
  frame selection outside of ListControl as suggested by Joel in [2]
  - adding the aria-disabled attribute to unselectable call frames
  - adding an aria description to blackboxed call frames

This will break several web tests, so [3] must be merged first to
disable them.
Originally reviewed in [1], where the web test fixes for this CL now
live.


Video showing navigation: https://i.imgur.com/55tJy2k.mp4

[1] https://chromium-review.googlesource.com/c/chromium/src/+/1715121
[2] https://chromium-review.googlesource.com/c/chromium/src/+/1690089/11#message-3e9e158cce4628b01398d9cf84e37550b55b14c6
[3] https://chromium-review.googlesource.com/c/chromium/src/+/1893117

Change-Id: I4b3f56fc300a2cd381798650c61afd1062430e57
Bug: 963183
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1880515
Reviewed-by: Lorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
2019-12-10 23:50:30 +00:00
Paul Irish 25e30d83df DevTools: Improved dark mode colors for blackboxing msg
Change-Id: If3ca6a8deb29680e213e151ab7aa91ddec1c19e3
Reviewed-on: https://chromium-review.googlesource.com/1144449
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Commit-Queue: Paul Irish <paulirish@chromium.org>
Commit-Queue: Aleksey Kozyatinskiy <kozyatinskiy@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#576743}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: e216c1974f9883e4408b65ac518976440f9d25fd
2018-07-20 01:08:05 +00:00
Blink Reformat 4c46d0969f The Great Blink mv for source files, part 2.
Move and rename files.

NOAUTOREVERT=true
NOPRESUBMIT=true
NOTREECHECKS=true
Bug: 768828
TBR=darin@chromium.org
NOTRY=true

Change-Id: I66d3b155808bc5bdbf237b80208e1e552bcf7f28
Reviewed-on: https://chromium-review.googlesource.com/1001153
Reviewed-by: Blink Reformat <blink-reformat@chromium.org>
Commit-Queue: Blink Reformat <blink-reformat@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#549061}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 0aee4434a4dba42a42abaea9bfbc0cd196a63bc1
2018-04-07 15:32:37 +00:00