@opensumi/ide-core-browser 2.23.4 → 2.23.5-next-1682046023.0

package/lib/utils/label.js

@@ -2,33 +2,43 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformLabelWithCodicon = void 0;
 const tslib_1 = require("tslib");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = tslib_1.__importDefault(require("react"));
 const icon_1 = require("@opensumi/ide-components/lib/icon/icon");
 const ide_core_common_1 = require("@opensumi/ide-core-common");
 const SEPERATOR = ' ';
-function transformLabelWithCodicon(label, iconStyles = {}, transformer, renderText) {
+function transformLabelWithCodicon(label, iconStyleProps = {}, transformer, renderText) {
     const ICON_REGX = /\$\(([a-z.]+\/)?([a-z-]+)(~[a-z]+)?\)/gi;
     const ICON_WITH_ANIMATE_REGX = /\$\(([a-z.]+\/)?([a-z-]+)~([a-z]+)\)/gi;
-    return label.split(SEPERATOR).map((e, index) => {
+    // some string like $() $(~spin)
+    const ICON_ERROR_REGX = /\$\(([a-z.]+\/)?([a-z-]+)?(~[a-z]+)?\)/gi;
+    const generateIconStyle = (icon, styleProps) => typeof styleProps === 'string' ? { className: (0, classnames_1.default)(icon, styleProps) } : { className: icon, style: styleProps };
+    const splitLabel = label.split(SEPERATOR);
+    const length = splitLabel.length;
+    return splitLabel.map((e, index) => {
         if (!transformer) {
             return e;
         }
         const icon = transformer(e);
         if (icon) {
-            return react_1.default.createElement(icon_1.Icon, { className: icon, style: iconStyles, key: `${index}-${icon}` });
+            return react_1.default.createElement(icon_1.Icon, Object.assign({}, generateIconStyle(icon, iconStyleProps), { key: `${index}-${icon}` }));
         }
         else if (ICON_REGX.test(e)) {
             if (e.includes('~')) {
                 const [, , icon, animate] = ICON_WITH_ANIMATE_REGX.exec(e) || [];
                 if (animate && icon) {
-                    return (react_1.default.createElement(icon_1.Icon, { className: transformer(`$(${icon})`), style: iconStyles, animate: animate, key: `${index}-${icon}` }));
+                    return (react_1.default.createElement(icon_1.Icon, Object.assign({}, generateIconStyle(transformer(`$(${icon})`), iconStyleProps), { animate: animate, key: `${index}-${icon}` })));
                 }
             }
             const newStr = e.replaceAll(ICON_REGX, (e) => `${SEPERATOR}${e}${SEPERATOR}`);
-            return transformLabelWithCodicon(newStr, iconStyles, transformer);
+            return transformLabelWithCodicon(newStr, iconStyleProps, transformer);
+        }
+        else if (ICON_ERROR_REGX.test(e)) {
+            return transformLabelWithCodicon(e.replaceAll(ICON_ERROR_REGX, ''), iconStyleProps, transformer, renderText);
         }
         else {
-            return (0, ide_core_common_1.isFunction)(renderText) ? renderText(e, index) : react_1.default.createElement("span", { key: `${index}-${e}` }, e);
+            const withSeperator = e + (index === length - 1 ? '' : SEPERATOR);
+            return (0, ide_core_common_1.isFunction)(renderText) ? (renderText(withSeperator, index)) : (react_1.default.createElement("span", { key: `${index}-${e}` }, withSeperator));
         }
     });
 }

package/lib/utils/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","sourceRoot":"","sources":["../../src/utils/label.tsx"],"names":[],"mappings":";;;;AAAA,0DAA6C;AAE7C,iEAA8D;AAC9D,+DAAuD;AAEvD,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,SAAgB,yBAAyB,CACvC,KAAa,EACb,aAA4B,EAAE,EAC9B,WAAiD,EACjD,UAA4D;IAE5D,MAAM,SAAS,GAAG,yCAAyC,CAAC;IAC5D,MAAM,sBAAsB,GAAG,wCAAwC,CAAC;IACxE,OAAO,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QAC7C,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,CAAC,CAAC;SACV;QACD,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,IAAI,EAAE;YACR,OAAO,8BAAC,WAAI,IAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,IAAI,EAAE,GAAI,CAAC;SAC9E;aAAM,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;YAC5B,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACnB,MAAM,CAAC,EAAE,AAAD,EAAG,IAAI,EAAE,OAAO,CAAC,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;gBACjE,IAAI,OAAO,IAAI,IAAI,EAAE;oBACnB,OAAO,CACL,8BAAC,WAAI,IAAC,SAAS,EAAE,WAAW,CAAC,KAAK,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,IAAI,EAAE,GAAI,CAC7G,CAAC;iBACH;aACF;YACD,MAAM,MAAM,GAAG,CAAC,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC;YAC9E,OAAO,yBAAyB,CAAC,MAAM,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC;SACnE;aAAM;YACL,OAAO,IAAA,4BAAU,EAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,wCAAM,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,EAAE,IAAG,CAAC,CAAQ,CAAC;SAC/F;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AA9BD,8DA8BC"}
+{"version":3,"file":"label.js","sourceRoot":"","sources":["../../src/utils/label.tsx"],"names":[],"mappings":";;;;AAAA,oEAA6B;AAC7B,0DAA6C;AAE7C,iEAA8D;AAC9D,+DAAuD;AAEvD,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,SAAgB,yBAAyB,CACvC,KAAa,EACb,iBAAyC,EAAE,EAC3C,WAAiD,EACjD,UAA4D;IAE5D,MAAM,SAAS,GAAG,yCAAyC,CAAC;IAC5D,MAAM,sBAAsB,GAAG,wCAAwC,CAAC;IACxE,gCAAgC;IAChC,MAAM,eAAe,GAAG,0CAA0C,CAAC;IAEnE,MAAM,iBAAiB,GAAG,CAAC,IAAa,EAAE,UAAmC,EAAE,EAAE,CAC/E,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAA,oBAAG,EAAC,IAAI,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;IAEjH,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAEjC,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACjC,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,CAAC,CAAC;SACV;QACD,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;QAC5B,IAAI,IAAI,EAAE;YACR,OAAO,8BAAC,WAAI,oBAAK,iBAAiB,CAAC,IAAI,EAAE,cAAc,CAAC,IAAE,GAAG,EAAE,GAAG,KAAK,IAAI,IAAI,EAAE,IAAI,CAAC;SACvF;aAAM,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;YAC5B,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;gBACnB,MAAM,CAAC,EAAE,AAAD,EAAG,IAAI,EAAE,OAAO,CAAC,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;gBACjE,IAAI,OAAO,IAAI,IAAI,EAAE;oBACnB,OAAO,CACL,8BAAC,WAAI,oBACC,iBAAiB,CAAC,WAAW,CAAC,KAAK,IAAI,GAAG,CAAC,EAAE,cAAc,CAAC,IAChE,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,KAAK,IAAI,IAAI,EAAE,IACvB,CACH,CAAC;iBACH;aACF;YACD,MAAM,MAAM,GAAG,CAAC,CAAC,UAAU,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,SAAS,GAAG,CAAC,GAAG,SAAS,EAAE,CAAC,CAAC;YAC9E,OAAO,yBAAyB,CAAC,MAAM,EAAE,cAAc,EAAE,WAAW,CAAC,CAAC;SACvE;aAAM,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;YAClC,OAAO,yBAAyB,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,EAAE,EAAE,CAAC,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC;SAC9G;aAAM;YACL,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,KAAK,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;YAClE,OAAO,IAAA,4BAAU,EAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAC9B,UAAU,CAAC,aAAa,EAAE,KAAK,CAAC,CACjC,CAAC,CAAC,CAAC,CACF,wCAAM,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC,EAAE,IAAG,aAAa,CAAQ,CACnD,CAAC;SACH;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAlDD,8DAkDC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensumi/ide-core-browser",
-  "version": "2.23.4",
+  "version": "2.23.5-next-1682046023.0",
   "description": "@opensumi/ide-core-browser",
   "files": [
     "lib",
@@ -18,9 +18,9 @@
     "build": "tsc --build ../../configs/ts/references/tsconfig.core-browser.json"
   },
   "dependencies": {
-    "@opensumi/ide-components": "2.23.4",
-    "@opensumi/ide-connection": "2.23.4",
-    "@opensumi/ide-core-common": "2.23.4",
+    "@opensumi/ide-components": "2.23.5-next-1682046023.0",
+    "@opensumi/ide-connection": "2.23.5-next-1682046023.0",
+    "@opensumi/ide-core-common": "2.23.5-next-1682046023.0",
     "@opensumi/vscode-debugprotocol": "1.49.0-beta.1",
     "@vscode/codicons": "0.0.27",
     "ajv": "^6.10.0",
@@ -34,7 +34,6 @@
     "mobx-react-lite": "^1.3.1",
     "onigasm": "2.2.2",
     "rc-menu": "^9.3.2",
-    "react": "^16.8.6",
     "react-autosize-textarea": "^7.0.0",
     "react-ctxmenu-trigger": "^1.0.0",
     "react-custom-scrollbars": "^4.2.1",
@@ -45,5 +44,11 @@
     "strip-json-comments": "3.0.1",
     "vscode-textmate": "7.0.1"
   },
-  "gitHead": "23400e4cfb82f3eada37c0d6c110e6d44d8a8193"
+  "devDependencies": {
+    "react": "^16.8.6"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.6"
+  },
+  "gitHead": "813132a420c10062743acf37559ea63ace25fe89"
 }

package/src/bootstrap/app.ts

@@ -109,7 +109,6 @@ export class ClientApp implements IClientApp, IDisposable {
       editorBackgroundImage,
       defaultPreferences,
       allowSetDocumentTitleFollowWorkspaceDir = true,
-      devtools = false, // if not set, disable devtools support as default
       ...restOpts
     } = opts;
 
@@ -139,10 +138,10 @@ export class ClientApp implements IClientApp, IDisposable {
       layoutConfig: opts.layoutConfig as LayoutConfig,
       editorBackgroundImage: opts.editorBackgroundImage || editorBackgroundImage,
       allowSetDocumentTitleFollowWorkspaceDir,
-      devtools,
+      devtools: opts.devtools ?? false,
     };
 
-    if (devtools) {
+    if (this.config.devtools) {
       // set a global so the opensumi devtools can identify that
       // the current page is powered by opensumi core
       window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__ = {};

package/src/bootstrap/inner-providers.ts

@@ -270,19 +270,19 @@ export function injectInnerProviders(injector: Injector) {
     injector.addProviders(
       {
         token: IElectronMainMenuService,
-        useValue: createElectronMainApi(IElectronMainMenuService),
+        useValue: createElectronMainApi(IElectronMainMenuService, appConfig.devtools),
       },
       {
         token: IElectronMainUIService,
-        useValue: createElectronMainApi(IElectronMainUIService),
+        useValue: createElectronMainApi(IElectronMainUIService, appConfig.devtools),
       },
       {
         token: IElectronMainLifeCycleService,
-        useValue: createElectronMainApi(IElectronMainLifeCycleService),
+        useValue: createElectronMainApi(IElectronMainLifeCycleService, appConfig.devtools),
       },
       {
         token: IElectronURLService,
-        useValue: createElectronMainApi(IElectronURLService),
+        useValue: createElectronMainApi(IElectronURLService, appConfig.devtools),
       },
       {
         token: IElectronMenuFactory,

package/src/components/layout/default-layout.tsx

@@ -32,7 +32,8 @@ export function ToolbarActionBasedLayout() {
           slot='left'
           isTabbar={true}
           defaultSize={layout.left?.currentId ? layout.left?.size || 310 : 49}
-          minResize={204}
+          minResize={280}
+          maxResize={480}
           minSize={49}
         />
         <SplitPanel id='main-vertical' minResize={300} flexGrow={1} direction='top-to-bottom'>
@@ -51,7 +52,8 @@ export function ToolbarActionBasedLayout() {
           slot='right'
           isTabbar={true}
           defaultSize={layout.right?.currentId ? layout.right?.size || 310 : 0}
-          minResize={200}
+          minResize={280}
+          maxResize={480}
           minSize={0}
         />
       </SplitPanel>

package/src/components/layout/split-panel.tsx

@@ -228,6 +228,7 @@ export const SplitPanel: React.FC<SplitPanelProps> = ({
         );
       }
     }
+
     elements.push(
       <PanelContext.Provider
         key={index}
@@ -243,6 +244,7 @@ export const SplitPanel: React.FC<SplitPanelProps> = ({
       >
         <div
           data-min-resize={getProp(element, 'minResize')}
+          data-max-resize={getProp(element, 'maxResize')}
           ref={(ele) => {
             if (ele && splitPanelService.panels.indexOf(ele) === -1) {
               splitPanelService.panels.push(ele);
@@ -250,7 +252,7 @@ export const SplitPanel: React.FC<SplitPanelProps> = ({
           }}
           id={getProp(element, 'id') /* @deprecated: query by data-view-id */}
           style={{
-            // 手风琴场景，固定尺寸和flex尺寸混合布局；需要在resize flex模式下禁用
+            // 手风琴场景，固定尺寸和 flex 尺寸混合布局；需要在 Resize Flex 模式下禁用
             ...(getProp(element, 'flex') &&
             !getProp(element, 'savedSize') &&
             !childList.find((item) => getProp(item, 'flexGrow'))
@@ -262,7 +264,7 @@ export const SplitPanel: React.FC<SplitPanelProps> = ({
               : '-1px',
             [Layout.getMaxSizeProperty(direction)]:
               maxLocks[index] && getProp(element, 'maxSize') ? getProp(element, 'maxSize') + 'px' : 'unset',
-            // resize flex模式下应用flexGrow
+            // Resize Flex 模式下应用 flexGrow
             ...(getProp(element, 'flexGrow') !== undefined ? { flexGrow: getProp(element, 'flexGrow') } : {}),
             display: hides[index] ? 'none' : 'block',
             backgroundColor: getProp(element, 'backgroundColor'),

package/src/components/resize/resize.tsx

@@ -88,16 +88,25 @@ export const ResizeHandleHorizontal = (props: ResizeHandleProps) => {
     const parentWidth = ref.current!.parentElement!.offsetWidth;
     const prevEle = props.findPrevElement ? props.findPrevElement() : prevElement.current!;
     const nextEle = props.findNextElement ? props.findNextElement() : nextElement.current!;
+
     if ((prevEle && prevEle.classList.contains(RESIZE_LOCK)) || (nextEle && nextEle.classList.contains(RESIZE_LOCK))) {
       return;
     }
-    const prevMinResize = prevEle!.dataset.minResize || 0;
-    const nextMinResize = nextEle!.dataset.minResize || 0;
+    const prevMinResize = prevEle?.dataset.minResize || 0;
+    const nextMinResize = nextEle?.dataset.minResize || 0;
+
+    const prevMaxResize = prevEle?.dataset.maxResize || 0;
+    const nextMaxResize = nextEle?.dataset.maxResize || 0;
     if (prevMinResize || nextMinResize) {
       if (prev * parentWidth <= prevMinResize || next * parentWidth <= nextMinResize) {
         return;
       }
     }
+    if (prevMaxResize || nextMaxResize) {
+      if (prev * parentWidth >= prevMaxResize || next * parentWidth >= nextMaxResize) {
+        return;
+      }
+    }
     if (nextEle) {
       nextEle.style.width = next * 100 + '%';
     }
@@ -109,34 +118,49 @@ export const ResizeHandleHorizontal = (props: ResizeHandleProps) => {
     }
   };
 
-  const flexModeSetSize = (prevWidth: number, nextWidth: number, ignoreMin?: boolean, direction?: boolean) => {
+  const flexModeSetSize = (prevWidth: number, nextWidth: number, ignoreResizeRange?: boolean, direction?: boolean) => {
     const prevEle = props.findPrevElement ? props.findPrevElement(direction) : prevElement.current!;
     const nextEle = props.findNextElement ? props.findNextElement(direction) : nextElement.current!;
-    let fixedElement: HTMLElement;
-    let flexElement: HTMLElement;
-    let targetFixedWidth = 0;
-    const prevMinResize = parseInt(prevEle!.dataset.minResize || '0', 10);
-    const nextMinResize = parseInt(nextEle!.dataset.minResize || '0', 10);
-    if (props.flexMode === ResizeFlexMode.Prev) {
-      fixedElement = prevEle!;
-      flexElement = nextEle!;
-      targetFixedWidth = prevWidth;
-      if (!ignoreMin) {
-        if (prevMinResize > prevWidth) {
-          targetFixedWidth = prevMinResize;
-        } else if (nextMinResize > nextWidth) {
-          targetFixedWidth = prevWidth + nextWidth - nextMinResize;
+    const prevMinResize = Number(prevEle?.dataset.minResize ?? 0);
+    const nextMinResize = Number(nextEle?.dataset.minResize ?? 0);
+
+    const prevMaxResize = prevEle?.dataset.maxResize ? Number(prevEle?.dataset.maxResize) : null;
+    const nextMaxResize = nextEle?.dataset.maxResize ? Number(nextEle?.dataset.maxResize) : null;
+
+    const isPreFlexMode = props.flexMode === ResizeFlexMode.Prev;
+    const fixedElement = (isPreFlexMode ? prevEle : nextEle)!;
+    const flexElement = (isPreFlexMode ? nextEle : prevEle)!;
+    let targetFixedWidth = isPreFlexMode ? prevWidth : nextWidth;
+
+    if (!ignoreResizeRange) {
+      if (prevMinResize || nextMinResize) {
+        if (isPreFlexMode) {
+          if (prevMinResize > prevWidth) {
+            targetFixedWidth = prevMinResize;
+          } else if (nextMinResize > nextWidth) {
+            targetFixedWidth = prevWidth + nextWidth - nextMinResize;
+          }
+        } else {
+          if (nextMinResize > nextWidth) {
+            targetFixedWidth = nextMinResize;
+          } else if (prevMinResize > prevWidth) {
+            targetFixedWidth = prevWidth + nextWidth - prevMinResize;
+          }
         }
       }
-    } else {
-      fixedElement = nextEle!;
-      flexElement = prevEle!;
-      targetFixedWidth = nextWidth;
-      if (!ignoreMin) {
-        if (nextMinResize > nextWidth) {
-          targetFixedWidth = nextMinResize;
-        } else if (prevMinResize > prevWidth) {
-          targetFixedWidth = prevWidth + nextWidth - prevMinResize;
+      if (prevMaxResize || nextMaxResize) {
+        if (isPreFlexMode) {
+          if (prevMaxResize && prevMaxResize <= prevWidth) {
+            targetFixedWidth = prevMaxResize;
+          } else if (nextMaxResize && nextMaxResize > nextWidth) {
+            targetFixedWidth = prevWidth + nextWidth - nextMaxResize;
+          }
+        } else {
+          if (nextMaxResize && nextMaxResize <= nextWidth) {
+            targetFixedWidth = nextMaxResize;
+          } else if (prevMaxResize && prevMaxResize > nextWidth) {
+            targetFixedWidth = prevWidth + nextWidth - prevMaxResize;
+          }
         }
       }
     }

package/src/core-preferences.ts

@@ -5,6 +5,7 @@ import {
   SUPPORTED_ENCODINGS,
   GeneralSettingsId,
   PreferenceSchema,
+  MenubarSettingId,
 } from '@opensumi/ide-core-common';
 import { LOCALE_TYPES } from '@opensumi/ide-core-common/lib/const';
 
@@ -276,6 +277,10 @@ export const corePreferenceSchema: PreferenceSchema = {
       type: 'boolean',
       default: false,
     },
+    [MenubarSettingId.CompactMode]: {
+      type: 'boolean',
+      default: false,
+    },
   },
 };
 
@@ -303,6 +308,7 @@ export interface CoreConfiguration {
   'general.language': string;
   'general.theme': string;
   'view.saveLayoutWithWorkspace': boolean;
+  'menubar.compactMode': boolean;
 }
 
 export const CorePreferences = Symbol('CorePreferences');

package/src/extensions/schema/menu.ts

@@ -86,6 +86,10 @@ const apiMenus: IAPIMenu[] = [
     id: MenuId.ActivityBarExtra,
     description: localize('sumiContributes.menu.api.ActivityBarExtra'),
   },
+  {
+    id: MenuId.ActivityBarTopExtra,
+    description: localize('sumiContributes.menu.api.ActivityBarTopExtra'),
+  },
   {
     id: MenuId.DebugBreakpointsContext,
     description: localize('sumiContributes.menu.api.DebugBreakpointsContext'),

package/src/layout/view-id.ts

@@ -15,4 +15,5 @@ export namespace VIEW_CONTAINERS {
   export const QUICKPICK_INPUT = `${VIEW_CONTAINERS_PREFIX}-quickpick-input`;
   export const QUICKPICK_TABS = `${VIEW_CONTAINERS_PREFIX}-quickpick-tabs`;
   export const QUICKPICK_ITEM = `${VIEW_CONTAINERS_PREFIX}-quickpick-item`;
+  export const QUICKPICK_PROGRESS = `${VIEW_CONTAINERS_PREFIX}-quickpick-progress`;
 }

package/src/markdown/index.tsx

@@ -22,7 +22,6 @@ export const toMarkdownHtml = (message: string): string => {
     gfm: true,
     breaks: false,
     pedantic: false,
-    sanitize: true,
     smartLists: true,
     smartypants: false,
     renderer,

package/src/menu/next/menu-id.ts

@@ -3,6 +3,7 @@ export enum MenuId {
   AccountsContext = 'accounts/context',
   ActivityBarContext = 'activityBar/context',
   ActivityBarExtra = 'activityBar/extra',
+  ActivityBarTopExtra = 'activityBar/top/extra',
   CommandPalette = 'commandPalette',
   DebugBreakpointsContext = 'debug/breakpoints/context',
   DebugCallStackContext = 'debug/callstack/context',
@@ -33,6 +34,7 @@ export enum MenuId {
   MenubarSwitchGroupMenu = 'menubar/switch/group',
   MenubarTerminalMenu = 'menubar/terminal',
   MenubarViewMenu = 'menubar/view',
+  MenubarCompactMenu = 'menubar/compact/mode',
   TerminalInstanceContext = 'terminal/instance/context',
   TerminalNewDropdownContext = 'terminal/newDropdown/context',
   TerminalTabContext = 'terminal/tab/context',
@@ -55,7 +57,7 @@ export enum MenuId {
   ViewTitle = 'view/title',
   GlobalActivity = 'global/activity',
   ExtensionContext = 'extension/context', // 插件市场 item
-  SettingsIconMenu = 'settings/icon/menu', // 右下角 setting menu
+  SettingsIconMenu = 'settings/icon/menu', // 左下角 setting menu
   // The contributed comment thread context menu, rendered as buttons below the comment editor
   CommentsCommentThreadContext = 'comments/commentThread/context',
   // The contributed comment thread title menu

package/src/menu/next/menu-service.ts

@@ -196,8 +196,7 @@ class Menu extends Disposable implements IMenu {
         ]);
         return action;
       } else {
-        // 只有 label 存在值的时候才渲染
-        if (item.label) {
+        if (item.label || item.iconClass) {
           const action = this.injector.get(SubmenuItemNode, [item]);
           return action;
         }

package/src/quick-open/index.ts

@@ -247,6 +247,7 @@ export interface QuickOpenService {
   showDecoration(type: VALIDATE_TYPE): void;
   hideDecoration(): void;
   refresh(): void;
+  updateOptions(options: QuickOpenOptions): void;
 }
 
 export type QuickOpenOptions = Partial<QuickOpenOptions.Resolved>;
@@ -355,6 +356,10 @@ export namespace QuickOpenOptions {
      * 内容更新后保持滚动区域不变
      */
     keepScrollPosition?: boolean;
+    /**
+     * 是否显示 progress
+     */
+    busy?: boolean;
   }
   export const defaultOptions: Resolved = Object.freeze({
     enabled: true,

package/src/react-providers/slot.tsx

@@ -39,7 +39,7 @@ export function getSlotLocation(moduleName: string, layoutConfig: LayoutConfig)
       return location;
     }
   }
-  getDebugLogger().warn(`没有找到${moduleName}所对应的位置！`);
+  logger.warn(`Cannot find the location with ${moduleName}`);
   return '';
 }
 
@@ -97,14 +97,14 @@ export class ErrorBoundary extends React.Component {
 export const allSlot: { slot: string; dom: HTMLElement }[] = [];
 
 export const SlotDecorator: React.FC<{ slot: string; backgroundColor?: string }> = ({ slot, ...props }) => {
-  const ref = React.useRef<HTMLElement>();
+  const ref = React.useRef<HTMLElement | null>();
   React.useEffect(() => {
     if (ref.current) {
       allSlot.push({ slot, dom: ref.current });
     }
   }, [ref]);
   return (
-    <div ref={(ele) => (ref.current = ele!)} className='resize-wrapper'>
+    <div ref={(ele) => (ref.current = ele)} className='resize-wrapper'>
       {props.children}
     </div>
   );
@@ -163,12 +163,13 @@ export class SlotRendererRegistry {
 export const slotRendererRegistry = new SlotRendererRegistry();
 
 export interface SlotProps {
+  // Name of the slot view
   slot: string;
-  /**
-   * slot 默认的背景色
-   */
+  // Background color of the slot view
   backgroundColor?: string;
+  // Is tabbar slot renderer or not
   isTabbar?: boolean;
+  // Optional props
   [key: string]: any;
 }
 
@@ -181,7 +182,7 @@ export function SlotRenderer({ slot, isTabbar, ...props }: SlotProps) {
     slotRendererRegistry.addTabbar(slot);
   }
   if (!componentKeys || !componentKeys.length) {
-    getDebugLogger().warn(`No ${slot} view declared by location.`);
+    logger.warn(`No ${slot} view declared by location.`);
   }
   const [componentInfos, setInfos] = React.useState<ComponentRegistryInfo[]>([]);
   const updateComponentInfos = React.useCallback(() => {
@@ -189,7 +190,7 @@ export function SlotRenderer({ slot, isTabbar, ...props }: SlotProps) {
     componentKeys.forEach((token) => {
       const info = componentRegistry.getComponentRegistryInfo(token);
       if (!info) {
-        getDebugLogger().warn(`${token} view isn't registered, please check.`);
+        logger.warn(`${token} view isn't registered, please check.`);
       } else {
         infos.push(info);
       }

package/src/services/storage-service.ts

@@ -99,6 +99,9 @@ abstract class BaseBrowserStorageService implements StorageService {
     } catch (e) {
       this.logger.error(`storage getDate error: ${e}, use defaultValue as result.`);
     }
+    if (defaultValue && isObject(defaultValue)) {
+      delete defaultValue['expires'];
+    }
     return defaultValue;
   }
 

package/src/utils/electron.ts

@@ -1,4 +1,4 @@
-import { IDisposable } from '@opensumi/ide-core-common';
+import { IDisposable, isUndefined } from '@opensumi/ide-core-common';
 import { IElectronMainApi } from '@opensumi/ide-core-common/lib/electron';
 import type { MessageConnection } from '@opensumi/vscode-jsonrpc';
 
@@ -12,13 +12,37 @@ export interface IElectronIpcRenderer {
   send(channel: string, ...args: any[]): void;
 }
 
-export function createElectronMainApi(name: string): IElectronMainApi<any> {
+interface IPCMessage {
+  type: 'event' | 'request' | 'response';
+  service: string;
+  method: string;
+  requestId?: number; // for connecting 'requst' and 'response'
+  args: any[];
+}
+
+const getCapturer = () => {
+  if (window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__?.captureIPC) {
+    return window.__OPENSUMI_DEVTOOLS_GLOBAL_HOOK__.captureIPC;
+  }
+  return;
+};
+
+const capture = (message: IPCMessage) => {
+  const capturer = getCapturer();
+  if (!isUndefined(capture)) {
+    // if OpenSumi DevTools is opended
+    capturer(message);
+  }
+};
+
+export function createElectronMainApi(name: string, enableCaptured?: boolean): IElectronMainApi<any> {
   let id = 0;
   return new Proxy(
     {
       on: (event: string, listener: (...args) => void): IDisposable => {
         const wrappedListener = (e, eventName, ...args) => {
           if (eventName === event) {
+            enableCaptured && capture({ type: 'event', service: name, method: event, args });
             return listener(...args);
           }
         };
@@ -39,6 +63,7 @@ export function createElectronMainApi(name: string): IElectronMainApi<any> {
             new Promise((resolve, reject) => {
               const requestId = id++;
               ElectronIpcRenderer.send('request:' + name, method, requestId, ...args);
+              enableCaptured && capture({ type: 'request', service: name, method: String(method), requestId, args });
               const listener = (event, id, error, result) => {
                 if (id === requestId) {
                   ElectronIpcRenderer.removeListener('response:' + name, listener);
@@ -49,6 +74,14 @@ export function createElectronMainApi(name: string): IElectronMainApi<any> {
                   } else {
                     resolve(result);
                   }
+                  enableCaptured &&
+                    capture({
+                      type: 'response',
+                      service: name,
+                      method: String(method),
+                      requestId,
+                      args: [error, result],
+                    });
                 }
               };
               ElectronIpcRenderer.on('response:' + name, listener);

package/src/utils/index.ts

@@ -2,6 +2,5 @@ export * from './env';
 export * from './electron';
 export * from './react-hooks';
 export * from './icon';
-export * from './parse';
 export * from './json';
 export * from './label';

package/src/utils/label.tsx

@@ -1,3 +1,4 @@
+import clx from 'classnames';
 import React, { CSSProperties } from 'react';
 
 import { Icon } from '@opensumi/ide-components/lib/icon/icon';
@@ -7,32 +8,52 @@ const SEPERATOR = ' ';
 
 export function transformLabelWithCodicon(
   label: string,
-  iconStyles: CSSProperties = {},
+  iconStyleProps: CSSProperties | string = {},
   transformer?: (str: string) => string | undefined,
   renderText?: (str: string, index: number) => React.ReactNode,
 ) {
   const ICON_REGX = /\$\(([a-z.]+\/)?([a-z-]+)(~[a-z]+)?\)/gi;
   const ICON_WITH_ANIMATE_REGX = /\$\(([a-z.]+\/)?([a-z-]+)~([a-z]+)\)/gi;
-  return label.split(SEPERATOR).map((e, index) => {
+  // some string like $() $(~spin)
+  const ICON_ERROR_REGX = /\$\(([a-z.]+\/)?([a-z-]+)?(~[a-z]+)?\)/gi;
+
+  const generateIconStyle = (icon?: string, styleProps?: CSSProperties | string) =>
+    typeof styleProps === 'string' ? { className: clx(icon, styleProps) } : { className: icon, style: styleProps };
+
+  const splitLabel = label.split(SEPERATOR);
+  const length = splitLabel.length;
+
+  return splitLabel.map((e, index) => {
     if (!transformer) {
       return e;
     }
     const icon = transformer(e);
     if (icon) {
-      return <Icon className={icon} style={iconStyles} key={`${index}-${icon}`} />;
+      return <Icon {...generateIconStyle(icon, iconStyleProps)} key={`${index}-${icon}`} />;
     } else if (ICON_REGX.test(e)) {
       if (e.includes('~')) {
         const [, , icon, animate] = ICON_WITH_ANIMATE_REGX.exec(e) || [];
         if (animate && icon) {
           return (
-            <Icon className={transformer(`$(${icon})`)} style={iconStyles} animate={animate} key={`${index}-${icon}`} />
+            <Icon
+              {...generateIconStyle(transformer(`$(${icon})`), iconStyleProps)}
+              animate={animate}
+              key={`${index}-${icon}`}
+            />
           );
         }
       }
       const newStr = e.replaceAll(ICON_REGX, (e) => `${SEPERATOR}${e}${SEPERATOR}`);
-      return transformLabelWithCodicon(newStr, iconStyles, transformer);
+      return transformLabelWithCodicon(newStr, iconStyleProps, transformer);
+    } else if (ICON_ERROR_REGX.test(e)) {
+      return transformLabelWithCodicon(e.replaceAll(ICON_ERROR_REGX, ''), iconStyleProps, transformer, renderText);
     } else {
-      return isFunction(renderText) ? renderText(e, index) : <span key={`${index}-${e}`}>{e}</span>;
+      const withSeperator = e + (index === length - 1 ? '' : SEPERATOR);
+      return isFunction(renderText) ? (
+        renderText(withSeperator, index)
+      ) : (
+        <span key={`${index}-${e}`}>{withSeperator}</span>
+      );
     }
   });
 }