feat: add common browser detection utils (#3062) (#3063)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Nov 16, 2021 · 0a97f54 · 0a97f54
1 parent 62df481
commit 0a97f54
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 21 deletions.
diff --git a/packages/app-layout/src/detect-ios-navbar.js b/packages/app-layout/src/detect-ios-navbar.js
@@ -1,6 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
+
 export const _detectIosNavbar = function () {
   /* c8 ignore next 11 */
-  if (window.navigator.userAgent.match(/iPhone|iPad/i)) {
+  if (isIOS) {
     const innerHeight = window.innerHeight;
     const innerWidth = window.innerWidth;
     const landscape = innerWidth > innerHeight;

diff --git a/packages/component-base/src/browser-utils.js b/packages/component-base/src/browser-utils.js
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+export const isAndroid = /android/i.test(navigator.userAgent);
+
+export const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+
+export const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+export const isIOS =
+  (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
+  (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+
+export const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
diff --git a/packages/component-base/src/virtualizer-iron-list-adapter.js b/packages/component-base/src/virtualizer-iron-list-adapter.js
@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { animationFrame, timeOut } from './async.js';
+import { isSafari } from './browser-utils.js';
 import { Debouncer, flush } from './debounce.js';
 import { ironList } from './iron-list-core.js';
 
@@ -25,8 +26,6 @@ export class IronListAdapter {
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
-    this.__safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
     this.timeouts = {
       SCROLL_REORDER: 500,
       IGNORE_WHEEL: 500
@@ -452,7 +451,7 @@ export class IronListAdapter {
     // Due to a rendering bug, reordering the rows can make parts of the scroll target disappear
     // on Safari when using sticky positioning in case the scroll target is inside a flexbox.
     // This issue manifests with grid (the header can disappear if grid is used inside a flexbox)
-    if (this.__safari) {
+    if (isSafari) {
       const { transform } = this.scrollTarget.style;
       this.scrollTarget.style.transform = 'translateZ(0)';
       setTimeout(() => (this.scrollTarget.style.transform = transform));

diff --git a/packages/context-menu/src/vaadin-contextmenu-event.js b/packages/context-menu/src/vaadin-contextmenu-event.js
@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { prevent, register } from '@polymer/polymer/lib/utils/gestures.js';
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 
 register({
   name: 'vaadin-contextmenu',
@@ -16,10 +17,7 @@ register({
   emits: ['vaadin-contextmenu'],
 
   info: {
-    sourceEvent: null,
-    _ios:
-      (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
-      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+    sourceEvent: null
   },
 
   reset: function () {
@@ -50,7 +48,7 @@ register({
     this._timerId = setTimeout(() => {
       const ct = e.changedTouches[0];
       if (!e.shiftKey) {
-        if (this.info._ios) {
+        if (isIOS) {
           this._fired = true;
           this.fire(t, ct.clientX, ct.clientY);
         }

diff --git a/packages/custom-field/src/vaadin-custom-field.js b/packages/custom-field/src/vaadin-custom-field.js
@@ -5,6 +5,7 @@
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isChrome } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
@@ -279,7 +280,6 @@ class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(Polym
 
   /** @private */
   __fixChromeFocus() {
-    const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
     this.addEventListener('keydown', (e) => {
       if (e.keyCode === 9) {
         // FIXME(yuriy): remove this workaround once this issue is fixed:

diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js
@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
@@ -307,7 +308,7 @@ export const DatePickerMixin = (subclass) =>
         /** @private */
         _ios: {
           type: Boolean,
-          value: navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/)
+          value: isIOS
         },
 
         /** @private */

diff --git a/packages/date-picker/src/vaadin-infinite-scroller.js b/packages/date-picker/src/vaadin-infinite-scroller.js
@@ -7,6 +7,7 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
 /**
@@ -137,7 +138,6 @@ class InfiniteScroller extends PolymerElement {
 
     // Firefox interprets elements with overflow:auto as focusable
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
-    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
     if (isFirefox) {
       this.$.scroller.tabIndex = -1;
     }

diff --git a/packages/grid/src/vaadin-grid.js b/packages/grid/src/vaadin-grid.js
@@ -7,6 +7,7 @@ import './vaadin-grid-column.js';
 import './vaadin-grid-styles.js';
 import { beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isAndroid, isFirefox, isIOS, isSafari } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { Virtualizer } from '@vaadin/component-base/src/virtualizer.js';
@@ -326,27 +327,25 @@ class Grid extends ElementMixin(
       /** @private */
       _safari: {
         type: Boolean,
-        value: /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+        value: isSafari
       },
 
       /** @private */
       _ios: {
         type: Boolean,
-        value:
-          (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) ||
-          (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+        value: isIOS
       },
 
       /** @private */
       _firefox: {
         type: Boolean,
-        value: navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+        value: isFirefox
       },
 
       /** @private */
       _android: {
         type: Boolean,
-        value: /android/i.test(navigator.userAgent)
+        value: isAndroid
       },
 
       /** @private */

diff --git a/packages/notification/src/vaadin-notification.js b/packages/notification/src/vaadin-notification.js
@@ -6,6 +6,7 @@
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { render } from 'lit';
 import { isTemplateResult } from 'lit/directive-helpers.js';
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -128,7 +129,7 @@ class NotificationContainer extends ThemableMixin(ElementMixin(PolymerElement))
   constructor() {
     super();
 
-    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+    if (isIOS) {
       this._boundIosResizeListener = () => this._detectIosNavbar();
     }
   }

diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor.js b/packages/rich-text-editor/src/vaadin-rich-text-editor.js
@@ -12,6 +12,7 @@ import './vaadin-rich-text-editor-toolbar-styles.js';
 import { resetMouseCanceller } from '@polymer/polymer/lib/utils/gestures.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -566,7 +567,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
     this.__patchKeyboard();
 
     /* istanbul ignore if */
-    if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+    if (isFirefox) {
       this.__patchFirefoxFocus();
     }
 

diff --git a/packages/vaadin-overlay/src/vaadin-overlay.js b/packages/vaadin-overlay/src/vaadin-overlay.js
@@ -7,6 +7,7 @@ import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nod
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { FocusablesHelper } from './vaadin-focusables-helper.js';
@@ -359,7 +360,7 @@ class OverlayElement extends ThemableMixin(DirMixin(PolymerElement)) {
     this._boundIronOverlayCanceledListener = this._ironOverlayCanceled.bind(this);
 
     /* c8 ignore next 3 */
-    if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+    if (isIOS) {
       this._boundIosResizeListener = () => this._detectIosNavbar();
     }
   }