From 8bc63a48a0861e58999a766094a7aa940d9c7f84 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Tue, 28 Feb 2023 12:49:03 +0100 Subject: [PATCH 1/3] #513 - devmode for ext --- src/commands/Dashboard.ts | 3 ++- src/dashboardWebView/components/App.tsx | 27 +++++++++++++++++++++++-- src/dashboardWebView/index.tsx | 1 + src/panelWebView/ViewPanel.tsx | 22 ++++++++++++++++++++ src/panelWebView/styles.css | 21 +++++++++++++++++++ 5 files changed, 71 insertions(+), 3 deletions(-) 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..4475555f 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,13 @@ export const App: React.FunctionComponent = ({ navigate(routePaths[view]); }, [view]); + useEffect(() => { + console.log(window.fmExternal) + if (window.fmExternal.isDevelopment) { + setIsDevMode(true); + } + }, []); + if (!settings) { return ; } @@ -86,6 +94,21 @@ Stack: ${componentStack}` }} >
+ { + isDevMode && ( +
+ Development mode + + + Reload + +
+ ) + } + } /> } />
- + ); }; 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..9f749f13 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,13 @@ export const ViewPanel: React.FunctionComponent = ( mode } = useMessages(); + useEffect(() => { + console.log(window.fmExternal) + if (window.fmExternal.isDevelopment) { + setIsDevMode(true); + } + }, []); + if (mediaSelecting) { return (
@@ -48,6 +57,19 @@ export const ViewPanel: React.FunctionComponent = ( return (
+ { + isDevMode && ( + + ) + } +
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css index 78348027..732e179c 100644 --- a/src/panelWebView/styles.css +++ b/src/panelWebView/styles.css @@ -1010,3 +1010,24 @@ 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); + + &:hover, + &:focus { + color: var(--vscode-statusBarItem-hoverForeground); + background: var(--vscode-statusBarItem-hoverBackground); + outline: none; + } + } +} From cbeda07d259c20722d275c0433486d8406ff32f4 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Tue, 28 Feb 2023 14:45:18 +0100 Subject: [PATCH 2/3] #513 - Added devtools command --- src/dashboardWebView/components/App.tsx | 8 +++++++- src/panelWebView/ViewPanel.tsx | 6 ++++++ src/panelWebView/styles.css | 5 ++++- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/dashboardWebView/components/App.tsx b/src/dashboardWebView/components/App.tsx index 4475555f..a3e182d4 100644 --- a/src/dashboardWebView/components/App.tsx +++ b/src/dashboardWebView/components/App.tsx @@ -100,11 +100,17 @@ Stack: ${componentStack}` Development mode Reload + + DevTools +
) } diff --git a/src/panelWebView/ViewPanel.tsx b/src/panelWebView/ViewPanel.tsx index 9f749f13..ccf4f2e9 100644 --- a/src/panelWebView/ViewPanel.tsx +++ b/src/panelWebView/ViewPanel.tsx @@ -66,6 +66,12 @@ export const ViewPanel: React.FunctionComponent = ( title="Reload the dashboard"> Reload + + DevTools +
) } diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css index 732e179c..4bce5816 100644 --- a/src/panelWebView/styles.css +++ b/src/panelWebView/styles.css @@ -1022,10 +1022,13 @@ vscode-divider { a { color: var(--vscode-statusBar-debuggingForeground); + margin: 0 0.25em; + padding: 0 0.25em; + text-decoration: none; &:hover, &:focus { - color: var(--vscode-statusBarItem-hoverForeground); + color: var(--vscode-statusBar-debuggingForeground); background: var(--vscode-statusBarItem-hoverBackground); outline: none; } From cf29121bc0cc0062b77b0b8280b643655f6a8861 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Tue, 28 Feb 2023 19:33:57 +0100 Subject: [PATCH 3/3] Fix isDevelopment check --- src/dashboardWebView/components/App.tsx | 3 +-- src/panelWebView/ViewPanel.tsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/dashboardWebView/components/App.tsx b/src/dashboardWebView/components/App.tsx index a3e182d4..685e7b0f 100644 --- a/src/dashboardWebView/components/App.tsx +++ b/src/dashboardWebView/components/App.tsx @@ -62,8 +62,7 @@ export const App: React.FunctionComponent = ({ }, [view]); useEffect(() => { - console.log(window.fmExternal) - if (window.fmExternal.isDevelopment) { + if (window.fmExternal && window.fmExternal.isDevelopment) { setIsDevMode(true); } }, []); diff --git a/src/panelWebView/ViewPanel.tsx b/src/panelWebView/ViewPanel.tsx index ccf4f2e9..f3351adc 100644 --- a/src/panelWebView/ViewPanel.tsx +++ b/src/panelWebView/ViewPanel.tsx @@ -33,8 +33,7 @@ export const ViewPanel: React.FunctionComponent = ( } = useMessages(); useEffect(() => { - console.log(window.fmExternal) - if (window.fmExternal.isDevelopment) { + if (window.fmExternal && window.fmExternal.isDevelopment) { setIsDevMode(true); } }, []);