#4079: New approach for handling keyboard layouts and keyboard events

Signed-off-by: Miro Spönemann <miro.spoenemann@typefox.io>

.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 ;

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

@@ -132,6 +132,7 @@ const applicationName = \`${this.pck.props.frontend.config.applicationName}\`;
 
 if (isMaster) {
 
+    const nativeKeymap = require('native-keymap');
     const Storage = require('electron-store');
     const electronStore = new Storage();
 
@@ -214,6 +215,17 @@ if (isMaster) {
             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": [
@@ -80,10 +85,12 @@
     "build": "theiaext build",
     "watch": "theiaext watch",
     "test": "theiaext test",
-    "docs": "theiaext docs"
+    "docs": "theiaext docs",
+    "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 } 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';