zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-10 21:54:47 +08:00
Code Issues Packages Projects Releases Wiki Activity
7,706 Commits 45 Branches 79 Tags
fdf2a0cecd0116bc13e2c838b485e59cd6bfbc46
Commit Graph
112 Commits
Author SHA1 Message Date
Sigurd Schneider cb2d45671e Enforce naming convention for properties 
This CL enforces general camelCase naming for properties,
with the following exceptions:
  - public properties are allowed to have a leading underscore until
    we've migrated them (they were probably introduced by the
    JSDOC -> TS automated script).
  - static readonly class properties must use CONSTANT_CASE. For
    non-static readonly class properties camelCase is enforced,
    and I think this gives the right intuition.

Bug: chromium:1057042
Change-Id: I482b5b7cfe2b856e83fba8b78be222d60761db19
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2692210
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
 2021-02-15 09:21:50 +00:00
Sigurd Schneider e3bf6c274f Apply css linting in PRESUBMIT.py to components as well 
The command `npm run check-lint` runs stylelint on components, but the
presubmit check wasn't. This lead to files getting committed that did
had lint errors. This CL ensures that stylelint is run on components
during presubmit as well.

Bug: chromium:1166108
Change-Id: Ie3d19a62452a04c710b2468c3a47e0c8a91b0d68
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2690529
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Sigurd Schneider <sigurds@chromium.org>
 2021-02-12 09:04:25 +00:00
Yisi f551fd7a71 New: undefined CSS var() is set to gray 
The title is no longer displayed as Jump to definition. I don’t think it makes much sense. The underline usually means that it can be clicked.
There is no need to display these words in this critical position. It is more practical to display the actual value of the custom properties.

Screenshot: https://i.imgur.com/BjVx3So.png

Bug: 1124707
Change-Id: I33d8b37de2dc6911580f979e31ee61ebcd518e8f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2593294
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Peter Müller <petermueller@chromium.org>
 2021-02-10 22:24:06 +00:00
Wolfgang Beyer ddf051e875 Fix linting errors via 'npm run lint-check' 
This output was created running 'npm run lint-check'. Some of the
suggested changes were then undone by the presubmit checks.

Bug: 1175145
Change-Id: I35607fc0d53a4c5a805a9b0241db1abd2a469967
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2678901
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
 2021-02-09 08:58:10 +00:00
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
Tim van der Lippe 5c423509db Remove i18n/module.json 
R=andoli@chromium.org

Bug: 1127902
Change-Id: I700e6d5fc8941ef54d4af10af01989ddf62165cc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2676144
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Andres Olivares <andoli@chromium.org>
 2021-02-05 10:48:08 +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
Michael Liao 38c465da95 [Switcher Icon]: Using ui/components/Icon to render switcher icon 
Issue:
- switcher icons are created within javascript code via createSVGChild
- this approach reduces re-usability and readability

Changes:
- create svg icon for switcher icons
- use ui/components/Icon class to render switcher icon
- create differentiating icons for dark and light theme

Switcher Icon Images:
Dark: https://imgur.com/s6lydHc
Light: https://imgur.com/VnecOgK

Bug: 1169824
Change-Id: Iac6a31e3a8588e5e5e447ac135f9f487c2466c3a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2648385
Reviewed-by: Leo Lee <leolee@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
 2021-01-29 17:43:38 +00:00
Michael Liao e5436e3e05 [Switcher Icon]: Add tooltip to switcher icon + adding setTitle to UIUtils 
Issues:
- Switcher icon does not have a tool tip

Changes:
- creating a setTitle function in UIUtils which uses Tooltip class to add tooltip to an element
- adding tooltip to switcher icons in color picker and font editor

Tooltip GIF: https://imgur.com/MdoQYqa

Bug: 1168782
Change-Id: I05af146a3888a4ddf893206bf531305028ad7670
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2641148
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
 2021-01-25 17:51:55 +00:00
Tim van der Lippe 0c9a847c17 Remove modules from migrated folders 
These extensions have been migrated and therefore we can only
import them for the layout tests.

R=andoli@chromium.org

Bug: 1131500
Change-Id: Idd738a82b0405c14c11bc8845feb37211f63da69
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2647586
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Andres Olivares <andoli@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
 2021-01-25 16:27:15 +00:00
