Commit Graph
9 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
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
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 6a142bd33f High contrast fix in Console tools panel
Fixed the hover and keyboard focus state on console Sidebar
to make sure the background is highlight color and the icons
and text are highlight text color.
Console view gets an update to fix keyboard focus. Icons, texts
and links are highlight text color when focused.
Update the drop down button and drop down menu by adding a
border and and also fix the hover state on the drop down menu items.

Before: https://imgur.com/a/SVNuGLx
After: https://imgur.com/a/0l5Edhi https://imgur.com/a/OpxsFOs

Bug: 1048378
Change-Id: Ia6d51e1a2c39dc7e5031d437c832d7dcd94e4fea
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2023169
Commit-Queue: Kham Udom <khamu@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
2020-02-05 16:02:08 +00:00
Kham Udom 047cb6914a Fixed high contrast in Elements panels.
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>
2020-02-04 18:57:20 +00:00
Joel Einbinder 7fbe24c094 DevTools: Convert to Shadow DOM and Custom Elements v1
Bug: 685385
Change-Id: I027e84d8003b7799492211d5fcf8348cd91fd799
Reviewed-on: https://chromium-review.googlesource.com/c/1422962
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#625513}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: b00e6ea1c9b4db5d743c7c204b1f63abf89e0398
2019-01-24 05:19:01 +00:00
Erik Luo 8af37bc056 DevTools: give visual signal when console level filter is custom
When the console level dropdown has custom levels, it will have a
background similar to the context selector.

Screenshot: https://imgur.com/a/sKhzAzh

Bug: 801986
Change-Id: Id015fe40ae46986bbf07455b0b5e1f0acd622afa
Reviewed-on: https://chromium-review.googlesource.com/1067854
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#560884}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 3b6c2b354d23144798b4f5c4857dc29a04e2fbcf
2018-05-23 01:53:12 +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