From a7e35555f8cd33ee13b4e8dba4f076fb891dbb0a Mon Sep 17 00:00:00 2001 From: Benedikt Meurer Date: Fri, 14 Oct 2022 14:03:28 +0200 Subject: [PATCH] [sources] Fix a bunch of UX regressions with "Code Folding". MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This addresses a bunch of styling issues that regressed with the migration to CodeMirror 6 wrt. "Code Folding", namely: 1. Use `cursor: pointer` when hovering over the expand/collapse triangles. 2. Show collapse triangles only when hovering the gutter, while expand triangles are always shown. 3. Properly align the expand triangle (was off by 5px). Bug: chromium:1290182, chromium:1371585 Change-Id: Iaf4a178ffd37408629aa51a7be707899eb614477 Fixed: chromium:1374618 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3956234 Commit-Queue: Benedikt Meurer Reviewed-by: Ergün Erdoğmuş Auto-Submit: Benedikt Meurer Commit-Queue: Ergün Erdoğmuş --- front_end/Images/src/triangle-expanded.svg | 2 +- front_end/ui/components/text_editor/config.ts | 1 + front_end/ui/components/text_editor/theme.ts | 10 ++++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/front_end/Images/src/triangle-expanded.svg b/front_end/Images/src/triangle-expanded.svg index 65050fcbf8..22e0193902 100644 --- a/front_end/Images/src/triangle-expanded.svg +++ b/front_end/Images/src/triangle-expanded.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/front_end/ui/components/text_editor/config.ts b/front_end/ui/components/text_editor/config.ts index 59b672847e..100ce474f9 100644 --- a/front_end/ui/components/text_editor/config.ts +++ b/front_end/ui/components/text_editor/config.ts @@ -88,6 +88,7 @@ export const codeFolding = DynamicSetting.bool('textEditorCodeFolding', [ markerDOM(open: boolean): HTMLElement { const iconName = open ? 'triangle-expanded' : 'triangle-collapsed'; const icon = new Icon.Icon.Icon(); + icon.setAttribute('class', open ? 'cm-foldGutterElement' : 'cm-foldGutterElement cm-foldGutterElement-folded'); icon.data = { iconName, color: 'var(--color-text-secondary)', diff --git a/front_end/ui/components/text_editor/theme.ts b/front_end/ui/components/text_editor/theme.ts index d42053fd5e..2c3535f5ed 100644 --- a/front_end/ui/components/text_editor/theme.ts +++ b/front_end/ui/components/text_editor/theme.ts @@ -53,6 +53,16 @@ export const editorTheme = CM.EditorView.theme({ backgroundColor: 'var(--color-background)', }, + '.cm-gutters .cm-foldGutterElement': { + cursor: 'pointer', + opacity: '0%', + transition: 'opacity 0.2s', + }, + + '.cm-gutters .cm-foldGutterElement-folded, .cm-gutters:hover .cm-foldGutterElement': { + opacity: '100%', + }, + '.cm-lineNumbers': { overflow: 'visible', minWidth: '40px',