- Hotfix: address fullscreen fallback in Chrome m76

 - Document the nature of the workaround
 - Add note about order of click handlers
 - v0.5.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@google/model-viewer",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Easily display interactive 3D models on the web and in AR!",
   "repository": "https://github.com/GoogleWebComponents/model-viewer",
   "bugs": {

src/features/ar.ts

@@ -104,6 +104,10 @@ const $arMode = Symbol('arMode');
 const $canLaunchQuickLook = Symbol('canLaunchQuickLook');
 const $quickLookBrowsers = Symbol('quickLookBrowsers');
 
+const $arButtonContainerFallbackClickHandler =
+    Symbol('arButtonContainerFallbackClickHandler');
+const $onARButtonContainerFallbackClick =
+    Symbol('onARButtonContainerFallbackClick');
 const $arButtonContainerClickHandler = Symbol('arButtonContainerClickHandler');
 const $onARButtonContainerClick = Symbol('onARButtonContainerClick');
 
@@ -157,6 +161,16 @@ export const ARMixin = (ModelViewerElement:
             this.shadowRoot!.querySelector('#default-exit-fullscreen-button') as
             HTMLElement;
 
+        // NOTE(cdata): We use a second, separate "fallback" click handler in
+        // order to work around a regression in how Chrome on Android behaves
+        // when requesting fullscreen at the same time as triggering an intent.
+        // As of m76, intents could no longer be triggered successfully if they
+        // were dispatched in the same handler as the fullscreen request. The
+        // workaround is to split both effects into their own event handlers.
+        // @see https://github.com/GoogleWebComponents/model-viewer/issues/693
+        protected[$arButtonContainerFallbackClickHandler] = (event: Event) =>
+            this[$onARButtonContainerFallbackClick](event);
+
         protected[$arButtonContainerClickHandler]: (event: Event) => void =
             (event) => this[$onARButtonContainerClick](event);
 
@@ -185,7 +199,6 @@ export const ARMixin = (ModelViewerElement:
               await this[$enterARWithWebXR]();
               break;
             case ARMode.AR_VIEWER:
-              this.requestFullscreen();
               openARViewer(this.src!, this.alt || '');
               break;
             default:
@@ -300,19 +313,34 @@ configuration or device capabilities');
 
           if (showArButton) {
             this[$arButtonContainer].classList.add('enabled');
+            // NOTE(cdata): The order of the two click handlers on the "ar
+            // button container" is important, vital to the workaround described
+            // earlier in this file. Reversing their order will cause our Scene
+            // Viewer integration to break.
+            // @see https://github.com/GoogleWebComponents/model-viewer/issues/693
             this[$arButtonContainer].addEventListener(
                 'click', this[$arButtonContainerClickHandler]);
+            this[$arButtonContainer].addEventListener(
+                'click', this[$arButtonContainerFallbackClickHandler]);
             this[$exitFullscreenButtonContainer].addEventListener(
                 'click', this[$exitFullscreenButtonContainerClickHandler]);
           } else {
             this[$arButtonContainer].removeEventListener(
                 'click', this[$arButtonContainerClickHandler]);
+            this[$arButtonContainer].removeEventListener(
+                'click', this[$arButtonContainerFallbackClickHandler]);
             this[$exitFullscreenButtonContainer].removeEventListener(
                 'click', this[$exitFullscreenButtonContainerClickHandler]);
             this[$arButtonContainer].classList.remove('enabled');
           }
         }
 
+        [$onARButtonContainerFallbackClick](_event: Event) {
+          if (this[$arMode] === ARMode.AR_VIEWER) {
+            this.requestFullscreen();
+          }
+        }
+
         [$onARButtonContainerClick](event: Event) {
           event.preventDefault();
           this.activateAR();

src/template.ts

@@ -252,7 +252,7 @@ template.innerHTML = `
 
     <div class="slot ar-button">
       <slot name="ar-button">
-        <a id="default-ar-button" class="fab" href="#"
+        <a id="default-ar-button" class="fab"
             tabindex="2"
             aria-label="View this 3D model up close">
           ${ARGlyph}