Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(web): restores compat with older Android devices 🐵 #9943

Merged
merged 4 commits into from
Nov 14, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions android/KMEA/app/src/main/assets/keyboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
polyfill.
-->
<script src="es6-shim.min.js"></script>
<script src="other-polyfills.js"></script>
<script src="keymanweb-webview.js"></script>
<script src="sentry.min.js"></script>
<script src="keyman-sentry.js"></script>
Expand Down
17 changes: 17 additions & 0 deletions android/KMEA/app/src/main/assets/other-polyfills.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Needed by the KMW's gesture engine until Chrome 61.
var DOMRect = DOMRect || function (x, y, width, height) {
this.x = this.left = x;
this.y = this.top = y;
this.width = width;
this.height = height;
this.bottom = y + height;
this.right = x + width;
};

// https://stackoverflow.com/questions/53308396/how-to-polyfill-array-prototype-includes-for-ie8
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// https://stackoverflow.com/questions/53308396/how-to-polyfill-array-prototype-includes-for-ie8
// https://stackoverflow.com/questions/53308396/how-to-polyfill-array-prototype-includes-for-ie8
// Needed until Chrome 47

if(!Array.prototype.includes){
//or use Object.defineProperty
Array.prototype.includes = function(search){
return !!~this.indexOf(search);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Is there any syntax required for this polyfill to work with KeymanWeb's ES Modules?

echo "Copying es6-shim polyfill"
cp "$KEYMAN_ROOT/node_modules/es6-shim/es6-shim.min.js" "$ENGINE_ASSETS/es6-shim.min.js"

If this is the only KeymanWeb "asset" not copied from KeymanWeb, I'd probably add a comment about "other-polyfills.js" not needing to be copied.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

other-polyfills.js is hand-maintained, not being copied from a Node package. The only "copying" done here was copying the Array.prototype.includes polyfill used by the lm-worker into other-polyfills.js.

Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ public String toString() {
protected static final String KMFilename_KmwGlobeHintCss = "globe-hint.css";
protected static final String KMFilename_Osk_Ttf_Font = "keymanweb-osk.ttf";
protected static final String KMFilename_JSPolyfill = "es6-shim.min.js";
protected static final String KMFilename_JSPolyfill2 = "other-polyfills.js";

// Deprecated by KeyboardController.KMFilename_Installed_KeyboardsList
public static final String KMFilename_KeyboardsList = "keyboards_list.dat";
Expand Down Expand Up @@ -812,6 +813,7 @@ private static void copyAssets(Context context) {
// Copy default keyboard font
copyAsset(context, KMDefault_KeyboardFont, "", true);
copyAsset(context, KMFilename_JSPolyfill, "", true);
copyAsset(context, KMFilename_JSPolyfill2, "", true);

// Keyboard packages directory
File packagesDir = new File(getPackagesDir());
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,11 +125,11 @@ export class PaddedZoneSource implements RecognitionZoneSource {
getBoundingClientRect(): DOMRect {
const rootZone = this.root.getBoundingClientRect();

return DOMRect.fromRect({
x: rootZone.x + this.edgePadding.x,
y: rootZone.y + this.edgePadding.y,
width: rootZone.width - this.edgePadding.w,
height: rootZone.height - this.edgePadding.h
});
return new DOMRect(
/*x:*/ rootZone.x + this.edgePadding.x,
/*y:*/ rootZone.y + this.edgePadding.y,
/*width:*/ rootZone.width - this.edgePadding.w,
/*height:*/ rootZone.height - this.edgePadding.h
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ export class ViewportZoneSource implements RecognitionZoneSource {

getBoundingClientRect(): DOMRect {
// Viewport dimension detection is based on https://stackoverflow.com/a/8876069.
return DOMRect.fromRect({
y: 0,
x: 0,
width: Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
height: Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
});
return new DOMRect(
/*x:*/ 0,
/*y:*/ 0,
/*width:*/ Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
/*height:*/ Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
);
}
}
1 change: 1 addition & 0 deletions common/web/lm-worker/build-bundler.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ await esbuild.build(embeddedWorkerBuildOptions);
const minifiedProfilingOptions = {
...embeddedWorkerBuildOptions,
minify: true,
keepNames: false, // Do NOT enable - will break under Android 5.0 / Chrome 35 environments!
metafile: true,
write: false // don't actually write the file.
}
Expand Down
2 changes: 1 addition & 1 deletion common/web/lm-worker/build-wrap-and-minify.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ if(MINIFY) {
sourcemap: 'external',
sourcesContent: DEBUG,
minify: true,
keepNames: true,
keepNames: false, // Do NOT enable - will break under Android 5.0 / Chrome 35 environments!
Copy link
Contributor Author

@jahorton jahorton Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An update thanks to evanw/esbuild#3477 (comment): this is likely a non-issue starting in Chrome 43.

https://caniuse.com/mdn-javascript_builtins_function_name_configurable_true

target: 'es5',
outfile: `build/lib/worker-main.polyfilled.min.js`
});
Expand Down