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>
The new icon component used a display: inline-block span in its
shadow DOM to display the icon as background of said span. The
problem is that inline elements have two heights: a line box
and a content box. The content box is correctly sized, but the
line height is dependent on other factors (some outside of the
actual component) such as font selection and line leight. This
resulted in the icon component getting a /different/ height that
what was specified. See the screenshots at here for an example:
https://imgur.com/a/reKweWU
This alignment problem was mitigated in the code-base by all kinds
of paddings and margin setting (some of which are undone in this CL).
This CL changes the span in the shadow DOM that has the actual
icon as background to a div by setting the display: block style.
This ensures that the height of the icon component is computed
as intended, and in turn, a bunch of "correction" values in a
bunch of places can be removed.
Screenshot: https://imgur.com/a/reKweWU
Bug: chromium:1126031
Change-Id: Ibe26f81817e0ef6e9564553ace070e61d75006c4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2629550
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
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>
This patch drops unnecessary -webkit- prefixes in CSS and enables
a lint check to enforce that prevent such properties from being
added in the future. Note that the use of vendor-prefixed CSS
properties is still accepted in cases where there is no standardized
and browser-supported alternative.
Bug: chromium:1104187
Change-Id: I29ae93d5a760c4f5037f20663754f448b5083235
Fixed: chromium:1031475
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2297386
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
This changes added the element(s) affected resource type. The an affected
element represented by a subset of Protocol.DOM.BackendNode properties [1].
In the issues panel view the `backendNodeId` and `nodeName` are used to
display a deferred node link that will only push the node to the front-end
when activated by the user.
Activating the tag name link opens the elements panel and highlights the
node.
Note that only the element tag is displayed and not attributes on the element
such as id or classes.
This change is only the front-end displaying of the affected element and
will be useful for future back-end issue implementations, e.g. _Preload
warnings_ would link to the offending <script> tag in the Elements panel [2].
The below screenshot and gif are demo's using dummy data in patchset 3 [3], unfortunately
the backEndNodId changes often so there is no guarantee the dummy data
will work correctly on every page.
[1]: https://chromedevtools.github.io/devtools-protocol/tot/DOM/#type-BackendNode
[2]: https://imgur.com/nAMHsfm
[3]: https://crrev.com/c/2176406/2..3
Screenshot: https://imgur.com/oG78y7O
Keyboard Accessibility GIF: https://imgur.com/dMloRDc
Bug: chromium:1070375
Change-Id: Ia27a067c92bdf5fb14bb008151c4d80293d70678
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2176406
Commit-Queue: John Emau <John.Emau@microsoft.com>
Reviewed-by: Tony Ross <tross@microsoft.com>
Reviewed-by: Simon Zünd <szuend@chromium.org>
There are issues triggered from document.cookie in JavaScript, and it
doesn't make sense to link to the network request panel for such cookie
issues. We currently don't have the source location in the issue (this
requires back-end changes), so the option that should cause the least
confusion is to not link at all.
In some cases, the cookie might be available in the cookies section of
the application panel, but it is difficult to link there.
Bug: chromium:1057979
Change-Id: Id2eb0721397aa7c0e39cfcca2b829a6f57dcc4b3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2182417
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
- Improve is-open-triange movement and orientation
- Keep toolbar fixed at top, don't scroll it
- Fix font weight for issue title (broken CSS rule)
- Reign in block margins of paragraph tags.
- Fix colors for section headers
- Decrease indent for resolutions list
Bug: chromium:1057979
Change-Id: I9df679853cf8f303c3aee2b77ea535234672e189
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2156348
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Converts display of issues to use TreeOutline allowing re-use of
built-in keyboard handling from that component. Redundant UI elements
such as expand/collapse toggles have been removed and the corresponding
equivalents in TreeOutline re-styled to match the existing Issues panel
design.
Also removes the height animation for opening/closing issues to avoid
clipping content (see https://imgur.com/a/iZJPyL0). This was an
existing issue for which re-implementing the broken behavior on top of
TreeOutline seemed out-of-scope. Follow-up work could consider re-adding
this animation in a way that doesn't clip content.
Bug: 1067773
Change-Id: Id6b1a3391efbc74139cc20d572c3fef038d3ecad
Gif: https://imgur.com/a/c9lZ3bm
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2144339
Commit-Queue: Tony Ross <tross@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
Reviewed-by: John Emau <John.Emau@microsoft.com>
Jack Franklin
