Commit Graph
18 Commits
Author SHA1 Message Date
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