zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-11-06 21:29:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

[sources] Fix a bunch of UX regressions with "Code Folding".

Browse Source 
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 <bmeurer@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Auto-Submit: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Ergün Erdoğmuş <ergunsh@chromium.org>
This commit is contained in:
Benedikt Meurer
2022-10-14 12:46:27 +00:00
committed by Devtools-frontend LUCI CQ
parent 4d3e9c67e4
commit a7e35555f8
3 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/Images/src/triangle-expanded.svg
+1 -1
View File
@@ -1 +1 @@
<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 10 10 h 28 l -14 20 L 10 10" /></svg>
<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M 10 15 h 28 l -14 20 L 10 15" /></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 131 B

After

Width:  |  Height:  |  Size: 132 B

front_end/ui/components/text_editor/config.ts
+1
View File
@@ -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)',
front_end/ui/components/text_editor/theme.ts
+10
View File
@@ -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',