Michael Liao a12cf3cf05 [Font Editor]: Fix bug where deleting global value will remove selector 
Issue:
- Font selector input does not repopulate after deleting a global value

Changes:
- Add boolean to check if a second selector exists before deleting selector

Screenshots:
- Before: https://i.imgur.com/swXjStT.gif
- After: https://i.imgur.com/e863WUt.gif

Bug: 1168630
Change-Id: Ia6d534c0c79eca764b96ba5ce2cb20b6b88c1eb5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2640879
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
 2021-01-22 19:48:26 +00:00
Yisi f6d35ed36c Fix: remove the underline from CSS var() 
The underline was added to signal that the variable is a clickable link. It's visually too prominent though, especially with a lot of variables on the screen. I suggest to remove the underline completely, give the variable the `--link` color (blue) and show the underline only on hover. This is also acceptable in regards to a11y.

Screenshot: https://bugs.chromium.org/p/chromium/issues/detail?id=1147750#c11

Fixed: 1147750
Change-Id: Ic8a6bfcb78d4ed1b676fb6e114359701e9902f33
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2631126
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
 2021-01-20 13:55:35 +00:00
Christy Chen 10e970269b [Loc] Migrate inline_editor to localization V2 
Migrate inline_editor directory
Tested with en-XL: https://imgur.com/a/1bw3coo


Bug: 1136655
Change-Id: I33979b0612219cdaf83b6e66e5055b0504dc7920
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2591889
Commit-Queue: Christy Chen <chrche@microsoft.com>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
 2021-01-20 13:17:30 +00:00
Jack Franklin 5afc7fed57 Lint inline CSS inside .ts components 
This CL introduces a new lint which runs CSS linting against our
TypeScript files, and changes the CSS to pass the linting.

Bug: chromium:1166108
Change-Id: Idb8dcf00d7c578f8db0e91633c89ae92ca85bcd8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2635655
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
 2021-01-18 15:12:36 +00:00
Tim van der Lippe 05149e9772 Remove ls from legacy-defs 
This adds all missing imports for `ls` to all files. After this change,
all usages of `ls` will now properly be resolved to a LocalizedString
rather than a normal string.

R=jacktfranklin@chromium.org

No-Presubmit: True
Change-Id: Icf6d8c3b8bea1f9e66f4b6b58e4ae4c7f99e6f9c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2629554
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
 2021-01-15 12:53:50 +00:00
Jack Franklin 9f1d0d5811 Create a helper for setting CSS props inside custom element 
Just tidies up the code a bit but mainly removes everyone from having to do that
typecast of `shadow.host`.

Bug: chromium:1166108
Change-Id: Iee55c9aa7453b7f8ee3623cc1bbc349e15edc400
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2626303
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
 2021-01-14 16:17:56 +00:00
Jack Franklin 9e71e6a50f ESLint rule to ban interpolation within <style> tags 
LitHtml strongly discourages this approach and it's one that often can
be avoided using CSS custom properties that are set from JavaScript, so
we're going to try to avoid its usage creeping into our codebase. We can
revisit if we hit upon a case where it's really needed.

Bug: chromium:1166108
Change-Id: Ib8c60d8670707b8f0e239d911ec569c64a3b1846
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2626294
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
 2021-01-14 09:34:54 +00:00
Tim van der Lippe bcd6b5c3ff Inline and remove isEnterKey 
R=szuend@chromium.org

Bug: 1050549
Change-Id: I7242fa3b0c2a69d2e4b4dd7c642ba09a5f4dc9bf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2624713
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
 2021-01-13 13:02:42 +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
Michael Liao 59450acba8 [Font Editor]: Changing font weight for section titles 
Issue:
- Font Editor section titles are unusually bold - doesn't fit other heading conventions in the DevTools

Changes:
- change section title font weight to be normal

Before: https://imgur.com/HN64Jqp
After: https://imgur.com/uugug1S

Bug: 1163821
Change-Id: I062ed8efb3101ccb93aa195e13bd993ae4bdc420
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2613795
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
 2021-01-08 18:47:07 +00:00
Tim van der Lippe d7cfd14814 Fix no-implicit-coercion errors in front_end/ 
R=jacktfranklin@chromium.org

No-Presubmit: True
Bug: 1082789
Change-Id: Ic77884bf7e9b5dc74053915b3b10699368841b66
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2595268
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
 2021-01-07 12:40:16 +00:00
