From 602c37b40e11cc85c85407074b5cf73a3a7bbd52 Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Fri, 10 Nov 2023 22:53:51 +0000
Subject: [PATCH] Prevent listing/icon jitter:

- attach the icon before the crumbs rather than within, so that it
  is never removed and just position it with CSS; this eliminates
  the need for mutation observer and throttling
- improve performance of `hasFavorite` and `isVisible` checks by
  skipping sorting of items when querying for visible items
- reduce CSS selector complexity for svg icons
- remove unnecessary style rules
- add class names needed for button hover
- mnt: replace deprecated `toArray()` use with `Array.from`
---
 package.json       |  2 --
 src/components.tsx |  2 +-
 src/index.tsx      | 27 +++++++++------------------
 src/manager.ts     | 26 ++++++++++++++------------
 style/base.css     | 27 ++++++++++++++++++---------
 yarn.lock          |  6 ++----
 6 files changed, 44 insertions(+), 46 deletions(-)

diff --git a/package.json b/package.json
index 669821c..29397c7 100644
--- a/package.json
+++ b/package.json
@@ -77,10 +77,8 @@
         "@jupyterlab/services": "^7.0.5",
         "@jupyterlab/settingregistry": "^4.0.5",
         "@jupyterlab/ui-components": "^4.0.5",
-        "@lumino/algorithm": "^2.0.0",
         "@lumino/commands": "^2.0.1",
         "@lumino/coreutils": "^2.0.1",
-        "@lumino/polling": "^2.0.0",
         "@lumino/signaling": "^2.0.0",
         "@lumino/widgets": "^2.0.1"
     },
