@theia/mini-browser 1.18.0-next.d3501165 → 1.19.0

package/src/browser/mini-browser-open-handler.ts

@@ -18,7 +18,7 @@ import { Widget } from '@theia/core/shared/@phosphor/widgets';
 import { injectable, inject, optional } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
 import { MaybePromise } from '@theia/core/lib/common/types';
-import { QuickInputService } from '@theia/core/lib/browser';
+import { codicon, QuickInputService } from '@theia/core/lib/browser';
 import { ApplicationShell } from '@theia/core/lib/browser/shell';
 import { Command, CommandContribution, CommandRegistry } from '@theia/core/lib/common/command';
 import { MenuContribution, MenuModelRegistry } from '@theia/core/lib/common/menu';
@@ -31,29 +31,39 @@ import { WidgetOpenerOptions } from '@theia/core/lib/browser/widget-open-handler
 import { MiniBrowserService } from '../common/mini-browser-service';
 import { MiniBrowser, MiniBrowserProps } from './mini-browser';
 import { LocationMapperService } from './location-mapper-service';
+import { nls } from '@theia/core/lib/common/nls';
 
 export namespace MiniBrowserCommands {
-    export const PREVIEW: Command = {
+
+    export const PREVIEW_CATEGORY_KEY = 'vscode/extensionEditor/preview';
+    export const PREVIEW_CATEGORY = 'Preview';
+
+    export const PREVIEW = Command.toLocalizedCommand({
         id: 'mini-browser.preview',
         label: 'Open Preview',
-        iconClass: 'theia-open-preview-icon'
-    };
+        iconClass: codicon('open-preview')
+    }, 'vscode/mainThreadFileSystemEventService/preview');
     export const OPEN_SOURCE: Command = {
         id: 'mini-browser.open.source',
-        iconClass: 'theia-open-file-icon'
+        iconClass: codicon('go-to-file')
     };
-    export const OPEN_URL: Command = {
+    export const OPEN_URL = Command.toLocalizedCommand({
         id: 'mini-browser.openUrl',
-        category: 'Preview',
+        category: PREVIEW_CATEGORY,
         label: 'Open URL'
-    };
+    }, 'vscode/url.contribution/openUrl', PREVIEW_CATEGORY_KEY);
 }
 
 /**
  * Further options for opening a new `Mini Browser` widget.
  */
 export interface MiniBrowserOpenerOptions extends WidgetOpenerOptions, MiniBrowserProps {
-
+    /**
+     * Controls how the mini-browser widget should be opened.
+     * - `source`: editable source.
+     * - `preview`: rendered content of the source.
+     */
+    openFor?: 'source' | 'preview';
 }
 
 @injectable()
@@ -73,7 +83,7 @@ export class MiniBrowserOpenHandler extends NavigatableWidgetOpenHandler<MiniBro
     protected readonly supportedExtensions: Map<string, number> = new Map();
 
     readonly id = MiniBrowser.ID;
-    readonly label = 'Preview';
+    readonly label = nls.localize(MiniBrowserCommands.PREVIEW_CATEGORY_KEY, MiniBrowserCommands.PREVIEW_CATEGORY);
 
     @inject(OpenerService)
     protected readonly openerService: OpenerService;
@@ -99,14 +109,20 @@ export class MiniBrowserOpenHandler extends NavigatableWidgetOpenHandler<MiniBro
         });
     }
 
