This was a bit of a bigger CL than intended:
* Added `.d.ts` files to a bunch of CodeMirror files to keep the TS compiler
happy.
* Moved `front_end/cm` to a BUILD.gn and devtools_pre_built. Long term (follow
up CL) we can get rid of `front_end/cm` and have `text_editor` depend on the
third_party CodeMirror directly.
* Migrated text_editor to be a devtools_entrypoint.
Bug: 1101738
Change-Id: Iac61216efa754163a478a3c529ab526ec83b0d13
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2312676
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
This was disabled in response to a bug being filed against the Elements
panel after clicking 'Edit As HTML' on an element. When editing an
element as HTML, the window that appears doesn't look like an editor
and users probably aren't expecting 'editor-like' shortcuts like this.
(crbug.com/470435)
The sources panel is an editor (and looks like one) so we restore the
ctrl-x or ctrl-c behavior there, which is to cut or copy the current
line when there is no selection and the shortcut is used. These shorcuts
work the same way in VS Code.
Bug: chromium:1066415
Fixed: chromium:800028
Change-Id: I1a5f16705900c9caf14099d079dca2154bbb0ec6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2204101
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Peter Marshall <petermarshall@chromium.org>
It turns out we are poking into CodeMirror internals and implicitly
relying on its styling. In https://github.com/codemirror/CodeMirror/pull/5963
a selector on a `pre` element in CodeMirror was updated to be more
specific. We were implicitly relying on this styling, as we inject
`pre` elements as placeholders for these console live expressions.
Therefore, add these classes explicitly to make sure the height
is correct. For future changes, we should remove the poking of
internals and also more frequently update CodeMirror so that
it is easier to bisect what the culprit is.
R=bmeurer@chromium.org
Fixed: 1074197
Change-Id: Ia49e4d97605b5fcd6c17b83d124a3f39a42a294c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2168880
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
This CL changes references to self.Common.settings (the global
instance of SDK.Common.Settings) over to
Common.Settings.Settings.instance(). To keep both TypeScript and
Closure happy we must make a method on the Settings class itself,
since it only allows private constructors to be accessed by static
methods on the class.
Bug: 1058320
Change-Id: I04afc8caf64acf29cdda13ef03ad05cfff4786a1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2091450
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
NOTE: this is a reupload of CL 1838270, targeting the new separate
DevTools repository.
https://chromium-review.googlesource.com/c/chromium/src/+/1838270
This PR addresses customer feedback received regarding scrolling
behavior for files viewed in the Sources tab. Currently, users are able
to scroll beyond the end of file, for all files at least two lines or
more in length. However, for extra-small files, this behavior is awkward
as the entire file fits inside the editor and scrolling is not needed.
As it turns out, this behavior is a feature. It is also present in
some other text editors, like VSCode. The purpose of scrolling past EOF
is to enable developers to scroll lines to the top of the file, even if
those lines are near the end of the file. After an informal discussion
with my peers, some prefer this feature, while others find it
unintuitive and distracting (myself included).
This change adds a new checkbox toggle option to the Sources setting:
"Allow scrolling past end of file"
When enabled (by default), the behavior is the same as it is now: users
may scroll beyond the end of file for all files >2 lines in length.
When disabled, the user may only scroll to the last line in the file,
and a scrollbar does NOT appear if the entire file fits inside the
editor. (When the editor is resized, a scrollbar appears as needed).
Animated GIF demo: https://i.imgur.com/zJytuf1.gif
Remark: the scroll past EoF feature is not native to CodeMirror and is
a Chromium specific customization for the Sources tab.
Bug: 998270
Change-Id: I79d11cf68c105aabe407269819f0495adfba44b7
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1872878
Reviewed-by: Fabio Rocha <fabio.rocha@microsoft.com>
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Commit-Queue: Brian Cui <brcui@microsoft.com>
This change makes the Changes drawer editor more accessible by adding a
gutter column with +/- symbols on added or deleted rows, respectively.
This information was previously conveyed only through color, a WCAG
violation.
In order to communicate whether a line is an addition or deletion to
screen reader users, I created a new code mirror input style that
prepends 'Addition:' or 'Deletion:' to the text that screen readers read
out for each diff line. This solution was settled on after discussing it
with other devs working on accessibility in order to avoid implementing
something more complex like VS Code's screen reader diff experience [1].
Screenshot: https://gyazo.com/8fe95b563a9e74d0d8b1a88900876c2a
[1] https://github.com/Microsoft/vscode/issues/17263#issuecomment-305701496
Bug: 963183
Change-Id: Ieeab30b8058fb36ef3a0d9ef4beac52419f6dc33
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1891836
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Commit-Queue: Jack Lynch <jalyn@microsoft.com>
This also makes cm_modes/ non-remote and uses proper dynamic imports to
load the code (rather than an `eval`). This increases the binary size by
104 KB from 11756K to 11860K which is an increase of 0.8%.
The stylus cm_mode has been removed. This mode was the largest mode
(30KB), seems unmaintained [1] and this syntax is likely rarely used (if
at all). It is unclear how often the other modes are installed and used.
Additionally, I discovered a promise race in the plugin installation. In
the full application this is not noticeable, as by default all code
mirror modes are lazily loaded (verified they still work with Markdown,
Java file and the regular js/cc files). However, in the test it was not
properly awaiting the plugin loading.
Perform the async-await plumbing to make sure the promise is resolved
before the test continues execution.
roll CodeMirror
[1]: https://github.com/codemirror/CodeMirror/commits/master/mode/stylus
Bug:1006759,1011466
Change-Id: If4d81d01318e08a63faaffee8b0cc9ab5954d4c6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1928924
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
cm_web_modes/ was used both in a worker and in the normal browser
context. However, both formatter_worker/ and text_editor/ included the
relevant files in their scripts array.
The fix is to make cm_web_modes a proper module and import either the
browser (_cm.js) variant or the worker (_headless.js) variant.
Bug: 1006759
Change-Id: I85c6f67102d8ffd94e073850b1ac7adcb289b1b2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1934218
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Introduce a new namespace "Root" to be able to disambiguate between
Runtime the namespace and Runtime the object.
roll CodeMirror
The above line is necessary to fix the presubmit, which complains
about CodeMirror changes. This is only updating a type reference.
Bug: 1006759
Change-Id: I04941d9f18649701060e3035f7eeb2ef3abb51e4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1829708
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Tim Van der Lippe <tvanderlippe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#701257}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 17cc008cf6ad28c6e8c07c638a1b380ca30e7f79
The Chromium/Google style guides does not enforce curly braces for
single-line if-statements, but does strongly recommend doing so. Adding
braces will improve code readability, by visually separating code
blocks. This will also prevent issues where accidental additions are
pushed to the "else"-clause instead of in the if-block.
This CL also updates the presubmit `eslint` to run the fix with the
correct configuration. It will now fix all issues it can fix.
Change-Id: I4b616f21a99393f168dec743c0bcbdc7f5db04a9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1821526
Commit-Queue: Tim Van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Jeff Fisher <jeffish@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#701070}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 7e0bdbe2d7f9fc2386bfaefda3cc29c66ccc18f9
CodeMirror currently gets handed a default indent size of 4 spaces, and the
indentation setting is ignored. This patch updates the CodeMirror config to use
the value in the settings, and observes changes to its value.
Bug: 977394
Change-Id: I1ddaeaa788378e37a88da1d7f42659bbe386dd57
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1674092
Reviewed-by: Yang Guo <yangguo@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@google.com>
Cr-Original-Commit-Position: refs/heads/master@{#696792}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d3be8efb8e3700d72b6a75e1078b54e2b17e8c15
Accessibility testing revealed that there are tab traps in all of the text editors including read only ones. Once keyboard users tab into the editor, they cannot tab out the editor.
This change adds a shortcut to disable/re-enable tab for indentation, which allows keyboard users continue to use tab to navigate to next UI component.
Settings Shortcuts page screenshot: https://imgur.com/a/qeOjGoB
Change-Id: I026a5a9c47407634a78c2ccf1a0bc532baa39e07
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1545200
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Junyi Xiao <juxiao@microsoft.com>
Cr-Original-Commit-Position: refs/heads/master@{#649901}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 27ff38b767bc1659a596830b864acf60850e6bd0
The previous CL's CSS hack incorrectly cut off breakpoints, caused the
gutter to be transparent when scrolling code horizontally, and made
closed folding triangles invisible.
Bug: 328431
Change-Id: Iba9482efd4bfd13d750580746f5507dadd0c73b2
Reviewed-on: https://chromium-review.googlesource.com/c/1380557
Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#617362}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 87b1e4b4c4908281cb602c44f4a757fd653ec4b4
Typing 'h' in text inputs with 'maxLength' may produce key events
without producing the 'input' event. This scenario leads DevTools to
allow shortcut-defined actions that are normally suppressed.
This CL replaces suppression logic with a simpler condition:
"if a key might trigger input, and we are editing, do not run action"
Bug: 833340
Change-Id: I75c5c0dd49c9f5b1624122345459438fc1d976f3
Reviewed-on: https://chromium-review.googlesource.com/c/1265837
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Commit-Queue: Erik Luo <luoe@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#600859}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: a51492da19a2a90fc44f5b0df3151e2f5c6c8346
CodeMirror text editors try to reduce indentation on 'Shift+Tab'.
However, this consumes the key event, preventing focus from leaving,
even if nothing changed.
This CL allows focus to leave when we are sure that no indentation
should change. Shift+Tab can now move focus from Console prompt to
toolbar and from SourceFrame's editor to the Sources TabbedPane.
Bug: none
Change-Id: I3660a48fe1c30a0972e2908514ee44fba7a51132
Reviewed-on: https://chromium-review.googlesource.com/1142519
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Reviewed-by: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#577406}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 8a6319931dea70b9adef40972160583fe1547446
Running Lighthouse on DevTools lead to these changes:
* Label our <select> toolbar items
* Don't use tabIndex=1 for our canvas elements
* Don't use li items in the network panel
* add lang=en to our html tags
Change-Id: I9fef3d731dbbcbb56c3f73d81fd5669d65fa9827
Reviewed-on: https://chromium-review.googlesource.com/1093399
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#566195}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 237b755cd007b58b585ad34137353e11e2bc3ccd
This overrides the default CodeMirror input logic to put more text in
the textarea.
CodeMirror uses an offscreen <textarea> to detect input. Due to
inconsistencies in the many browsers it supports, it simplifies things
by regularly checking if something is in the <textarea>, adding those
characters to the document, and then clearing the <textarea>. This
breaks assistive technology that wants to read from CodeMirror,
because the <textarea> that they interact with is constantly empty.
Because we target up-to-date Chrome, we can guarantee consistent
input events. This lets us leave the current line from the editor in
our <textarea>. CodeMirror still expects a mostly empty <textarea>, so
we pass CodeMirror a fake <textarea> that only contains the user's input.
Change-Id: I025a1937bfd66fa574fd692da079a5888d9cb529
Reviewed-on: https://chromium-review.googlesource.com/1020193
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#564347}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d06dd5982b810b4c3576388ef3a31f060685dff7
I extracted out some improvements to inplace pretty print in
SourceFrame from my sources auto pretty print patch.
* Line numbers become blue when pretty print is active
* Selection is properly scrolled into view when pretty print is toggled
Change-Id: Ib1cf8f0a15b8495594ecf121cef8786d8cfd0f16
Reviewed-on: https://chromium-review.googlesource.com/1044878
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#556318}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d893a023c6a2ad473795fc680170c2a018eedab3
Tim van der Lippe
