@codingame/monaco-vscode-api 2.0.3 → 2.1.0

package/vscode/src/vs/base/browser/ui/list/listView.js

@@ -729,7 +729,8 @@ class ListView {
         const index = this.getItemIndexFromEventTarget(browserEvent.target || null);
         const item = typeof index === 'undefined' ? undefined : this.items[index];
         const element = item && item.element;
-        return { browserEvent, index, element };
+        const sector = this.getTargetSector(browserEvent, index);
+        return { browserEvent, index, element, sector };
     }
     onScroll(e) {
         try {
@@ -803,14 +804,14 @@ class ListView {
                 this.currentDragData = ( new NativeDragAndDropData());
             }
         }
-        const result = this.dnd.onDragOver(this.currentDragData, event.element, event.index, event.browserEvent);
+        const result = this.dnd.onDragOver(this.currentDragData, event.element, event.index, event.sector, event.browserEvent);
         this.canDrop = typeof result === 'boolean' ? result : result.accept;
         if (!this.canDrop) {
             this.currentDragFeedback = undefined;
             this.currentDragFeedbackDisposable.dispose();
             return false;
         }
-        event.browserEvent.dataTransfer.dropEffect = ((typeof result !== 'boolean' && result.effect === 0) ) ? 'copy' : 'move';
+        event.browserEvent.dataTransfer.dropEffect = ((typeof result !== 'boolean' && result.effect?.type === 0) ) ? 'copy' : 'move';
         let feedback;
         if (typeof result !== 'boolean' && result.feedback) {
             feedback = result.feedback;
@@ -825,30 +826,41 @@ class ListView {
         }
         feedback = distinct(feedback).filter(i => i >= -1 && i < this.length).sort((a, b) => a - b);
         feedback = feedback[0] === -1 ? [-1] : feedback;
-        if (equalsDragFeedback(this.currentDragFeedback, feedback)) {
+        let dragOverEffectPosition = typeof result !== 'boolean' && result.effect && result.effect.position ? result.effect.position : "drop-target" ;
+        if (equalsDragFeedback(this.currentDragFeedback, feedback) && this.currentDragFeedbackPosition === dragOverEffectPosition) {
             return true;
         }
         this.currentDragFeedback = feedback;
+        this.currentDragFeedbackPosition = dragOverEffectPosition;
         this.currentDragFeedbackDisposable.dispose();
         if (feedback[0] === -1) {
-            this.domNode.classList.add('drop-target');
-            this.rowsContainer.classList.add('drop-target');
+            this.domNode.classList.add(dragOverEffectPosition);
+            this.rowsContainer.classList.add(dragOverEffectPosition);
             this.currentDragFeedbackDisposable = toDisposable(() => {
-                this.domNode.classList.remove('drop-target');
-                this.rowsContainer.classList.remove('drop-target');
+                this.domNode.classList.remove(dragOverEffectPosition);
+                this.rowsContainer.classList.remove(dragOverEffectPosition);
             });
         }
         else {
+            if (feedback.length > 1 && dragOverEffectPosition !== "drop-target" ) {
+                throw new Error('Can\'t use multiple feedbacks with position different than \'over\'');
+            }
+            if (dragOverEffectPosition === "drop-target-after" ) {
+                if (feedback[0] < this.length - 1) {
+                    feedback[0] += 1;
+                    dragOverEffectPosition = "drop-target-before" ;
+                }
+            }
             for (const index of feedback) {
                 const item = this.items[index];
                 item.dropTarget = true;
-                item.row?.domNode.classList.add('drop-target');
+                item.row?.domNode.classList.add(dragOverEffectPosition);
             }
             this.currentDragFeedbackDisposable = toDisposable(() => {
                 for (const index of feedback) {
                     const item = this.items[index];
                     item.dropTarget = false;
-                    item.row?.domNode.classList.remove('drop-target');
+                    item.row?.domNode.classList.remove(dragOverEffectPosition);
                 }
             });
         }
@@ -876,7 +888,7 @@ class ListView {
         }
         event.browserEvent.preventDefault();
         dragData.update(event.browserEvent.dataTransfer);
-        this.dnd.drop(dragData, event.element, event.index, event.browserEvent);
+        this.dnd.drop(dragData, event.element, event.index, event.sector, event.browserEvent);
     }
     onDragEnd(event) {
         this.canDrop = false;
@@ -889,6 +901,7 @@ class ListView {
     }
     clearDragOverFeedback() {
         this.currentDragFeedback = undefined;
+        this.currentDragFeedbackPosition = undefined;
         this.currentDragFeedbackDisposable.dispose();
         this.currentDragFeedbackDisposable = Disposable.None;
     }
@@ -926,6 +939,13 @@ class ListView {
             this.dragOverAnimationDisposable = undefined;
         }
     }
+    getTargetSector(browserEvent, targetIndex) {
+        if (targetIndex === undefined) {
+            return undefined;
+        }
+        const relativePosition = browserEvent.offsetY / this.items[targetIndex].size;
+        return Math.floor(relativePosition / 0.25);
+    }
     getItemIndexFromEventTarget(target) {
         const scrollableElement = this.scrollableElement.getDomNode();
         let element = target;

package/vscode/src/vs/base/browser/ui/list/listWidget.js

@@ -80,14 +80,12 @@ class Trait {
     }
     constructor(_trait) {
         this._trait = _trait;
-        this.length = 0;
         this.indexes = [];
         this.sortedIndexes = [];
         this._onChange = ( new Emitter());
         this.onChange = this._onChange.event;
     }
     splice(start, deleteCount, elements) {
-        deleteCount = Math.max(0, Math.min(deleteCount, this.length - start));
         const diff = elements.length - deleteCount;
         const end = start + deleteCount;
         const sortedIndexes = [];
@@ -103,14 +101,8 @@ class Trait {
         while (i < this.sortedIndexes.length && this.sortedIndexes[i] >= end) {
             sortedIndexes.push(this.sortedIndexes[i++] + diff);
         }
-        const length = this.length + diff;
-        if (this.sortedIndexes.length > 0 && sortedIndexes.length === 0 && length > 0) {
-            const first = this.sortedIndexes.find(index => index >= start) ?? length - 1;
-            sortedIndexes.push(Math.min(first, length - 1));
-        }
         this.renderer.splice(start, deleteCount, elements.length);
         this._set(sortedIndexes, sortedIndexes);
-        this.length = length;
     }
     renderIndex(index, container) {
         container.classList.toggle(this._trait, this.contains(index));
@@ -207,6 +199,9 @@ function isActionItem(e) {
 function isStickyScrollElement(e) {
     return isListElementDescendantOfClass(e, 'monaco-tree-sticky-row');
 }
+function isStickyScrollContainer(e) {
+    return e.classList.contains('monaco-tree-sticky-container');
+}
 function isButton(e) {
     if ((e.tagName === 'A' && e.classList.contains('monaco-button')) ||
         (e.tagName === 'DIV' && e.classList.contains('monaco-button-dropdown'))) {
@@ -735,13 +730,27 @@ class DefaultStyleController {
         if (styles.listHoverOutline) {
             content.push(`.monaco-list${suffix} .monaco-list-row:hover { outline: 1px dashed ${styles.listHoverOutline}; outline-offset: -1px; }`);
         }
-        if (styles.listDropBackground) {
+        if (styles.listDropOverBackground) {
             content.push(`
 				.monaco-list${suffix}.drop-target,
 				.monaco-list${suffix} .monaco-list-rows.drop-target,
-				.monaco-list${suffix} .monaco-list-row.drop-target { background-color: ${styles.listDropBackground} !important; color: inherit !important; }
+				.monaco-list${suffix} .monaco-list-row.drop-target { background-color: ${styles.listDropOverBackground} !important; color: inherit !important; }
 			`);
         }
+        if (styles.listDropBetweenBackground) {
+            content.push(`
+			.monaco-list${suffix} .monaco-list-rows.drop-target-before .monaco-list-row:first-child::before,
+			.monaco-list${suffix} .monaco-list-row.drop-target-before::before {
+				content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 1px;
+				background-color: ${styles.listDropBetweenBackground};
+			}`);
+            content.push(`
+			.monaco-list${suffix} .monaco-list-rows.drop-target-after .monaco-list-row:last-child::after,
+			.monaco-list${suffix} .monaco-list-row.drop-target-after::after {
+				content: ""; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 1px;
+				background-color: ${styles.listDropBetweenBackground};
+			}`);
+        }
         if (styles.tableColumnsBorder) {
             content.push(`
 				.monaco-table > .monaco-split-view2,
@@ -780,7 +789,8 @@ const unthemedListStyles = {
     listInactiveSelectionBackground: '#3F3F46',
     listInactiveSelectionIconForeground: '#FFFFFF',
     listHoverBackground: '#2A2D2E',
-    listDropBackground: '#383B3D',
+    listDropOverBackground: '#383B3D',
+    listDropBetweenBackground: '#EEEEEE',
     treeIndentGuidesStroke: '#a9a9a9',
     treeInactiveIndentGuidesStroke: ( ( ( Color.fromHex('#a9a9a9')).transparent(0.4)).toString()),
     tableColumnsBorder: ( ( ( Color.fromHex('#cccccc')).transparent(0.2)).toString()),
@@ -955,8 +965,8 @@ class ListViewDragAndDrop {
     onDragStart(data, originalEvent) {
         this.dnd.onDragStart?.(data, originalEvent);
     }
-    onDragOver(data, targetElement, targetIndex, originalEvent) {
-        return this.dnd.onDragOver(data, targetElement, targetIndex, originalEvent);
+    onDragOver(data, targetElement, targetIndex, targetSector, originalEvent) {
+        return this.dnd.onDragOver(data, targetElement, targetIndex, targetSector, originalEvent);
     }
     onDragLeave(data, targetElement, targetIndex, originalEvent) {
         this.dnd.onDragLeave?.(data, targetElement, targetIndex, originalEvent);
@@ -964,8 +974,8 @@ class ListViewDragAndDrop {
     onDragEnd(originalEvent) {
         this.dnd.onDragEnd?.(originalEvent);
     }
-    drop(data, targetElement, targetIndex, originalEvent) {
-        this.dnd.drop(data, targetElement, targetIndex, originalEvent);
+    drop(data, targetElement, targetIndex, targetSector, originalEvent) {
+        this.dnd.drop(data, targetElement, targetIndex, targetSector, originalEvent);
     }
     dispose() {
         this.dnd.dispose();
@@ -1148,6 +1158,9 @@ class List {
     indexOf(element) {
         return this.view.indexOf(element);
     }
+    indexAt(position) {
+        return this.view.indexAt(position);
+    }
     get length() {
         return this.view.length;
     }
@@ -1292,9 +1305,10 @@ class List {
             }
         }
     }
-    async focusPreviousPage(browserEvent, filter) {
+    async focusPreviousPage(browserEvent, filter, getPaddingTop = () => 0) {
         let firstPageIndex;
-        const scrollTop = this.view.getScrollTop();
+        const paddingTop = getPaddingTop();
+        const scrollTop = this.view.getScrollTop() + paddingTop;
         if (scrollTop === 0) {
             firstPageIndex = this.view.indexAt(scrollTop);
         }
@@ -1313,11 +1327,11 @@ class List {
         }
         else {
             const previousScrollTop = scrollTop;
-            this.view.setScrollTop(scrollTop - this.view.renderHeight);
-            if (this.view.getScrollTop() !== previousScrollTop) {
+            this.view.setScrollTop(scrollTop - this.view.renderHeight - paddingTop);
+            if (this.view.getScrollTop() + getPaddingTop() !== previousScrollTop) {
                 this.setFocus([]);
                 await timeout(0);
-                await this.focusPreviousPage(browserEvent, filter);
+                await this.focusPreviousPage(browserEvent, filter, getPaddingTop);
             }
         }
     }
@@ -1485,4 +1499,4 @@ List.__decorator = ( __decorate([
 List.__decorator = ( __decorate([
     memoize
 ], List.prototype, "onDidBlur", null));
-export { DefaultKeyboardNavigationDelegate, DefaultStyleController, List, MouseController, TypeNavigationMode, isActionItem, isButton, isInputElement, isMonacoCustomToggle, isMonacoEditor, isSelectionRangeChangeEvent, isSelectionSingleChangeEvent, isStickyScrollElement, unthemedListStyles };
+export { DefaultKeyboardNavigationDelegate, DefaultStyleController, List, MouseController, TypeNavigationMode, isActionItem, isButton, isInputElement, isMonacoCustomToggle, isMonacoEditor, isSelectionRangeChangeEvent, isSelectionSingleChangeEvent, isStickyScrollContainer, isStickyScrollElement, unthemedListStyles };

package/vscode/src/vs/base/browser/ui/menu/menu.js

@@ -154,11 +154,20 @@ class Menu extends ActionBar {
         }));
         const window = getWindow(container);
         menuElement.style.maxHeight = `${Math.max(10, window.innerHeight - container.getBoundingClientRect().top - 35)}px`;
-        actions = actions.filter(a => {
+        actions = actions.filter((a, idx) => {
             if (options.submenuIds?.has(a.id)) {
                 console.warn(`Found submenu cycle: ${a.id}`);
                 return false;
             }
+            if (a instanceof Separator) {
+                if (idx === actions.length - 1 || idx === 0) {
+                    return false;
+                }
+                const prevAction = actions[idx - 1];
+                if (prevAction instanceof Separator) {
+                    return false;
+                }
+            }
             return true;
         });
         this.push(actions, { icon: true, label: true, isMenu: true });

package/vscode/src/vs/base/browser/ui/menu/menubar.js

@@ -11,11 +11,12 @@ import { Codicon } from '../../../common/codicons.js';
 import { ThemeIcon } from '../../../common/themables.js';
 import { Emitter } from '../../../common/event.js';
 import { ScanCodeUtils } from '../../../common/keyCodes.js';
-import { Disposable, dispose } from '../../../common/lifecycle.js';
+import { Disposable, DisposableStore, dispose } from '../../../common/lifecycle.js';
 import { isMacintosh } from '../../../common/platform.js';
 import { escape, ltrim, rtrim } from '../../../common/strings.js';
 import './menubar.css.js';
 import { localizeWithPath } from '../../../../nls.js';
+import { mainWindow } from '../../window.js';
 const $ = $$1;
 var MenubarState;
 ( (function(MenubarState) {
@@ -38,6 +39,7 @@ class MenuBar extends Disposable {
         this.updatePending = false;
         this.numMenusShown = 0;
         this.overflowLayoutScheduled = undefined;
+        this.menuDisposables = this._register(( new DisposableStore()));
         this.container.setAttribute('role', 'menubar');
         if (this.isCompact) {
             this.container.classList.add('compact');
@@ -579,6 +581,7 @@ class MenuBar extends Disposable {
                     this.showMenubar();
                 }
                 if (this.focusedMenu) {
+                    this.cleanupCustomMenu();
                     this.showCustomMenu(this.focusedMenu.index, this.openedViaKeyboard);
                 }
                 break;
@@ -605,7 +608,7 @@ class MenuBar extends Disposable {
         if (this.options.visibility === 'toggle' || this.options.visibility === 'hidden') {
             this.focusState = MenubarState.HIDDEN;
         }
-        else if (this.options.visibility === 'classic' && isFullscreen()) {
+        else if (this.options.visibility === 'classic' && isFullscreen(mainWindow)) {
             this.focusState = MenubarState.HIDDEN;
         }
         else {
@@ -778,6 +781,7 @@ class MenuBar extends Disposable {
             this.focusedMenu.widget?.dispose();
             this.focusedMenu = { index: this.focusedMenu.index };
         }
+        this.menuDisposables.clear();
     }
     showCustomMenu(menuIndex, selectFirst = true) {
         const actualMenuIndex = menuIndex >= this.numMenusShown ? MenuBar.OVERFLOW_INDEX : menuIndex;
@@ -811,8 +815,8 @@ class MenuBar extends Disposable {
             expandDirection: this.isCompact ? this.options.compactMode : Direction.Right,
             useEventAsContext: true
         };
-        const menuWidget = this._register(( new Menu(menuHolder, customMenu.actions, menuOptions, this.menuStyle)));
-        this._register(menuWidget.onDidCancel(() => {
+        const menuWidget = this.menuDisposables.add(( new Menu(menuHolder, customMenu.actions, menuOptions, this.menuStyle)));
+        this.menuDisposables.add(menuWidget.onDidCancel(() => {
             this.focusState = MenubarState.FOCUSED;
         }));
         if (actualMenuIndex !== menuIndex) {

package/vscode/src/vs/base/browser/ui/scrollbar/scrollableElement.js

@@ -1,4 +1,4 @@
-import { getZoomFactor } from '../../browser.js';
+import { isChrome, getZoomFactor } from '../../browser.js';
 import { getWindow, addDisposableListener, EventType, scheduleAtNextAnimationFrame } from '../../dom.js';
 import { createFastDomNode } from '../../fastDomNode.js';
 import { StandardWheelEvent } from '../../mouseEvent.js';
@@ -8,7 +8,7 @@ import { Widget } from '../widget.js';
 import { TimeoutTimer } from '../../../common/async.js';
 import { Emitter } from '../../../common/event.js';
 import { dispose } from '../../../common/lifecycle.js';
-import { isWindows, isLinux, isMacintosh } from '../../../common/platform.js';
+import { isMacintosh } from '../../../common/platform.js';
 import { Scrollable } from '../../../common/scrollable.js';
 import './media/scrollbars.css.js';
 const HIDE_TIMEOUT = 500;
@@ -50,9 +50,10 @@ class MouseWheelClassifier {
         return (score <= 0.5);
     }
     acceptStandardWheelEvent(e) {
-        const osZoomFactor = getWindow(e.browserEvent).devicePixelRatio / getZoomFactor();
-        if (isWindows || isLinux) {
-            this.accept(Date.now(), e.deltaX / osZoomFactor, e.deltaY / osZoomFactor);
+        if (isChrome) {
+            const targetWindow = getWindow(e.browserEvent);
+            const pageZoomFactor = getZoomFactor(targetWindow);
+            this.accept(Date.now(), e.deltaX * pageZoomFactor, e.deltaY * pageZoomFactor);
         }
         else {
             this.accept(Date.now(), e.deltaX, e.deltaY);