-    canHandle(uri: URI): number {
+    canHandle(uri: URI, options?: MiniBrowserOpenerOptions): number {
         // It does not guard against directories. For instance, a folder with this name: `Hahahah.html`.
         // We could check with the FS, but then, this method would become async again.
         const extension = uri.toString().split('.').pop();
-        if (extension) {
+        if (!extension) {
+            return 0;
+        }
+        if (options?.openFor === 'source') {
+            return -100;
+        } else if (options?.openFor === 'preview') {
+            return 200; // higher than that of the editor.
+        } else {
             return this.supportedExtensions.get(extension.toLocaleLowerCase()) || 0;
         }
-        return 0;
     }
 
     async open(uri: URI, options?: MiniBrowserOpenerOptions): Promise<MiniBrowser> {
@@ -204,12 +220,12 @@ export class MiniBrowserOpenHandler extends NavigatableWidgetOpenHandler<MiniBro
         toolbar.registerItem({
             id: MiniBrowserCommands.PREVIEW.id,
             command: MiniBrowserCommands.PREVIEW.id,
-            tooltip: 'Open Preview to the Side'
+            tooltip: nls.localize('theia/preview/openPreviewSide', 'Open Preview to the Side')
         });
         toolbar.registerItem({
             id: MiniBrowserCommands.OPEN_SOURCE.id,
             command: MiniBrowserCommands.OPEN_SOURCE.id,
-            tooltip: 'Open Source'
+            tooltip: nls.localize('theia/preview/openSource', 'Open Source')
         });
     }
 
@@ -240,7 +256,8 @@ export class MiniBrowserOpenHandler extends NavigatableWidgetOpenHandler<MiniBro
         }
         await this.open(uri, {
             mode: 'reveal',
-            widgetOptions: { ref, mode: 'open-to-right' }
+            widgetOptions: { ref, mode: 'open-to-right' },
+            openFor: 'preview'
         });
     }
 
@@ -248,7 +265,8 @@ export class MiniBrowserOpenHandler extends NavigatableWidgetOpenHandler<MiniBro
         const uri = this.getSourceUri(ref);
         if (uri) {
             await open(this.openerService, uri, {
-                widgetOptions: { ref, mode: 'open-to-left' }
+                widgetOptions: { ref, mode: 'tab-after' },
+                openFor: 'source'
             });
         }
     }
@@ -263,8 +281,8 @@ export class MiniBrowserOpenHandler extends NavigatableWidgetOpenHandler<MiniBro
 
     protected async openUrl(arg?: string): Promise<void> {
         const url = arg ? arg : await this.quickInputService?.input({
-            prompt: 'URL to open',
-            placeHolder: 'Type a URL'
+            prompt: nls.localize('vscode/url.contribution/urlToOpen', 'URL to open'),
+            placeHolder: nls.localize('theia/mini-browser/typeUrl', 'Type a URL')
         });
         if (url) {
             await this.openPreview(url);
@@ -279,14 +297,15 @@ export class MiniBrowserOpenHandler extends NavigatableWidgetOpenHandler<MiniBro
     protected async getOpenPreviewProps(startPage: string): Promise<MiniBrowserOpenerOptions> {
         const resetBackground = await this.resetBackground(new URI(startPage));
         return {
-            name: 'Preview',
+            name: nls.localize(MiniBrowserCommands.PREVIEW_CATEGORY_KEY, MiniBrowserCommands.PREVIEW_CATEGORY),
             startPage,
             toolbar: 'read-only',
             widgetOptions: {
                 area: 'right'
             },
             resetBackground,
-            iconClass: 'theia-mini-browser-icon'
+            iconClass: codicon('preview'),
+            openFor: 'preview'
         };
     }
 

package/src/browser/mini-browser.ts

@@ -19,7 +19,7 @@ import { Message } from '@theia/core/shared/@phosphor/messaging';
 import URI from '@theia/core/lib/common/uri';
 import { NavigatableWidget, StatefulWidget } from '@theia/core/lib/browser';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import { BaseWidget, PanelLayout } from '@theia/core/lib/browser/widgets/widget';
+import { BaseWidget, codicon, PanelLayout } from '@theia/core/lib/browser/widgets/widget';
 import { MiniBrowserProps, MiniBrowserContentFactory } from './mini-browser-content';
 
 export { MiniBrowserProps };
@@ -33,7 +33,7 @@ export class MiniBrowserOptions {
 export class MiniBrowser extends BaseWidget implements NavigatableWidget, StatefulWidget {
 
     static ID = 'mini-browser';
-    static ICON = 'fa fa-globe';
+    static ICON = codicon('globe');
 
     @inject(MiniBrowserOptions)
     protected readonly options: MiniBrowserOptions;

package/src/browser/style/index.css

@@ -24,11 +24,6 @@
     height: 100%;
 }
 
-.theia-mini-browser-icon {
-    mask: url('mini-browser.svg');
-    -webkit-mask: url('mini-browser.svg');
-}
-
 .theia-mini-browser-toolbar {
     margin-top: 8px;
     display: flex;