Visually disable VR Shell back/forward buttons when no history is available

chrome/browser/resources/vr_shell/vr_shell_ui.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 var vrShellUi = (function() {
   'use strict';
 
   let ui = new scene.Scene();
   let uiManager;
   let nativeCommandHandler;
@@ skipping 143 matching lines @@
       this.id = ui.addElement(element);
       this.domElement = domElement;
     }
   };
 
   class Button {
     constructor(domId, callback, parentId) {
       let captionId = domId + '-caption';
       this.button = document.querySelector(domId);
       this.caption = document.querySelector(captionId);
+      this.enabled = true;
 
       // Create an invisible parent, from which the button will hover.
       let backing = new api.UiElement(0, 0, 0, 0);
       backing.setParentId(parentId);
       backing.setVisible(false);
       this.backingElementId = ui.addElement(backing);
 
       this.buttonElement = new DomUiElement(domId);
       let update = new api.UiElementUpdate();
       update.setParentId(this.backingElementId);
       ui.updateElement(this.buttonElement.id, update);
 
       this.captionElement = new DomUiElement(captionId);
       update = new api.UiElementUpdate();
       update.setParentId(this.buttonElement.id);
       update.setTranslation(0, -this.captionElement.sizeY / 2, 0);
       update.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
       ui.updateElement(this.captionElement.id, update);
 
       this.button.addEventListener('mouseenter', this.onMouseEnter.bind(this));
       this.button.addEventListener('mouseleave', this.onMouseLeave.bind(this));
       this.button.addEventListener('click', callback);

[mthiesse, 2017/03/08 16:25:07]

We should also store this callback and add/remove it when enabling/disabling the
button.

[mthiesse, 2017/03/08 19:40:37]

I think you missed this comment?

[acondor_, 2017/03/08 20:21:39]

Done.

     }
 
     setTranslation(x, y, z) {
       let update = new api.UiElementUpdate();
       update.setTranslation(x, y, z);
       ui.updateElement(this.backingElementId, update);
     }
 
     setVisible(visible) {
       let update = new api.UiElementUpdate();
       update.setVisible(visible);
       ui.updateElement(this.buttonElement.id, update);
       update = new api.UiElementUpdate();
       update.setVisible(visible);
       ui.updateElement(this.captionElement.id, update);
     }
 
+    setEnabled(enabled) {
+      this.enabled = enabled;
+      if (enabled) {
+        this.button.classList.remove('disabled-button');
+      } else {
+        this.button.classList.add('disabled-button');
+      }
+    }
+
     configure(buttonOpacity, captionOpacity, distanceForward) {
       this.button.style.opacity = buttonOpacity;
       this.caption.style.opacity = captionOpacity;
 
       let anim = new api.Animation(this.buttonElement.id, ANIM_DURATION);
       anim.setTranslation(0, 0, distanceForward);
       ui.addAnimation(anim);
       ui.flush();
     }
 
     onMouseEnter() {
-      this.configure(1, 1, 0.015);
+      if (this.enabled) {
+        this.configure(1, 1, 0.015);
+      }
     }
 
     onMouseLeave() {
       this.configure(0.8, 0, 0);
     }
   };
 
   class Controls {
     constructor(contentQuadId) {
       this.enabled = false;
@@ skipping 43 matching lines @@
     setEnabled(enabled) {
       this.enabled = enabled;
       this.configure();
     }
 
     configure() {
       for (let i = 0; i < this.buttons.length; i++) {
         this.buttons[i].setVisible(this.enabled);
       }
     }
+
+    setBackButtonEnabled(enabled) {
+      this.buttons[0].setEnabled(enabled);

[cjgrant, 2017/03/08 16:32:14]

This indexing looks a bit risky.  Anyone could reorder the buttons above, and
break this.  Maybe get rid of 'descriptors' above, manually build each element
and append them to a list (keeping explicit references to the back and forward
buttons), then have the for loop walk through the list of existing elements
instead.  Just a thought...

[amp, 2017/03/08 16:34:14]

These hard coded indexes seem fragile if we ever happen to change the button
order or add new ones etc.

[acondor_, 2017/03/08 16:42:26]

I agree with the fact that it's risky and the suggested solution seems
reasonable to me. Or, we could make `buttons` an object instead of an array.
What do you think?

[cjgrant, 2017/03/08 18:19:32]

The array was used only as a convenience for positioning a variable number of
buttons in a row, and for showing/hiding them all easily.  I'm not attached to
that idea, so feel free to suggest any modification through this review. :)

+    }
+
+    setForwardButtonEnabled(enabled) {
+      this.buttons[2].setEnabled(enabled);
+    }
   };
 
   /**
    * A button to trigger a reload of the HTML UI for development purposes.
    */
   class ReloadUiButton {
     constructor() {
       this.enabled = false;
       this.devMode = false;
 
@@ skipping 615 matching lines @@
       anim.setScale(scale, scale, scale);
       ui.addAnimation(anim);
     }
   };
 
   class UiManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
       this.menuMode = false;
       this.fullscreen = false;