diff --git a/src/components.tsx b/src/components.tsx
index 7155b1c..77b9dfb 100644
--- a/src/components.tsx
+++ b/src/components.tsx
@@ -133,7 +133,7 @@ export const FavoritesBreadCrumbs: React.FunctionComponent<
         const icon = getFavoritesIcon(isFavorite);
         return (
           <button
-            className="jp-ToolbarButtonComponent"
+            className="jp-ToolbarButtonComponent jp-Button jp-mod-minimal"
             title={getPinnerActionDescription(isFavorite)}
             onClick={e => {
               props.handleClick(currentPath);
diff --git a/src/index.tsx b/src/index.tsx
index 79f7c12..2f9fa04 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,8 +10,6 @@ import {
 import { IMainMenu } from '@jupyterlab/mainmenu';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ReactWidget, UseSignal, folderIcon } from '@jupyterlab/ui-components';
-import { toArray } from '@lumino/algorithm';
-import { Throttler } from '@lumino/polling';
 import { Menu, PanelLayout, Widget } from '@lumino/widgets';
 import React from 'react';
 import { FavoritesBreadCrumbs, FavoritesWidget } from './components';
@@ -30,11 +28,15 @@ export { IFavorites } from './token';
 const BREADCRUMBS_CLASS = 'jp-FileBrowser-crumbs';
 
 /**
- * The class name for the node containing the FileBrowser BreadCrumbs favorite icon.  This node
- * is also responsible for click actions on the icon.
+ * The class name for the node containing the FileBrowser BreadCrumbs favorite icon.
  */
 const FAVORITE_ITEM_PINNER_CLASS = 'jp-Favorites-pinner';
 
+/**
+ * Modifier class added to breadcrumbs to ensure the favourite icon has enough spacing.
+ */
+const BREADCUMBS_FAVORITES_CLASS = 'jp-Favorites-crumbs';
+
 /**
  * Initialization data for the jupyterlab-favorites extension.
  */
@@ -108,19 +110,8 @@ const favorites: JupyterFrontEndPlugin<IFavorites> = {
           );
           favoriteIcon.addClass(FAVORITE_ITEM_PINNER_CLASS);
           Widget.attach(favoriteIcon, breadcrumbs as HTMLElement);
-          const throttler = new Throttler(() => {
-            breadcrumbs.insertAdjacentElement('beforeend', favoriteIcon.node);
-          });
-          const observer = new MutationObserver(() => {
-            throttler.invoke();
-          });
-
-          observer.observe(breadcrumbs, { childList: true });
-
-          filebrowser.disposed.connect(() => {
-            throttler.dispose();
-            observer.disconnect();
-          });
+          breadcrumbs.insertAdjacentElement('beforebegin', favoriteIcon.node);
+          breadcrumbs.classList.add(BREADCUMBS_FAVORITES_CLASS);
         };
 
         filebrowser.model.pathChanged.connect(initializeBreadcrumbsIcon);
@@ -134,7 +125,7 @@ const favorites: JupyterFrontEndPlugin<IFavorites> = {
       if (!widget) {
         return [];
       }
-      return toArray(widget.selectedItems());
+      return Array.from(widget.selectedItems());
     };
     const { tracker } = factory;
 
diff --git a/src/manager.ts b/src/manager.ts
index 83a4a08..987950c 100644
--- a/src/manager.ts
+++ b/src/manager.ts
@@ -79,11 +79,11 @@ export class FavoritesManager {
   }
 
   isVisible(): boolean {
-    return this._showWidget && this.visibleFavorites().length > 0;
+    return this._showWidget && this.visibleFavorites(false).length > 0;
   }
 
   hasFavorite(path: string): boolean {
-    return this.visibleFavorites().findIndex(f => f.path === path) >= 0;
+    return this.visibleFavorites(false).findIndex(f => f.path === path) >= 0;
   }
 
   handleClick(favorite: IFavorites.Favorite): void {
@@ -161,16 +161,18 @@ export class FavoritesManager {
     }
   }
 
-  visibleFavorites(): IFavorites.Favorite[] {
-    return this.favorites
-      .filter(f => !f.hidden)
-      .sort((a, b) => {
-        if (a.contentType === b.contentType) {
-          return getName(a.path) <= getName(b.path) ? -1 : 1;
-        } else {
-          return a.contentType < b.contentType ? -1 : 1;
-        }
-      });
+  visibleFavorites(sort: boolean = true): IFavorites.Favorite[] {
+    const filtered = this.favorites.filter(f => !f.hidden);
+    if (!sort) {
+      return filtered;
+    }
+    return filtered.sort((a, b) => {
+      if (a.contentType === b.contentType) {
+        return getName(a.path) <= getName(b.path) ? -1 : 1;
+      } else {
+        return a.contentType < b.contentType ? -1 : 1;
+      }
+    });
   }
 
   private clearFavoritesOrRestoreDefaults(hidden: boolean) {
diff --git a/style/base.css b/style/base.css
index a9487f5..87d21c2 100644
--- a/style/base.css
+++ b/style/base.css
@@ -1,15 +1,24 @@
 .jp-Favorites-pinner {
-  float: right;
-  cursor: pointer;
+  position: absolute;
+  right: 0;
+  overflow: visible;
+
+  /* aimed to match the upstream breadcrumbs */
+  margin: 8px 12px;
 }
 
-.jp-Favorites-BreadCrumbs-Icon svg {
-  border-radius: var(--jp-border-radius);
-  cursor: pointer;
+.jp-Favorites-pinner > .jp-ToolbarButtonComponent {
+  height: 24px;
+  margin-top: -5px;
+}
+
+.jp-Favorites-crumbs {
+  margin-right: 40px;
+}
+
+.jp-Favorites-BreadCrumbs-Icon,
+.jp-Favorites-BreadCrumbs-Icon > svg {
   height: 16px;
-  margin: 0 2px;
-  padding: 0 2px;
-  vertical-align: middle;
   width: 16px;
 }
 
@@ -45,7 +54,7 @@
   background-color: var(--jp-layout-color2);
 }
 
-.jp-Favorites-itemIcon svg {
+.jp-Favorites-itemIcon > svg {
   display: block;
   height: 16px;
   margin: 0 5px;
diff --git a/yarn.lock b/yarn.lock
index 08af28e..8773532 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -191,10 +191,8 @@ __metadata:
     "@jupyterlab/services": ^7.0.5
     "@jupyterlab/settingregistry": ^4.0.5
     "@jupyterlab/ui-components": ^4.0.5
-    "@lumino/algorithm": ^2.0.0
     "@lumino/commands": ^2.0.1
     "@lumino/coreutils": ^2.0.1
-    "@lumino/polling": ^2.0.0
     "@lumino/signaling": ^2.0.0
     "@lumino/widgets": ^2.0.1
     "@types/json-schema": ^7.0.11
@@ -674,7 +672,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lumino/algorithm@npm:^2.0.0, @lumino/algorithm@npm:^2.0.1":
+"@lumino/algorithm@npm:^2.0.1":
   version: 2.0.1
   resolution: "@lumino/algorithm@npm:2.0.1"
   checksum: cbf7fcf6ee6b785ea502cdfddc53d61f9d353dcb9659343511d5cd4b4030be2ff2ca4c08daec42f84417ab0318a3d9972a17319fa5231693e109ab112dcf8000
@@ -766,7 +764,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lumino/polling@npm:^2.0.0, @lumino/polling@npm:^2.1.2":
+"@lumino/polling@npm:^2.1.2":
   version: 2.1.2
   resolution: "@lumino/polling@npm:2.1.2"
   dependencies: