New approach for handling keyboard layouts and keyboard events

.gitpod.dockerfile

@@ -0,0 +1,22 @@
+FROM gitpod/workspace-full-vnc:latest
+
+USER root
+# Install custom tools, runtime, etc.
+RUN apt-get update \
+    # window manager
+    && apt-get install -y jwm \
+    # electron
+    && apt-get install -y libgtk-3-0 libnss3 libasound2 \
+    # native-keymap
+    && apt-get install -y libx11-dev libxkbfile-dev \
+    && apt-get clean && rm -rf /var/cache/apt/* && rm -rf /var/lib/apt/lists/* && rm -rf /tmp/*
+
+USER gitpod
+# Apply user-specific settings
+RUN bash -c ". .nvm/nvm.sh \
+    && nvm install 10 \
+    && nvm use 10 \
+    && npm install -g yarn"
+
+# Give back control
+USER root

.gitpod.yml

@@ -1,8 +1,16 @@
+image:
+  file: .gitpod.dockerfile
 ports:
 - port: 3000
+- port: 6080
+  onOpen: ignore
+- port: 5900
+  onOpen: ignore
 tasks:
-- init: nvm install 10 && nvm use 10 && yarn
-  command: yarn --cwd examples/browser start ../..
+- init: yarn
+  command: >
+    jwm &
+    yarn --cwd examples/browser start ../..
 github:
   prebuilds:
     pullRequestsFromForks: true

.travis.yml

@@ -72,12 +72,15 @@ env:
     - NODE_OPTIONS="--max_old_space_size=4096"
 addons:
   apt:
+    update: true
     sources:
     - ubuntu-toolchain-r-test
     packages:
     - g++-4.8
     - oracle-java9-set-default
     - libsecret-1-dev
+    - libx11-dev
+    - libxkbfile-dev
     chrome: stable
 before_script:
   - export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start ;

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 Breaking changes:
 
+- [core] support native keyboard layouts [#4724](https://github.com/theia-ide/theia/pull/4724)
 - [node] moved to using Node.js version 10, dropping support for Node.js version 8.
 - [electron] removed cluster mode and startup timeout setting
 - [dialog] `validate` and `accept` methods are now Promisified [#4764](https://github.com/theia-ide/theia/pull/4764)

configs/base.tsconfig.json

@@ -11,6 +11,7 @@
         "experimentalDecorators": true,
         "emitDecoratorMetadata": true,
         "downlevelIteration": true,
+        "resolveJsonModule": true,
         "module": "commonjs",
         "moduleResolution": "node",
         "target": "es5",

dev-packages/application-manager/src/generator/frontend-generator.ts

@@ -129,6 +129,7 @@ const { app, shell, BrowserWindow, ipcMain, Menu } = electron;
 
 const applicationName = \`${this.pck.props.frontend.config.applicationName}\`;
 
+const nativeKeymap = require('native-keymap');
 const Storage = require('electron-store');
 const electronStore = new Storage();
 
@@ -213,6 +214,17 @@ app.on('ready', () => {
         newWindow.on('resize', saveWindowStateDelayed);
         newWindow.on('move', saveWindowStateDelayed);
 
+        // Notify the renderer process on keyboard layout change
+        nativeKeymap.onDidChangeKeyboardLayout(() => {
+            if (!newWindow.isDestroyed()) {
+                const newLayout = {
+                    info: nativeKeymap.getCurrentKeyboardLayout(),
+                    mapping: nativeKeymap.getKeyMap()
+                };
+                newWindow.webContents.send('keyboardLayoutChanged', newLayout);
+            }
+        });
+
         if (!!theUrl) {
             newWindow.loadURL(theUrl);
         }

dev-packages/application-manager/src/rebuild.ts

@@ -21,7 +21,7 @@ import cp = require('child_process');
 export function rebuild(target: 'electron' | 'browser', modules: string[]) {
     const nodeModulesPath = path.join(process.cwd(), 'node_modules');
     const browserModulesPath = path.join(process.cwd(), '.browser_modules');
-    const modulesToProcess = modules || ['@theia/node-pty', 'nsfw', 'find-git-repositories'];
+    const modulesToProcess = modules || ['@theia/node-pty', 'nsfw', 'native-keymap', 'find-git-repositories'];
 
     if (target === 'electron' && !fs.existsSync(browserModulesPath)) {
         const dependencies: {

packages/core/package.json

@@ -31,6 +31,7 @@
     "inversify": "^4.14.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
+    "native-keymap": "^1.2.5",
     "nsfw": "^1.2.2",
     "perfect-scrollbar": "^1.3.0",
     "react": "^16.4.1",
@@ -56,6 +57,10 @@
     {
       "frontend": "lib/browser/window/browser-window-module",
       "frontendElectron": "lib/electron-browser/window/electron-window-module"
+    },
+    {
+      "frontend": "lib/browser/keyboard/browser-keyboard-module",
+      "frontendElectron": "lib/electron-browser/keyboard/electron-keyboard-module"
     }
   ],
   "keywords": [
@@ -79,10 +84,12 @@
     "clean": "theiaext clean",
     "build": "theiaext build",
     "watch": "theiaext watch",
-    "test": "theiaext test"
+    "test": "theiaext test",
+    "generate-layout": "electron ./scripts/generate-layout"
   },
   "devDependencies": {
-    "@theia/ext-scripts": "^0.5.0"
+    "@theia/ext-scripts": "^0.5.0",
+    "minimist": "^1.2.0"
   },
   "nyc": {
     "extends": "../../configs/nyc.json"

packages/core/scripts/generate-layout.js

@@ -0,0 +1,53 @@
+/********************************************************************************
+ * 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+const parseArgs = require('minimist');
+const nativeKeymap = require('native-keymap');
+const fs = require('fs');
+const electron = require('electron');
+
+/*
+ * Usage:
+ *     yarn generate-layout [--info] [--pretty] [--output file]
+ *
+ * --info          Print the keyboard layout information; if omitted, the full
+ *                 keyboard layout with info and mapping is printed.
+ * --pretty        Pretty-print the JSON output.
+ * --output file   Write the output to the given file instead of stdout.
+ */
+const args = parseArgs(process.argv);
+const printInfo = args.info;
+const prettyPrint = args.pretty;
+const outFile = args.output;
+
+let output;
+if (printInfo) {
+    output = nativeKeymap.getCurrentKeyboardLayout();
+} else {
+    output = {
+        info: nativeKeymap.getCurrentKeyboardLayout(),
+        mapping: nativeKeymap.getKeyMap()
+    };
+}
+
+const stringOutput = JSON.stringify(output, undefined, prettyPrint ? 2 : undefined);
+if (outFile) {
+    fs.writeFileSync(outFile, stringOutput);
+} else {
+    console.log(stringOutput);
+}
+
+electron.app.quit();