+      this.canGoBack = false;
+      this.canGoForward = false;
 
       this.background = new Background();
       this.contentQuad = new ContentQuad();
       let contentId = this.contentQuad.getElementId();
 
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
       this.urlIndicator = new UrlIndicator();
       this.omnibox = new Omnibox();
       this.reloadUiButton = new ReloadUiButton();
       this.tabContainer = new TabContainer(contentId);
       this.keyboard = new VirtualKeyboard(contentId);
     }
 
     setMode(mode) {
       this.mode = mode;
       this.updateState();
     }
 
     setFullscreen(fullscreen) {
       this.fullscreen = fullscreen;
       this.updateState();
     }
 
     handleAppButtonClicked() {
       this.menuMode = !this.menuMode;
       this.updateState();
     }
 
+    setHistoryButtonsEnabled(canGoBack, canGoForward) {
+      this.canGoBack = canGoBack;
+      this.canGoForward = canGoForward;
+      this.updateState();
+    }
+
     updateState() {
       /** @const */ var URL_INDICATOR_VISIBILITY_TIMEOUT_MS = 5000;
 
       let mode = this.mode;
       let menuMode = this.menuMode;
       let fullscreen = this.fullscreen;
 
       api.doAction(api.Action.SET_CONTENT_PAUSED, {'paused': menuMode});
 
       this.contentQuad.setEnabled(mode == api.Mode.STANDARD);
       this.contentQuad.setFullscreen(fullscreen);
       this.contentQuad.setMenuMode(menuMode);
       // TODO(crbug/643815): Set aspect ratio on content quad when available.
       this.controls.setEnabled(menuMode);
+      this.controls.setBackButtonEnabled(this.canGoBack);

[mthiesse, 2017/03/08 16:15:18]

This breaks fullscreen exit doesn't it? I think you want something like:
this.controls.setBackButtonEnabled(this.canGoBack || fullscreen);

[amp, 2017/03/08 16:34:14]

+1.  I was going to ask about this.

Note that regular 2D chrome supports exiting full screen on back navitgation as
well, so it might be worthwhile to see if the mTab.canGoBack() check in
VrShellImpl.java already covers it (but I'm not confident that it will as I
suspect they coded in an exception for full screen as well).

[acondor_, 2017/03/08 16:42:26]

Done.

[mthiesse, 2017/03/08 19:38:16]

mTab.canGoBack() does not cover the fullscreen case (everything is a special
case in clank :P). They simply ask the navigationController whether the page can
navigate backwards/forwards.

+      this.controls.setForwardButtonEnabled(this.canGoForward);
       this.omnibox.setEnabled(menuMode);
       this.urlIndicator.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.urlIndicator.setVisibilityTimeout(
           URL_INDICATOR_VISIBILITY_TIMEOUT_MS);
       this.secureOriginWarnings.setEnabled(
           mode == api.Mode.WEB_VR && !menuMode);
       this.background.setState(mode, menuMode, fullscreen);
       this.tabContainer.setEnabled(mode == api.Mode.STANDARD && menuMode);
 
       this.reloadUiButton.setEnabled(mode == api.Mode.STANDARD);
@@ skipping 90 matching lines @@
         uiManager.tabContainer.addTab(tab);
       }
     }
 
     /** @override */
     onRemoveTab(tab) {
       uiManager.tabContainer.removeTab(tab);
     }
 
     /** @override */
+    onSetHistoryButtonsEnabled(canGoBack, canGoForward) {
+      uiManager.setHistoryButtonsEnabled(canGoBack, canGoForward);
+    }
+
+    /** @override */
     onCommandHandlerFinished() {
       ui.flush();
     }
   }
 
   function command(dict) {
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);