#513 - Added devtools command

estruyf · Feb 28, 2023 · cbeda07 · cbeda07
1 parent 8bc63a4
commit cbeda07
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/src/dashboardWebView/components/App.tsx b/src/dashboardWebView/components/App.tsx
@@ -100,11 +100,17 @@ Stack: ${componentStack}`
               <span className='absolute left-2'>Development mode</span>
 
               <a
-                className="ml-2 px-2 hover:text-[var(--vscode-statusBarItem-hoverForeground)] hover:bg-[var(--vscode-statusBarItem-hoverBackground)] hover:outline-none focus:outline-none"
+                className="ml-2 px-2 hover:text-[var(--vscode-statusBar-debuggingForeground)] hover:bg-[var(--vscode-statusBarItem-hoverBackground)] hover:outline-none focus:outline-none"
                 href={`command:workbench.action.webview.reloadWebviewAction`}
                 title="Reload the dashboard">
                 Reload
               </a>
+              <a
+                className="ml-2 px-2 hover:text-[var(--vscode-statusBar-debuggingForeground)] hover:bg-[var(--vscode-statusBarItem-hoverBackground)] hover:outline-none focus:outline-none"
+                href={`command:workbench.action.webview.openDeveloperTools`}
+                title="Open DevTools">
+                DevTools
+              </a>
             </div>
           )
         }

diff --git a/src/panelWebView/ViewPanel.tsx b/src/panelWebView/ViewPanel.tsx
@@ -66,6 +66,12 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
               title="Reload the dashboard">
               Reload
             </a>
+            <a
+              className="developer__bar__link"
+              href={`command:workbench.action.webview.openDeveloperTools`}
+              title="Open DevTools">
+              DevTools
+            </a>
           </div>
         )
       }

diff --git 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;
     }