From f395f02bb2032a92e96d41caf193bcccb722982c Mon Sep 17 00:00:00 2001 From: John Pan Date: Wed, 6 Nov 2024 17:49:42 -0800 Subject: [PATCH] highlight cmd i onboarding (#105) * WIP: Walkthrough changes (#236) * Added walkthrough progress * Added progress for walkthrough * Added todo * enable editorInsets for inline chat (#253) * Fix .gitmodules * Update code.sh * update submodule to latest tip (#260) * fix: #262 prioritize pearai commands (#264) * fix: #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 (#266) * feat: docs and newchat shortcut on titlebar * typo * Update README.md (#276) * Shortcut change to resize chat on the app side (#279) * Shortcut change to resize chat on the app side * Removed test related console log * Updated splitEditor shortcut * update icon and watermark (#278) * watermarks update * add shortcuts to watermark * titlebar icon change * fix walkthrough * Added product (#285) Co-authored-by: Nathan A * set quality:stable (#267) * update MacOS example in CONTRIBUTING.md file: Packaging step 3 - integrate the submodule (#228) * update MacOS example in CONTRIBUTING.md file: Packaging step 3 - integrate the submodule * fix constants CAP * PearAI main app welcome page gif fixed (#286) * Update media paths for welcome page GIFs and GIF themselves. * upload two gifs first * upload one gif first * push again * Fixed walk through (#288) * Added imports for gif * Added png * Added typo fix * Added png --------- Co-authored-by: Nathan A * Added to readme (#295) Co-authored-by: Nathan A * add hacker theme to pearai (#300) * Update README.md * Set default theme to PearAI Dark/Light (#322) * Set default theme to PearAI Dark/Light * Undo not needed solarized file changes * Added auto-updating working client-side (#340) * Added updating working * Removed configs --------- Co-authored-by: Nathan A Co-authored-by: Nathan A * Updated wording (#341) * Added updating working * Removed configs * Added pearAI online services * Added pearAI online services --------- Co-authored-by: Nathan A Co-authored-by: Nathan A * Setup Environment with Space in Path (#335) * Added v1.1.0 (#344) Co-authored-by: Nathan A * Bumped to v1.2.0 * Update README.md * patch-wsl (add vscode commit) (#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 70fa3bc021bcac48bbd4a387f0c1bc60ff9c4d27. * Fix overlay appearing for half a second on startup * Bumped versions (#80) Co-authored-by: nang-dev * 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 * feat: overlay-lock (#92) * Added remove release notes (#96) Co-authored-by: nang-dev * 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 Co-authored-by: Himanshu Co-authored-by: Duke Pan <59063950+Fryingpannn@users.noreply.github.com> Co-authored-by: Maximiliano Farfan <72162955+MaxFSP@users.noreply.github.com> Co-authored-by: Nathan A Co-authored-by: Brian Co-authored-by: Andrew Hopkins Co-authored-by: Nathan A Co-authored-by: Ashvin Nihalani Co-authored-by: nang-dev --- .../onboardingShadow/shadowOverlayService.ts | 94 +++++++++++++++++++ src/vs/workbench/browser/workbench.ts | 6 ++ 2 files changed, 100 insertions(+) create mode 100644 src/vs/workbench/browser/parts/overlay/onboardingShadow/shadowOverlayService.ts diff --git a/src/vs/workbench/browser/parts/overlay/onboardingShadow/shadowOverlayService.ts b/src/vs/workbench/browser/parts/overlay/onboardingShadow/shadowOverlayService.ts new file mode 100644 index 0000000000000..c62c281361eae --- /dev/null +++ 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('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 = 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 index 0885c15b572f1..2a316d073f1d0 100644 --- 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}`);