diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 44f4a2d0..218eff00 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -121,7 +121,8 @@ export class Dashboard { ViewColumn.One, { enableScripts: true, - retainContextWhenHidden: true + retainContextWhenHidden: true, + enableCommandUris: true } ); diff --git a/src/dashboardWebView/components/App.tsx b/src/dashboardWebView/components/App.tsx index d9719a83..685e7b0f 100644 --- a/src/dashboardWebView/components/App.tsx +++ b/src/dashboardWebView/components/App.tsx @@ -14,7 +14,7 @@ import { Messenger } from '@estruyf/vscode/dist/client'; import { TaxonomyView } from './TaxonomyView'; import { Route, Routes, useNavigate } from 'react-router-dom'; import { routePaths } from '..'; -import { useEffect, useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { UnknownView } from './UnknownView'; import { ErrorBoundary } from '@sentry/react'; import { ErrorView } from './ErrorView'; @@ -30,6 +30,7 @@ export const App: React.FunctionComponent = ({ const { loading, pages, settings } = useMessages(); const view = useRecoilValue(DashboardViewSelector); const mode = useRecoilValue(ModeAtom); + const [isDevMode, setIsDevMode] = useState(false); const navigate = useNavigate(); useDarkMode(); @@ -60,6 +61,12 @@ export const App: React.FunctionComponent = ({ navigate(routePaths[view]); }, [view]); + useEffect(() => { + if (window.fmExternal && window.fmExternal.isDevelopment) { + setIsDevMode(true); + } + }, []); + if (!settings) { return ; } @@ -86,6 +93,27 @@ Stack: ${componentStack}` }} >
+ { + isDevMode && ( +
+ Development mode + + + Reload + + + DevTools + +
+ ) + } + } /> } />
- + ); }; diff --git a/src/dashboardWebView/index.tsx b/src/dashboardWebView/index.tsx index ff7b698e..c7655d8b 100644 --- a/src/dashboardWebView/index.tsx +++ b/src/dashboardWebView/index.tsx @@ -20,6 +20,7 @@ declare const acquireVsCodeApi: () => { declare global { interface Window { fmExternal: { + isDevelopment: boolean; getCustomFields: { name: string, html: (data: any, change: (value: any) => void) => Promise diff --git a/src/panelWebView/ViewPanel.tsx b/src/panelWebView/ViewPanel.tsx index 9357bdba..f3351adc 100644 --- a/src/panelWebView/ViewPanel.tsx +++ b/src/panelWebView/ViewPanel.tsx @@ -13,12 +13,14 @@ import { FeatureFlag } from '../components/features/FeatureFlag'; import { FEATURE_FLAG } from '../constants/Features'; import { GitAction } from './components/Git/GitAction'; import { CustomView } from './components/CustomView'; +import { useEffect, useState } from 'react'; export interface IViewPanelProps { } export const ViewPanel: React.FunctionComponent = ( { }: React.PropsWithChildren ) => { + const [isDevMode, setIsDevMode] = useState(false); const { loading, mediaSelecting, @@ -30,6 +32,12 @@ export const ViewPanel: React.FunctionComponent = ( mode } = useMessages(); + useEffect(() => { + if (window.fmExternal && window.fmExternal.isDevelopment) { + setIsDevMode(true); + } + }, []); + if (mediaSelecting) { return (
@@ -48,6 +56,25 @@ export const ViewPanel: React.FunctionComponent = ( return (
+ { + isDevMode && ( + + ) + } +
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css index 78348027..4bce5816 100644 --- a/src/panelWebView/styles.css +++ b/src/panelWebView/styles.css @@ -1010,3 +1010,27 @@ vscode-divider { .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { fill: var(--vscode-button-background) !important; } + +/* Extensibility Developer Bar */ +.developer__bar { + background: var(--vscode-statusBar-debuggingBackground); + position: relative; + padding: 5px 15px; + display: flex; + align-items: center; + justify-content: center; + + a { + color: var(--vscode-statusBar-debuggingForeground); + margin: 0 0.25em; + padding: 0 0.25em; + text-decoration: none; + + &:hover, + &:focus { + color: var(--vscode-statusBar-debuggingForeground); + background: var(--vscode-statusBarItem-hoverBackground); + outline: none; + } + } +}