Feature: Adding infobar to screencast (#2432)

This PR adds an infobar component which is used to display a warning to screencast users about the limitation of the view.

src/extension.ts

@@ -179,6 +179,14 @@ export function activate(context: vscode.ExtensionContext): void {
             const normalizedPath = new URL(target.description).toString();
             if (browserInstance) {
                 const browserPages = await browserInstance.pages();
+
+                // First we validate we have pages to close, some non-visual targets could keep the browser
+                // instance alive.
+                if (!browserPages || browserPages.length === 0){
+                    void browserInstance.close();
+                    return;
+                }
+
                 for (const page of browserPages) {
                     // URL needs to be accessed through the target as the page could be handling errors in a different way.
                     // e.g redirecting to chrome-error: protocol

src/screencast/infobar.ts

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { html, render } from 'lit-html';
+import { createRef, ref } from 'lit-html/directives/ref.js'
+import { styleMap, StyleInfo } from 'lit-html/directives/style-map.js';
+
+interface InfobarProps {
+    message: string;
+}
+
+export default class InfobarComponent {
+    #buttonRef = createRef();
+    #message: string;
+    #container: HTMLElement | undefined;
+
+    constructor(props: InfobarProps, container?: HTMLElement) {
+        this.#message = props.message;
+        this.#container = container;
+        this.#update();
+    }
+
+    #update(styles?: StyleInfo) {
+        let customStyles = styles ?? {
+            display: 'flex'
+        };
+
+        if (!this.#container) {
+            return;
+        }
+        render(this.template(customStyles), this.#container);
+    }
+
+    template(styles: StyleInfo) {
+        return html`
+            <div class="infobar" style=${styleMap(styles)}>
+                <div class="infobar-message">${this.#message}</div>
+                <button class="infobar-close-button" ${ref(this.#buttonRef)} @click=${this.#onClick}></button>
+            </div>
+        `;
+    }
+
+    #onClick = () => {
+        let styles = {
+            display: 'none',
+        } as StyleInfo;
+
+        this.#update(styles);
+    };
+
+    static render(props: InfobarProps, elementId: string) {
+        const currentContainer = document.getElementById(elementId);
+        if (currentContainer) {
+            new InfobarComponent(props, currentContainer);
+        }
+    }
+}

src/screencast/screencast.ts

@@ -8,6 +8,7 @@ import { MouseEventMap, ScreencastInputHandler } from './input';
 import DimensionComponent from './dimensionComponent';
 import { getEmulatedDeviceDetails, groupEmulatedDevicesByType } from './emulatedDeviceHelpers';
 import FlyoutMenuComponent, {OffsetDirection} from './flyoutMenuComponent';
+import InfobarComponent from './infobar';
 
 import { encodeMessageForChannel } from '../common/webviewEvents';
 
@@ -58,7 +59,7 @@ export class Screencast {
         this.urlInput.addEventListener('keydown', event => this.onUrlKeyDown(event));
 
         const emulatedDevices = groupEmulatedDevicesByType();
-
+        InfobarComponent.render({message:  "This is a simulated preview with limited functionality. Deactivate 'Headless mode' in extension settings for a full experience."}, 'infobar');
         FlyoutMenuComponent.render({
             iconName: 'codicon-chevron-down',
             title: 'Emulate devices',

src/screencast/view.css

@@ -198,3 +198,31 @@ body {
 .devtools-open {
   color: #7dbae9;
 }
+
+.infobar {
+  flex-direction: row;
+  width: 100vw;
+  color: black;
+  background-color: rgb(254 246 213 / 100%);
+  height: 30px;
+}
+
+.infobar-message {
+  text-align: left;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: small;
+  padding: 5px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.infobar-close-button {
+  background-image: url('../../resources/Images/cross.svg');
+  background-repeat: no-repeat;
+  align-self: right;
+  background-size: 18px;
+  width: 20px;
+  height: 20px;
+  margin: 5px 10px 5px auto;
+}

src/screencast/view.ts

@@ -29,6 +29,7 @@ export class ScreencastView {
   </head>
   <body>
       <div id="main">
+          <div id="infobar"></div>
           <div id="toolbar">
               <button id="back" title="Back">
                   <i class="codicon codicon-arrow-left"></i>