Remove logs button from preview loader view (#35)

This PR removes logs button from preview loader screen.

The button was misplaced and caused the whole layout to shift when it'd
appear. After we added log progress, it is no longer needed to provide a
visual indication about the logs being present there. Instead, we make
the progress message clickable.

With this change, the progress message can be clicked at any point. When
build is in progress, we will open build logs panel, and otherwise will
open extension logs.

packages/vscode-extension/src/common/Project.ts

@@ -77,6 +77,7 @@ export interface ProjectInterface {
   resumeDebugger(): Promise<void>;
   stepOverDebugger(): Promise<void>;
   focusBuildOutput(): Promise<void>;
+  focusExtensionLogsOutput(): Promise<void>;
   focusDebugConsole(): Promise<void>;
 
   openNavigation(navigationItemID: string): Promise<void>;

packages/vscode-extension/src/project/project.ts

@@ -267,6 +267,11 @@ export class Project implements Disposable, MetroDelegate, ProjectInterface {
     }
     this.buildManager.focusBuildOutput();
   }
+
+  public async focusExtensionLogsOutput() {
+    Logger.openOutputPanel();
+  }
+
   public async focusDebugConsole() {
     commands.executeCommand("workbench.panel.repl.view.focus");
   }

packages/vscode-extension/src/webview/components/PreviewLoader.css

@@ -1,5 +1,6 @@
 .preview-loader-container {
   width: 75%;
+  cursor: pointer;
 }
 
 .preview-loader-button-group {

packages/vscode-extension/src/webview/components/PreviewLoader.tsx

@@ -43,22 +43,17 @@ function PreviewLoader() {
     }
   }, [projectState]);
 
+  function handleLoaderClick() {
+    if (projectState.startupMessage === StartupMessage.Building) {
+      project.focusBuildOutput();
+    } else {
+      project.focusExtensionLogsOutput();
+    }
+  }
+
   return (
     <>
-      <div className="preview-loader-container">
-        {projectState.startupMessage === StartupMessage.Building && (
-          <div className="preview-loader-button-group">
-            <IconButton
-              onClick={() => project.focusBuildOutput()}
-              tooltip={{
-                label: "Open build logs",
-                side: "top",
-              }}>
-              <span className="codicon codicon-symbol-keyword" />
-            </IconButton>
-          </div>
-        )}
-
+      <button className="preview-loader-container" onClick={handleLoaderClick}>
         <div className="preview-loader-button-group">
           <StartupMessageComponent className="preview-loader-message">
             {projectState.startupMessage}
@@ -69,7 +64,7 @@ function PreviewLoader() {
             </div>
           )}
         </div>
-      </div>
+      </button>
       <ProgressBar progress={progress} />
     </>
   );