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 0d88cbb6fd Ban named-colors in our CSS
Used
https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/ as
the reference and did a bunch of find and replaces. Should be no visible
changes; have checked by running DevTools locally and looking for
anything that looks off.

Note that system colors (e.g. HighlightText) are still permitted.

Fixed: chromium:1171775
Bug: chromium:1104187
Change-Id: I99c281886822deb5a5292ac8691a4f2f9e026428
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2656243
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2021-02-01 09:33:45 +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
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
Jecelyn Yeen 3e7c564086 Fix stylelint-config-standard in issues ui/softContextMenu.css
Bug: 1083142
Change-Id: I866b2389fcf6de5e782c9e24e80a5627f3ab8081
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2279521
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Jecelyn Yeen‎ <jec@chromium.org>
Commit-Queue: Jecelyn Yeen‎ <jec@chromium.org>
2020-07-03 05:31:55 +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
Peter Marshall 08dd1a3ca3 [ui] Fix dropdown menu sizing with large fonts
The line-height was set explicitly, expecting a certain size font.
Now the divs will expand to fit the font size, and the outer container
will expand to fit the inner divs.

This gets rid of the unnecessary scrollbar that appears on Windows.

After: https://imgur.com/etAnkeh

Fixed: 955996
Bug: 1066415
Change-Id: Ied60248b58dd765d10fb56ce2293752219e2110e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2144103
Commit-Queue: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
2020-04-09 15:19:30 +00:00
Kham Udom 0bf716dac1 High contrast for Sources navigator panel and filter widget
The patch fixes the navigator tree and the filter list widget, adding
hover and focus color values. There are also small fixes to the soft
context menu, the tab over flow button and change the text prompt
foreground color to be the disabled color.

update:
Add transparent border to set border color for high contrast


Before: https://imgur.com/a/UvVdlCM
After: https://imgur.com/a/mMXrlLs

Bug: 1048378
Change-Id: Ib775144f6a798ccaabc7ac9d3083eb01c9250c3d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2055896
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-02-14 17:08:13 +00:00
Pavel Feldman 70a90c0ca4 DevTools: clean up the -theme-selection markup in the css.
All these rule definitions operate CSS variables now.

Bug: 935286
Change-Id: I9cdd4883e0c07e1040da06af8db3ef36f64ebc02
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1562893
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Pavel Feldman <pfeldman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#649770}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: f8764798ff0e0e0f41052ed0a70637102a499801
2019-04-11 03:53:58 +00:00
Joel Einbinder 9a6bead8e8 DevTools: New look for SoftContextMenus
Previously, mac-style context menus were used everywhere that we could
not use a native context menu. With this patch, there are now three
context menus:

A standard context menu for windows/linux.
The old style context menus for mac.
A dark theme context menu, which is used in place of native menus
on all platforms.

https://i.imgur.com/DRDp1E2.png

Change-Id: Ic3be0e7ac1661ef1eaeecdc473bdef7dc015314b
Reviewed-on: https://chromium-review.googlesource.com/1161282
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#580917}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 3332260e47694a79ad07eacac2dd4c39d6e61795
2018-08-06 18:02:35 +00:00
Erik Luo 497cc55e5a DevTools: force arrows in SoftContextMenu to be white
Screenshot: https://imgur.com/a/cN62iYX

Bug: 825535
Change-Id: If5ddf68061430539e9a2e69194bb58071bff3bdc
Reviewed-on: https://chromium-review.googlesource.com/1112844
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#570218}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 7bff7b347b28cf5205d84abbc1a6d2a69af5e78b
2018-06-25 23:05:29 +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