packages/core/src/browser/dialogs.ts

@@ -16,7 +16,7 @@
 
 import { injectable, inject } from 'inversify';
 import { Disposable, MaybePromise, CancellationTokenSource } from '../common';
-import { Key } from './keys';
+import { Key } from './keyboard/keys';
 import { Widget, BaseWidget, Message } from './widgets';
 
 @injectable()

packages/core/src/browser/frontend-application-module.ts

@@ -71,6 +71,7 @@ import { QuickPickServiceImpl } from './quick-open/quick-pick-service-impl';
 import { QuickPickService, quickPickServicePath } from '../common/quick-pick-service';
 import { ContextKeyService } from './context-key-service';
 import { ResourceContextKey } from './resource-context-key';
+import { KeyboardLayoutService } from './keyboard/keyboard-layout-service';
 
 export const frontendApplicationModule = new ContainerModule((bind, unbind, isBound, rebind) => {
     const themeService = ThemeService.get();
@@ -144,6 +145,7 @@ export const frontendApplicationModule = new ContainerModule((bind, unbind, isBo
     bind(MenuModelRegistry).toSelf().inSingletonScope();
     bindContributionProvider(bind, MenuContribution);
 
+    bind(KeyboardLayoutService).toSelf().inSingletonScope();
     bind(KeybindingRegistry).toSelf().inSingletonScope();
     bindContributionProvider(bind, KeybindingContext);
     bindContributionProvider(bind, KeybindingContribution);

packages/core/src/browser/frontend-application.ts

@@ -296,7 +296,7 @@ export class FrontendApplication {
          * - consider treat commands, keybindings and menus as frontend application contributions
          */
         this.commands.onStart();
-        this.keybindings.onStart();
+        await this.keybindings.onStart();
         this.menus.onStart();
         for (const contribution of this.contributions.getContributions()) {
             if (contribution.onStart) {

packages/core/src/browser/index.ts

@@ -16,6 +16,7 @@
 
 export * from './shell';
 export * from './frontend-application';
+export * from './keyboard';
 export * from './opener-service';
 export * from './browser';
 export * from './context-menu-renderer';
@@ -31,7 +32,6 @@ export * from './saveable';
 export * from './storage-service';
 export * from './preferences';
 export * from './keybinding';
-export * from './keys';
 export * from './status-bar';
 export * from './label-provider';
 export * from './widget-open-handler';