Add search history hint

packages/core/src/browser/common-frontend-contribution.ts

@@ -356,6 +356,10 @@ export const supportPaste = browser.isNative || (!browser.isChrome && document.q
 
 export const RECENT_COMMANDS_STORAGE_KEY = 'commands';
 
+export const CLASSNAME_OS_MAC = 'mac';
+export const CLASSNAME_OS_WINDOWS = 'windows';
+export const CLASSNAME_OS_LINUX = 'linux';
+
 @injectable()
 export class CommonFrontendContribution implements FrontendApplicationContribution, MenuContribution, CommandContribution, KeybindingContribution, ColorContribution {
 
@@ -448,6 +452,7 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
         this.initResourceContextKeys();
         this.registerCtrlWHandling();
 
+        this.setOsClass();
         this.updateStyles();
         this.preferences.ready.then(() => this.setSashProperties());
         this.preferences.onPreferenceChanged(e => this.handlePreferenceChange(e, app));
@@ -476,6 +481,16 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
         });
     }
 
+    protected setOsClass(): void {
+        if (isOSX) {
+            document.body.classList.add(CLASSNAME_OS_MAC);
+        } else if (isWindows) {
+            document.body.classList.add(CLASSNAME_OS_WINDOWS);
+        } else {
+            document.body.classList.add(CLASSNAME_OS_LINUX);
+        }
+    }
+
     protected updateStyles(): void {
         document.body.classList.remove('theia-editor-highlightModifiedTabs');
         if (this.preferences['workbench.editor.highlightModifiedTabs']) {

packages/core/src/browser/style/index.css

@@ -322,6 +322,7 @@ button.secondary[disabled],
 | Import children style files
 |----------------------------------------------------------------------------*/
 
+@import "./os.css";
 @import "./dockpanel.css";
 @import "./dialog.css";
 @import "./menus.css";

packages/core/src/browser/style/os.css

@@ -0,0 +1,87 @@
+/********************************************************************************
+ * Copyright (C) 2019 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.mac {
+  --theia-ui-font-family: -apple-system,BlinkMacSystemFont,sans-serif
+}
+
+.mac:lang(zh-Hans) {
+  --theia-ui-font-family: -apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,sans-serif
+}
+
+.mac:lang(zh-Hant) {
+  --theia-ui-font-family: -apple-system,BlinkMacSystemFont,PingFang TC,sans-serif
+}
+
+.mac:lang(ja) {
+  --theia-ui-font-family: -apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic Pro,sans-serif
+}
+
+.mac:lang(ko) {
+  --theia-ui-font-family: -apple-system,BlinkMacSystemFont,Nanum Gothic,Apple SD Gothic Neo,AppleGothic,sans-serif
+}
+
+.windows {
+  --theia-ui-font-family: Segoe WPC,Segoe UI,sans-serif
+}
+
+.windows:lang(zh-Hans) {
+  --theia-ui-font-family: Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif
+}
+
+.windows:lang(zh-Hant) {
+  --theia-ui-font-family: Segoe WPC,Segoe UI,Microsoft Jhenghei,sans-serif
+}
+
+.windows:lang(ja) {
+  --theia-ui-font-family: Segoe WPC,Segoe UI,Yu Gothic UI,Meiryo UI,sans-serif
+}
+
+.windows:lang(ko) {
+  --theia-ui-font-family: Segoe WPC,Segoe UI,Malgun Gothic,Dotom,sans-serif
+}
+
+.linux {
+  --theia-ui-font-family: system-ui,Ubuntu,Droid Sans,sans-serif
+}
+
+.linux:lang(zh-Hans) {
+  --theia-ui-font-family: system-ui,Ubuntu,Droid Sans,Source Han Sans SC,Source Han Sans CN,Source Han Sans,sans-serif
+}
+
+.linux:lang(zh-Hant) {
+  --theia-ui-font-family: system-ui,Ubuntu,Droid Sans,Source Han Sans TC,Source Han Sans TW,Source Han Sans,sans-serif
+}
+
+.linux:lang(ja) {
+  --theia-ui-font-family: system-ui,Ubuntu,Droid Sans,Source Han Sans J,Source Han Sans JP,Source Han Sans,sans-serif
+}
+
+.linux:lang(ko) {
+  --theia-ui-font-family: system-ui,Ubuntu,Droid Sans,Source Han Sans K,Source Han Sans JR,Source Han Sans,UnDotum,FBaekmuk Gulim,sans-serif
+}
+
+.mac {
+  --monaco-monospace-font: "SF Mono",Monaco,Menlo,Courier,monospace
+}
+
+.windows {
+  --monaco-monospace-font: Consolas,"Courier New",monospace
+}
+
+.linux {
+  --monaco-monospace-font: "Ubuntu Mono","Liberation Mono","DejaVu Sans Mono","Courier New",monospace
+}

packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx

@@ -501,9 +501,14 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
             {notification}
         </div>;
     }
-
-    protected handleFocusSearchInputBox = () => this.contextKeyService.setSearchInputBoxFocus(true);
-    protected handleBlurSearchInputBox = () => this.contextKeyService.setSearchInputBoxFocus(false);
+    protected handleFocusSearchInputBox = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        event.target.placeholder = `${SearchInWorkspaceWidget.LABEL} (⇅ ${nls.localizeByDefault('for history')})`;
+        this.contextKeyService.setSearchInputBoxFocus(true);
+    };
+    protected handleBlurSearchInputBox = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        event.target.placeholder = SearchInWorkspaceWidget.LABEL;
+        this.contextKeyService.setSearchInputBoxFocus(false);
+    };
 
     protected readonly updateReplaceTerm = (e: React.KeyboardEvent) => this.doUpdateReplaceTerm(e);
     protected doUpdateReplaceTerm(e: React.KeyboardEvent): void {
@@ -535,8 +540,14 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         </div>;
     }
 
-    protected handleFocusReplaceInputBox = () => this.contextKeyService.setReplaceInputBoxFocus(true);
-    protected handleBlurReplaceInputBox = () => this.contextKeyService.setReplaceInputBoxFocus(false);
+    protected handleFocusReplaceInputBox = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        event.target.placeholder = `${nls.localizeByDefault('Replace')} (⇅ ${nls.localizeByDefault('for history')})`;
+        this.contextKeyService.setReplaceInputBoxFocus(true);
+    };
+    protected handleBlurReplaceInputBox = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+        event.target.placeholder = nls.localizeByDefault('Replace');
+        this.contextKeyService.setReplaceInputBoxFocus(false);
+    };
 
     protected renderReplaceAllButtonContainer(): React.ReactNode {
         // The `Replace All` button is enabled if there is a search term present with results.