Jack Franklin
75aeca4eb9
[DarkMode] migrate CSSOverviewCompletedView
...
This CL migrates the CSSOverviewCompletedView.css file to remove any
colour patching.
I've left some colours alone:
1. The icon colours (red/green) because these work fine across both
light and dark mode.
2. The slight box shadow on the bars because again these work fine. I
suspect longer term we might want to define some default shadows for
each theme.
Bug: 1152736
Change-Id: I3959e5e01007541da91b7f91906d74df4008d972
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560251
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org >
Reviewed-by: Paul Lewis <aerotwist@chromium.org >
2020-11-30 11:03:03 +00:00
Alex Rudenko
69c377e2ad
Add APCA to CSS Overview
...
Screenshot: https://i.imgur.com/U78yQTJ.png
Bug: 1121900
Change-Id: Id55b8d2a27a44e72db056139df8df71695d08f91
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2562701
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
2020-11-30 09:28:08 +00:00
Alex Rudenko
af4d990235
Fix issues in CSS Overview
...
This CL fixes the issues outlined in the ticket:
- Resets the state when the CSS overview is closed to
prevent the elements from going missing and to synchronise the
scroll state with the selected tab.
- Sets the min-width on the contrast column elements to prevent cramping.
Fixed: 1152692
Change-Id: I66f4ad1b04bb6c64251a8c73ea645fbc125446f0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560235
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
2020-11-25 09:51:38 +00:00
Alex Rudenko
b7419b7be1
Add a button to scroll an element into view in CSS Overview
...
Screenshot: https://i.imgur.com/yj5ZTfE.png
Bug: 1120316
Change-Id: I0f04aa988d9d3c7edc5b2e7311574547e88e02fe
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2436732
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
2020-09-29 12:47:08 +00:00
Alex Rudenko
d3ba0ee3a4
Show contrast ratio and preview for each element in CSS Overview
...
Screenshot: https://i.imgur.com/QaAihyk.png
Bug: 1120316
Change-Id: Ia20d7cec004fff23213a3b8931f86d7e413e4dfd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2428335
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
2020-09-25 14:52:38 +00:00
Alex Rudenko
d55e18c512
Add Contrast Issues section to CSS Overview
...
This CL adds a new section for contrast issues to CSS Overview.
A follow-up CL will add the contrast information for particular
elements in the grid view.
Screenshot: https://i.imgur.com/8tLlJWF.png
Bug: 1120316
Change-Id: I12dcd269454a43567619c811e4107c00dc8ee654
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2421696
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Reviewed-by: Changhao Han <changhaohan@chromium.org >
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org >
2020-09-24 07:24:05 +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
Paul Lewis
b47c6e25f9
[CSS Overview] Adds icons to headings
...
Change-Id: I004c4e24bbf44dad200d99099a4b743d9455b088
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1903469
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org >
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
2019-11-07 12:22:05 +00:00
Paul Lewis
66a15fc97e
[CSS Overview] Tweaks font info styles
...
This adds striping to help differentiate between different blocks of
font information, and changes the font weights a little so that they
are slightly differentiated.
Change-Id: Ib3d6033719bbcf476b8067637e1e4ca12d8a7311
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1903468
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
2019-11-07 11:44:45 +00:00
Paul Lewis
7d10a733de
[CSS Overview] Adds font info
...
Change-Id: Ia7ed1eccd6a3440e3dbf5b1e98b887ffdaf2b574
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1901387
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
2019-11-07 11:04:05 +00:00
Paul Lewis
ed808ce4cf
[CSS Overview] Updates UI
...
Change-Id: Ifdc7645399b9a5b8dd5d13c8d4dacaf8a67fc5bd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1899518
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
2019-11-06 14:44:25 +00:00
Paul Lewis
aae7b10cff
[CSS Overview] Adds support for vertical-align
...
Change-Id: I1c8b16be97b057b705d2d31a7ed5da25ca815a46
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1890672
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
2019-10-30 16:28:56 +00:00
Paul Lewis
a3dcbf3e3a
[CSS Overview] Tidies styles; adds localized string
...
TBR=tvanderlippe@chromium.org
Change-Id: I8b7f3ecde8f05f728245fbb32421a977b48a33a6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1886822
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
2019-10-29 15:24:02 +00:00
Paul Lewis
8aef901f3f
[CSSOverview] Add unused rules
...
This is the first pass at adding unused rules to the CSS Overview.
The CL adds support for checking width & height to inline elements
as well as position values to static elements. Further CLs will
add additional checks for other cases, e.g. the use of flex or grid
values against non-flex and non-grid elements respectively.
Change-Id: I2fb4fd557d67065a5753587624195920c22b3edc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1886818
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
2019-10-29 14:36:57 +00:00
Paul Lewis
de0224ccdd
[CSS Overview] Uses snapshot; adds element highlight
...
Change-Id: If58dd20c6f4b3c8f730b39c48c14826e402018a0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1873759
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
2019-10-23 09:55:00 +00:00
Paul Lewis
ebc4719819
[DevTools] Adds media queries to CSS Overview
...
Bug: 1007284
Change-Id: I8c24adddf91da3bd621b61db6eac49233b8a1db4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1849671
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org >
Cr-Original-Commit-Position: refs/heads/master@{#704192}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 193ed603a6eaec431f9d0f339f697ab03f99c838
2019-10-09 15:06:41 +00:00
Paul Lewis
8cddf9931f
[DevTools] Adds CSS Overview Panel
...
Creates a panel that steps through the page to build statistics on CSS
used, such as colors, fonts, specificity, and other items of note.
Note: this is a DevTools experiment.
Bug: 1007284
Change-Id: Ib8d8b2af6bb65d6ff4816ca23b48b76980cd80db
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1806736
Commit-Queue: Paul Lewis <aerotwist@chromium.org >
Reviewed-by: Yang Guo <yangguo@chromium.org >
Reviewed-by: Mathias Bynens <mathias@chromium.org >
Cr-Original-Commit-Position: refs/heads/master@{#700745}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 0e4a3c81f343d15e2121280d332659778ad07323
2019-09-27 16:40:07 +00:00