highlight cmd i onboarding (#105)

* WIP: Walkthrough changes (microsoft#236) * Added walkthrough progress * Added progress for walkthrough * Added todo * enable editorInsets for inline chat (microsoft#253) * Fix .gitmodules * Update code.sh * update submodule to latest tip (microsoft#260) * fix: microsoft#262 prioritize pearai commands (microsoft#264) * fix: microsoft#262 prioritize pearai commands * fix: update priority order and change test case default chord * fix: use keymode.shift * Fixed code version * feat: docs and newchat shortcut on titlebar (microsoft#266) * feat: docs and newchat shortcut on titlebar * typo * Update README.md (microsoft#276) * Shortcut change to resize chat on the app side (microsoft#279) * Shortcut change to resize chat on the app side * Removed test related console log * Updated splitEditor shortcut * update icon and watermark (microsoft#278) * watermarks update * add shortcuts to watermark * titlebar icon change * fix walkthrough * Added product (microsoft#285) Co-authored-by: Nathan A <[email protected]> * set quality:stable (microsoft#267) * update MacOS example in CONTRIBUTING.md file: Packaging step 3 - integrate the submodule (microsoft#228) * update MacOS example in CONTRIBUTING.md file: Packaging step 3 - integrate the submodule * fix constants CAP * PearAI main app welcome page gif fixed (microsoft#286) * Update media paths for welcome page GIFs and GIF themselves. * upload two gifs first * upload one gif first * push again * Fixed walk through (microsoft#288) * Added imports for gif * Added png * Added typo fix * Added png --------- Co-authored-by: Nathan A <[email protected]> * Added to readme (microsoft#295) Co-authored-by: Nathan A <[email protected]> * add hacker theme to pearai (microsoft#300) * Update README.md * Set default theme to PearAI Dark/Light (microsoft#322) * Set default theme to PearAI Dark/Light * Undo not needed solarized file changes * Added auto-updating working client-side (microsoft#340) * Added updating working * Removed configs --------- Co-authored-by: Nathan A <[email protected]> Co-authored-by: Nathan A <[email protected]> * Updated wording (microsoft#341) * Added updating working * Removed configs * Added pearAI online services * Added pearAI online services --------- Co-authored-by: Nathan A <[email protected]> Co-authored-by: Nathan A <[email protected]> * Setup Environment with Space in Path (microsoft#335) * Added v1.1.0 (microsoft#344) Co-authored-by: Nathan A <[email protected]> * Bumped to v1.2.0 * Update README.md * patch-wsl (add vscode commit) (microsoft#348) * Update README.md * If you are looking for commit history, read this please * Updated to v1.3.0 * add pear version in about * Update CONTRIBUTING.md update packaging guide * Update CONTRIBUTING.md update packaging info * Update CONTRIBUTING.md * Git submodule commit update (#66) * Bumped to v1.4.0 * PearAI Overlay (#67) * PearAI Overlay * Uncomment layout * Remove comment * Prevent overlay open on every startup + background default color * Fix overlay bug * Border radius * Bumped to v1.4.1 * Fix overlay popping up for half a second at startup (#77) * Console logs for debugging trace of overlay startup * Revert "Console logs for debugging trace of overlay startup" This reverts commit 70fa3bc. * Fix overlay appearing for half a second on startup * Bumped versions (#80) Co-authored-by: nang-dev <[email protected]> * Handle overlay integration shortcuts (#84) * feat: new window watermark (#87) * Added darken and click outside overlay. todo for not closing * Added min for the auxbar (#94) Co-authored-by: nang-dev <[email protected]> * feat: overlay-lock (#92) * Added remove release notes (#96) Co-authored-by: nang-dev <[email protected]> * remove unused vars (#97) * Bumped to v1.4.4 * Default close sidebar for new window (#98) * Add highlight of quickinput during cmd+i step * clean up * package.json * remove transition --------- Co-authored-by: Nang <[email protected]> Co-authored-by: Himanshu <[email protected]> Co-authored-by: Duke Pan <[email protected]> Co-authored-by: Maximiliano Farfan <[email protected]> Co-authored-by: Nathan A <[email protected]> Co-authored-by: Brian <[email protected]> Co-authored-by: Andrew Hopkins <[email protected]> Co-authored-by: Nathan A <[email protected]> Co-authored-by: Ashvin Nihalani <[email protected]> Co-authored-by: nang-dev <[email protected]>
trypear · Nov 8, 2024 · db263db · db263db
1 parent f614d2e
commit db263db
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 0 deletions.
diff --git a/src/vs/workbench/browser/parts/overlay/onboardingShadow/shadowOverlayService.ts b/src/vs/workbench/browser/parts/overlay/onboardingShadow/shadowOverlayService.ts
@@ -0,0 +1,94 @@
+import { createDecorator } from 'vs/platform/instantiation/common/instantiation';
+import { registerSingleton, InstantiationType } from 'vs/platform/instantiation/common/extensions';
+import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
+import { CommandsRegistry } from 'vs/platform/commands/common/commands';
+
+export const IShadowOverlayService = createDecorator<IShadowOverlayService>('shadowOverlayService');
+
+export interface IShadowOverlayService extends IDisposable {
+    readonly _serviceBrand: undefined;
+
+    highlight(elements: string[]): void;
+	restoreStyles(elements: string[]): void;
+}
+
+
+export class ShadowOverlayService extends Disposable implements IShadowOverlayService {
+    declare readonly _serviceBrand: undefined;
+	private highlightedElements: Map<string, {
+        position: string;
+        zIndex: string;
+        isolation: string;
+        pointerEvents: string;
+        backgroundColor: string;
+        boxShadow: string;
+    }> = new Map();
+
+    constructor(
+    ) {
+		super();
+		this.registerCommands();
+	}
+
+	private registerCommands(): void {
+		CommandsRegistry.registerCommand('pearai.highlightElements', (accessor, ...args) => {
+
+			const selectors = args[0] as string[];  // array of CSS selectors
+			this.highlight(selectors);
+		});
+
+		CommandsRegistry.registerCommand('pearai.removeHighlight', (accessor, ...args) => {
+			const selectors = args[0] as string[];  // array of CSS selectors
+			 // Convert selectors to elements
+			this.restoreStyles(selectors);
+		});
+	}
+
+	restoreStyles(selectors: string[]): void {
+		selectors.forEach(selector => {
+			const originalStyles = this.highlightedElements.get(selector);
+
+			const element = document.querySelector(selector) as HTMLElement
+
+			if (originalStyles) {
+				element.style.position = originalStyles.position;
+				element.style.zIndex = originalStyles.zIndex;
+				element.style.isolation = originalStyles.isolation;
+				element.style.pointerEvents = originalStyles.pointerEvents;
+				element.style.backgroundColor = originalStyles.backgroundColor;
+				element.style.boxShadow = originalStyles.boxShadow;
+
+				// Remove this element from the tracked elements
+				this.highlightedElements.delete(selector);
+			}
+		});
+	}
+
+	highlight(selectors: string[]): void {
+        selectors.forEach(selector => {
+            if (selector) {
+				const element = document.querySelector(selector) as HTMLElement
+
+				// save original styles
+				if (!this.highlightedElements.has(selector)) {
+                    this.highlightedElements.set(selector, {
+                        position: element.style.position,
+                        zIndex: element.style.zIndex,
+                        isolation: element.style.isolation,
+                        pointerEvents: element.style.pointerEvents,
+                        backgroundColor: element.style.backgroundColor,
+                        boxShadow: element.style.boxShadow,
+                    });
+                }
+                element.style.position = 'absolute';
+                element.style.zIndex = '3000';
+				element.style.isolation = 'isolate';
+				element.style.pointerEvents = 'auto';
+				element.style.backgroundColor = 'transparent';
+            	element.style.boxShadow = '0 0 0 9999px rgba(0, 0, 0, 0.6)';
+            }
+        });
+    }
+}
+
+registerSingleton(IShadowOverlayService, ShadowOverlayService, InstantiationType.Eager,);
diff --git a/src/vs/workbench/browser/workbench.ts b/src/vs/workbench/browser/workbench.ts
@@ -51,6 +51,7 @@ import { setProgressAcccessibilitySignalScheduler } from 'vs/base/browser/ui/pro
 import { AccessibleViewRegistry } from 'vs/platform/accessibility/browser/accessibleViewRegistry';
 import { NotificationAccessibleView } from 'vs/workbench/browser/parts/notifications/notificationAccessibleView';
 import { IPearOverlayService } from 'vs/workbench/browser/parts/overlay/pearOverlayService';
+import { IShadowOverlayService } from 'vs/workbench/browser/parts/overlay/onboardingShadow/shadowOverlayService';
 
 export interface IWorkbenchOptions {
 
@@ -380,6 +381,11 @@ export class Workbench extends Layout {
 				});
 			}
 
+			// instantiate highlighting
+			instantiationService.invokeFunction(accessor => {
+				accessor.get(IShadowOverlayService);
+			});
+
 			mark(`code/willCreatePart/${id}`);
 			this.getPart(id).create(partContainer, options);
 			mark(`code/didCreatePart/${id}`);