Changhao Han 4684176107 Fix angle popover early hiding and shift-click behavior 
This CL fixes two issues.
1. The angle popover would hide when:
(1). a new CSS property line is created
by either pressing Tab in the Styles section or clicking at an empty
space;
(2). angle popover is opened when angle swatch is clicked;
(3). click anywhere on the popover would hide the popover, which is
not expected because clicking on the popover should only update the
angle but not closing it.
Upon investigation, the culprit is when clicking on the angle swatch,
the mousedown event is consumed with `preventDefault`, which also
delays the blur event of the newly created CSS property line. There is
an internal `_editingStyle` property that determines if the angle
component will be re-created and thus lose previous popover state. This
property is set to false, which recreates <angle>, by the blur listener,
and then set to true, which prevents the re-creation (thus preserving
the popover). Since the blur event is delayed, the sequence of events
is off and causes this early dismissal of angle popover.
The fix is to not `preventDefault()` in angle swatch's mousedown
event, but this creates another problem where holding shift will
select text around <angle>. This is then fixed with setting
`user-select: none` on it.

2. This CL also fixes a previous TODO: when angle popover is open,
shift-clicking it should close the popover and not toggle the unit,
so that the behavior is consistent with color swatch for now.

Fixed: chromium:1142523
Change-Id: I1e1f4d8500d5dd9308bf5d225be3aff958fea971
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2611131
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Auto-Submit: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
 2021-01-07 09:24:36 +00:00
Changhao Han 81727eac8f Move CSSAngleRegex to CSSAngleUtils and remove unnecessary file 
Bug: chromium:1126178
Change-Id: I514de076a9c1af6e28fe6da7e4a5cf9c8682c9dc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2610784
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Mathias Bynens <mathias@chromium.org>
Auto-Submit: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
 2021-01-05 13:09:59 +00:00
Changhao Han fafa67016f Change cursor to pointer when hovering over color swatches 
The next step would be to figure out what cursor we should use when
hovering over swatches holding `shift`.

Bug: chromium:1156835
Change-Id: I0dec0d1495f487cc16ae6ad584d1e89fa64f50b8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2601713
Auto-Submit: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
 2020-12-24 12:23:40 +00:00
Conner Turner db8fb909f3 Fix CSSShadowEditor not appearing with !important 
Added important _part to ShadowModel and ensured it does not get
discarded by regex.

Replaces https://crrev.com/c/1131942

Fixed: 860815
Change-Id: I30bfbb44e028ad1b3a7d80044f652eb3e8b8f577
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2601705
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
 2020-12-23 20:49:37 +00:00
Yisi 508bcddc99 Fix: right-click in CSS var() cannot open the context menu 
This CL solves the problem that right-clicking in CSS var() will jump to the defined position. The context menu is now displayed correctly.

Bug: 1152391, 1124707
Change-Id: I961eda46abe5fbe552260f3761596f968cecb1ca
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2593293
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
 2020-12-16 22:24:55 +00:00
Tim van der Lippe 252402ab00 Add assertNever to exhaustive switch statements 
R=jacktfranklin@chromium.org

Fixed: 1158395
Change-Id: I3932986684299bfbfaf6d1d735d65b7f630b93c7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2589954
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
 2020-12-16 11:44:15 +00:00
Tim van der Lippe d946df0c9c Add missing return types to function/method definitions 
We will be turning on an ESLint rule to enforce the specification
of a return type in a follow-up CL.

R=jacktfranklin@chromium.org

Bug: 1057042
Change-Id: I56f67cf3fdafa0a867e8837f4d30d52ed1595351
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2587740
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
 2020-12-14 15:01:46 +00:00
Tim van der Lippe 5e1aeb0577 Remove suppress annotations 
All of these were Closure-specific.

R=szuend@chromium.org

No-Presubmit: True
Bug: 1011811
Change-Id: Ia580e21cd3b06f532bb5a63a770ccfa3d7c796ee
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2569761
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
 2020-12-02 17:27:02 +00:00
Tim van der Lippe 2e38eeaf9f Remove all comments with only the unrestricted annotation 
The unrestricted annotation is Closure-specific and can be removed.
This patch removes all comments with only the unrestricted annotation
in them.

R=szuend@chromium.org

No-Presubmit: True
Bug: 1011811
Change-Id: Iba0723644f53f5307c3077d341271af86becc32a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2569758
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
 2020-12-02 15:25:32 +00:00
Jack Franklin eefa5f3d78 [Dark Mode] swatchPopover.css 
I've left the --drop-shadow variable alone for now and pinged Peter to
ask about the plan for those variables moving forward.

Bug: 1152736
Change-Id: I15c9853be7c6775a70b7ea0eb2713d5d8ac9d9ce
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2567959
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Wolfgang Beyer <wolfi@chromium.org>
 2020-12-02 12:17:09 +00:00
Michael Liao 6035f4a583 [Font Editor Prototype]: Implements Experimental Typography CSS Editor in Styles Pane 
Reference Document: https://docs.google.com/document/d/1zvmKDfdgVgL-QX2W4nKfgoeG_69YDF0AsLerIzL3rPE/edit?usp=sharing

Explainer: https://docs.google.com/document/d/1TmvbZuJR4fHuViE0X23y_1kUT43qt98mdj5GZxWf_W0/edit

Bug: 1093229
Change-Id: I0a8d049bd564a5ba547466067a12185565af7820
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2305613
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Songtao Xia <soxia@microsoft.com>
Reviewed-by: Tony Ross <tross@microsoft.com>
Reviewed-by: Shane Clifford <shanejc@microsoft.com>
 2020-12-01 19:54:05 +00:00
Tim van der Lippe 75c2c9cff5 Disable @typescript-eslint/no-unused-vars 
The newest version of @typescript-eslint errors on declare globals.
While this is usually good to point out, we have legitimate usages
of these statements. Based on the discussion in
https://github.com/typescript-eslint/typescript-eslint/issues/2519
it seems unlikely this will be fixed anytime soon. Therefore, let's
disable these specific lines to unblock our upgrade of the linter.

R=jacktfranklin@chromium.org

Change-Id: Iee6339428eef0d5496783850a9026fed00942bcb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2566807
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
 2020-12-01 13:18:25 +00:00
Jack Franklin 65cfd29d84 [ESLint] enforce set data methods use a type reference 
And not a literal type. Again, was enforced by the component bridges
code.

Bug: 1130536
Change-Id: I766015ef69470df06443a71035dd04037104f85b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2562351
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
 2020-11-26 17:59:13 +00:00
Patrick Brosset 73316d8aa2 Fix regression where color-picker isn't anchored on the color swatch 
This bug comes from the fact that SwatchPopoverHelper expects an element
to anchor the color-picker to.
That element used to be the old color swatch component, which had a way
to get a reference to the icon element (the little colored square).

The new color swatch component doesn't expose its internal DOM structure
like the old one did, and it's probably better to keep it this way.
So the SwatchPopoverHelper is now getting the entire color swatch
component element as an anchor, causing it to position the color picker
at its center (so instead of pointing to the colored square, it points
to somewhere within the text).

In this change, I made it so the new color swatch component exposes a
public method that returns the AnchorBox instance that
SwatchPopoverHelper needs.

Before: https://imgur.com/eUJrvCk.png

After: https://imgur.com/SAk8dyO.png

Bug: 1152347
Change-Id: I1b79b6f4b50fdc1e3c6315d1e5fd239714cbf631
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2557841
Commit-Queue: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
 2020-11-25 13:42:42 +00:00
Tim van der Lippe 7dcef88d8b Remove skip_compilation from module.json files 
R=aerotwist@chromium.org

Bug: 1011811
Change-Id: I4c4fd280adb4f5f7b327239d08d80b2cb98b203b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560248
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
 2020-11-25 13:19:08 +00:00
Jack Franklin 9b379936ba [DarkMode]: rename patchThemeSupport to enableLegacyPatching 
This aligns the flag with the changes we've made to appendStyle() and so
on which all use `enableLegacyPatching` to toggle the legacy color
patching functionality.

Bug: 1122511
Change-Id: I58b246c0652c429de92d72d50d11e2b19f7c56aa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560242
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
 2020-11-25 12:37:47 +00:00
Changhao Han 34660dcac4 Fix css-shadow-swatch re-register issue 
Change-Id: I428ea6838908368f718196deeb5a9f473448bf1e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2555444
Auto-Submit: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
 2020-11-24 12:25:37 +00:00
Tim van der Lippe 2e4ad365f6 Remove bridge files from inline_editor 
Since inline_editor is now TS-only, the bridge files are no
longer necessary.

R=changhaohan@chromium.org,jacktfranklin@chromium.org

Bug: 1011811
Change-Id: I081dc8653aa255892f785fd847d81cd550535696
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2546922
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
 2020-11-18 14:57:08 +00:00
Tim van der Lippe 89e82cecd3 Use TypeScript-authored files in inline_editor/ 
R=aerotwist@chromium.org

Bug: 1011811
Change-Id: I2f9023a438e3a5c39a62a66bab4a5b5fc49792b7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2546921
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
 2020-11-18 14:47:08 +00:00
Tim van der Lippe 7c5cedeeab Typecheck inline_editor/Swatches.js with TypeScript 
R=aerotwist@chromium.org

Bug: 1011811
Change-Id: I047cdd9742abf1db3d588d7871a3aa403e9ad41e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2546920
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
 2020-11-18 14:35:58 +00:00
Yisi 6506ea926f Fix the problem that there is no color picker in front of the CSS custom property 
And fix the click can not jump to the variable definition position.

Test case:

    data:text/html;charset=UTF-8,<style> html {--c:   green ;  } </style><div style=" background: var(  --c    );width: 100px; height: 50px;color: var(   --c,      red    );">test</div>

Before: https://i.imgur.com/q6Mjcg2.png
After: https://i.imgur.com/VeAAcyS.mp4

At the same time, there are the following details:

1. Shift + Click can switch the color format. When the color value enters the editing state and loses the focus, it can redisplay CSS var()
2. By the way, the value with fallback is supported: var( --foo, green), but the current fallback value does not support color picker, which can be considered in the future CL.

Whether the above interaction method is reasonable, please give me guidance and suggestions.

Fixed: chromium:1147016
Change-Id: I333646afb3582c3e8a70776c8058c8c5ef749d90
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2526023
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
 2020-11-17 10:33:38 +00:00
Paul Lewis 1f7a820653 [unit test] Fix remaining non-entrypoint imports 
Bug: 1148296
Change-Id: If6673aff7755e78b29d4a602fac1baa84e4890e3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2536408
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
 2020-11-13 15:19:21 +00:00
Changhao Han 998c99025a Fix <angle> keydown issue 
This is caused by a recent change to preventDefault from mousedown,
which would have brought focus to the angleContainer. Now we have to
manually focus on it. Also we need to preventDefault on arrowUp/Down
to prevent scrolling.

Bug: chromium:1148183
Change-Id: Ic20858daebb374709ecf0bd011be720ca16c43b5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2534190
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Auto-Submit: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
 2020-11-12 09:46:39 +00:00
Yisi be42c94ff7 Fix CSS custom properties are blocked by underline 
This makes the custom properties more readable.

Before: https://i.imgur.com/rKH8z6t.png
After: https://i.imgur.com/ACKP0fJ.png

Bug: 1147750
Change-Id: I6dcb53ab42fb0aed30f6db61f1b164aedd8e49ae
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2531339
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
 2020-11-11 20:13:09 +00:00
Changhao Han 7969fdd595 Fix CSSAngle unit conversion issue 
This CL fixes two issues:
1. unit conversion would lose precision after several rotations;
2. unit conversion would persist to the backend, which is inconsistent
with other swatches' behaviors.

Bug: chromium:1147435
Change-Id: I041b4a941019692f8fb9597911131fdea2d07bcc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2529357
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
 2020-11-10 17:31:18 +00:00
Paul Lewis 1eb165cc6c [unit test] Switch inline_editor imports to using the entrypoint 
Note: includes a drive-by fix to exclude bridge files from coverage
reports.

R=jacktfranklin@chromium.org

Change-Id: I88077d597ae11aa6c4fca68a8fb363e3a34dbbe4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2529153
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
 2020-11-10 14:27:27 +00:00
Changhao Han d4e32eb578 Update CSSAngle to use value modification helper from UIUtils 
Bug: chromium:1126178
Change-Id: Ib6006bc6ebe11f4c30654dcb38558e4ffd686c74
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2527051
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
 2020-11-10 09:18:39 +00:00
Changhao Han 178a96f729 Avoid re-defining custom elements: CSSAngleEditor, CSSAngleSwatch 
Bug: 1057090
Change-Id: Id372a2602853087b3eb8933792278668052e7ed9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2525956
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Auto-Submit: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
 2020-11-09 12:04:47 +00:00