Skip to content

Commit 302a11c

Browse files
MrBlankCodingMrBlankCoding
committed
Perfect Minimap
1 parent c991606 commit 302a11c

7 files changed

Lines changed: 67 additions & 32 deletions

File tree

‎Chrome/codemirror/addon/minimap/minimap.css‎

Lines changed: 43 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,56 @@
11
/* CodeMirror Minimap Styles */
22

3-
/* Hide CodeMirror's native scrollbars when minimap is active */
4-
.CodeMirror.has-minimap .CodeMirror-vscrollbar,
5-
.CodeMirror.has-minimap .CodeMirror-hscrollbar,
6-
.CodeMirror.has-minimap .CodeMirror-scrollbar-filler {
3+
/* Hide the main editor's vertical scrollbar */
4+
.CodeMirror-vscrollbar {
5+
display: none !important;
6+
width: 0 !important;
7+
opacity: 0 !important;
8+
pointer-events: none !important;
9+
}
10+
11+
/* Ensure the scrollbar space is removed */
12+
.CodeMirror-scrollbar-filler {
713
display: none !important;
14+
width: 0 !important;
15+
background: none !important;
816
}
917

10-
/* Hide the gutter scrollbar filler */
18+
/* Hide scrollbars when minimap is active - more targeted approach */
19+
.CodeMirror.has-minimap .CodeMirror-vscrollbar,
20+
.CodeMirror.has-minimap .CodeMirror-hscrollbar,
21+
.CodeMirror.has-minimap .CodeMirror-scrollbar-filler,
1122
.CodeMirror.has-minimap .CodeMirror-gutter-filler {
1223
display: none !important;
24+
width: 0 !important;
25+
height: 0 !important;
26+
opacity: 0 !important;
27+
visibility: hidden !important;
1328
}
1429

15-
/* Ensure the editor content doesn't show scrollbars */
16-
.CodeMirror.has-minimap .CodeMirror-scroll {
17-
overflow: hidden !important;
30+
/* Ensure the scrollbar track is hidden */
31+
.CodeMirror.has-minimap .CodeMirror-vscrollbar::-webkit-scrollbar-track,
32+
.CodeMirror.has-minimap .CodeMirror-hscrollbar::-webkit-scrollbar-track {
33+
background: transparent !important;
1834
}
1935

20-
/* Hide any remaining scrollbars on the wrapper */
21-
.CodeMirror.has-minimap {
22-
overflow: hidden !important;
36+
/* Ensure the scrollbar thumb is hidden */
37+
.CodeMirror.has-minimap .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
38+
.CodeMirror.has-minimap .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
39+
background: transparent !important;
2340
}
2441

25-
.CodeMirror.has-minimap .CodeMirror-sizer {
42+
/* Target only the main scroll elements */
43+
.CodeMirror.has-minimap > .CodeMirror-scroll {
2644
overflow: hidden !important;
45+
margin-right: 0 !important;
46+
padding-bottom: 0 !important;
47+
}
48+
49+
/* Hide WebKit scrollbars */
50+
.CodeMirror.has-minimap ::-webkit-scrollbar {
51+
display: none;
52+
width: 0;
53+
height: 0;
2754
}
2855

2956
/* Minimap container styles */
@@ -36,22 +63,13 @@
3663
z-index: 10;
3764
cursor: pointer;
3865
user-select: none;
39-
overflow: hidden !important;
66+
overflow: hidden;
4067
backdrop-filter: blur(2px);
4168
}
4269

43-
/* Hide scrollbars on minimap and all child elements */
44-
.CodeMirror-minimap,
45-
.CodeMirror-minimap * {
46-
scrollbar-width: none !important; /* Firefox */
47-
-ms-overflow-style: none !important; /* IE/Edge */
48-
}
49-
50-
.CodeMirror-minimap::-webkit-scrollbar,
51-
.CodeMirror-minimap *::-webkit-scrollbar {
52-
display: none !important; /* Chrome/Safari */
53-
width: 0 !important;
54-
height: 0 !important;
70+
/* Minimize repaints by being specific about what needs to be hidden */
71+
.CodeMirror-minimap::-webkit-scrollbar {
72+
display: none;
5573
}
5674

5775
/* Minimap canvas */

‎Chrome/codemirror/addon/minimap/minimap.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
this.viewportIndicator.style.cssText = `
8282
position: absolute;
8383
left: 0;
84-
right: ${this.options.scrollbarWidth}px;
84+
right: 0;
8585
background: ${this.options.viewportColor};
8686
border: 1px solid ${this.options.viewportBorderColor};
8787
border-radius: 2px;

‎Chrome/editor.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
<link rel="stylesheet" href="styles/e_header_footer.css">
1616
<link rel="stylesheet" href="styles/e_sidebar.css">
1717
<link rel="stylesheet" href="codemirror/theme/default.css">
18-
<link rel="stylesheet" href="codemirror/addon/scroll/simplescrollbars.css">
1918
<link rel="stylesheet" href="codemirror/addon/lint/lint.css">
2019
</head>
2120
<body>
@@ -598,6 +597,11 @@ <h2>Editor Settings</h2>
598597
<span>Match Brackets</span>
599598
</label>
600599

600+
<label class="setting-checkbox">
601+
<input type="checkbox" id="minimap" checked>
602+
<span>Show Minimap</span>
603+
</label>
604+
601605
<label class="setting-checkbox">
602606
<input type="checkbox" id="lintingEnabled">
603607
<span>Enable Linting</span>
@@ -630,7 +634,6 @@ <h2>Editor Settings</h2>
630634
<script src="codemirror/addon/lint/lint.js"></script>
631635
<script src="codemirror/addon/lint/javascript-lint.js"></script>
632636
<script src="codemirror/addon/comment/comment.js"></script>
633-
<script src="codemirror/addon/scroll/simplescrollbars.js"></script>
634637
<script src="codemirror/addon/edit/trailingspace.js"></script>
635638
<script src="codemirror/addon/edit/continuelist.js"></script>
636639
<script src="codemirror/lib/jshint.js"></script>

‎Chrome/editor.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ class ScriptEditor {
181181
"autosaveBtn",
182182
"autosaveBtnText",
183183
"codeEditor",
184+
"minimap",
184185
"gmSetValue",
185186
"gmGetValue",
186187
"gmDeleteValue",

‎Chrome/styles/editor.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,16 @@ html, body {
7272

7373
.CodeMirror-scroll {
7474
padding: var(--space-md) 0;
75+
scrollbar-width: none; /* Firefox */
76+
-ms-overflow-style: none; /* IE and Edge */
7577
}
7678

79+
/* Hide scrollbar for Chrome, Safari and Opera */
80+
.CodeMirror-scroll::-webkit-scrollbar {
81+
display: none;
82+
width: 0;
83+
height: 0;
84+
}
7785

7886
/* ===== EDITOR AREA ===== */
7987
.editor-area {

‎Chrome/utils/editor_managers.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,7 @@ export class SettingsManager extends BaseUIComponent {
352352
lineNumbers: document.getElementById('lineNumbers'),
353353
lineWrapping: document.getElementById('lineWrapping'),
354354
matchBrackets: document.getElementById('matchBrackets'),
355+
minimap: document.getElementById('minimap'),
355356
lintingEnabled: document.getElementById('lintingEnabled'),
356357
autosaveEnabled: document.getElementById('autosaveEnabled')
357358
};
@@ -395,7 +396,7 @@ export class SettingsManager extends BaseUIComponent {
395396
}
396397

397398
// Boolean settings
398-
['lineNumbers', 'lineWrapping', 'matchBrackets'].forEach(setting => {
399+
['lineNumbers', 'lineWrapping', 'matchBrackets', 'minimap'].forEach(setting => {
399400
if (settingsInputs[setting]) {
400401
this.addEventListener(settingsInputs[setting], 'change', () => {
401402
this.emit('settingChanged', {
@@ -480,6 +481,7 @@ export class SettingsManager extends BaseUIComponent {
480481
if (settingsInputs.lineNumbers) settingsInputs.lineNumbers.checked = !!settings.lineNumbers;
481482
if (settingsInputs.lineWrapping) settingsInputs.lineWrapping.checked = !!settings.lineWrapping;
482483
if (settingsInputs.matchBrackets) settingsInputs.matchBrackets.checked = !!settings.matchBrackets;
484+
if (settingsInputs.minimap) settingsInputs.minimap.checked = !!settings.minimap;
483485
if (settingsInputs.lintingEnabled) {
484486
settingsInputs.lintingEnabled.checked = localStorage.getItem('lintingEnabled') === 'true';
485487
}
@@ -510,7 +512,8 @@ export class SettingsManager extends BaseUIComponent {
510512
tabSize: parseInt(settingsInputs.tabSize?.value, 10) || 2,
511513
lineNumbers: !!settingsInputs.lineNumbers?.checked,
512514
lineWrapping: !!settingsInputs.lineWrapping?.checked,
513-
matchBrackets: !!settingsInputs.matchBrackets?.checked
515+
matchBrackets: !!settingsInputs.matchBrackets?.checked,
516+
minimap: !!settingsInputs.minimap?.checked
514517
};
515518

516519
// Save to chrome.storage.local
@@ -558,6 +561,7 @@ export class SettingsManager extends BaseUIComponent {
558561
if (settingsInputs.lineNumbers) settingsInputs.lineNumbers.checked = defaults.lineNumbers;
559562
if (settingsInputs.lineWrapping) settingsInputs.lineWrapping.checked = defaults.lineWrapping;
560563
if (settingsInputs.matchBrackets) settingsInputs.matchBrackets.checked = defaults.matchBrackets;
564+
if (settingsInputs.minimap) settingsInputs.minimap.checked = defaults.minimap;
561565
if (settingsInputs.lintingEnabled) settingsInputs.lintingEnabled.checked = true;
562566
if (settingsInputs.autosaveEnabled) settingsInputs.autosaveEnabled.checked = true;
563567

@@ -575,7 +579,8 @@ export class SettingsManager extends BaseUIComponent {
575579
tabSize: 2,
576580
lineNumbers: true,
577581
lineWrapping: true,
578-
matchBrackets: true
582+
matchBrackets: true,
583+
minimap: true
579584
};
580585
}
581586
}

‎Chrome/utils/editor_settings.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export class CodeEditorManager {
6969
"CodeMirror-foldgutter",
7070
"CodeMirror-lint-markers",
7171
],
72-
scrollbarStyle: "simple",
72+
scrollbarStyle: "native",
7373
extraKeys: this.getEditorKeybindings(),
7474
minimap: this.currentSettings?.minimap !== false ? {
7575
width: 120,

0 commit comments

Comments
 (0)