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.callback = callback;
+      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);
+      this.button.addEventListener('click', this.callback);
     }
 
     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');
+        this.button.addEventListener('click', this.callback);
+      } else {
+        this.button.classList.add('disabled-button');
+        this.button.removeEventListener('click', this.callback);
+      }
+    }
+
     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;
 
-      this.buttons = [];
+      this.buttons = {
+        backButton: null,
+        reloadButton: null,
+        forwardButton: null
+      };
       let descriptors = [
         [
-          '#back-button',
+          'backButton', '#back-button',
           function() {
             api.doAction(api.Action.HISTORY_BACK, {});
           }
         ],
         [
-          '#reload-button',
+          'reloadButton', '#reload-button',
           function() {
             api.doAction(api.Action.RELOAD, {});
           }
         ],
         [
-          '#forward-button',
+          'forwardButton', '#forward-button',
           function() {
             api.doAction(api.Action.HISTORY_FORWARD, {});
           }
         ],
       ];
 
       /** @const */ var BUTTON_Y = -0.27;
       /** @const */ var BUTTON_Z = -1;
       /** @const */ var BUTTON_SPACING = 0.11;
 
       let controls = new api.UiElement(0, 0, 0, 0);
       controls.setVisible(false);
       controls.setTranslation(0, BUTTON_Y, BUTTON_Z);
       this.controlsId = ui.addElement(controls);
 
       let startPosition = -BUTTON_SPACING * (descriptors.length / 2.0 - 0.5);
 
       for (let i = 0; i < descriptors.length; i++) {
-        let domId = descriptors[i][0];
-        let callback = descriptors[i][1];
+        let name = descriptors[i][0];
+        let domId = descriptors[i][1];
+        let callback = descriptors[i][2];
         let button = new Button(domId, callback, this.controlsId);
         button.setTranslation(startPosition + i * BUTTON_SPACING, 0, 0);
-        this.buttons.push(button);
+        this.buttons[name] = button;
       }
     }
 
     setEnabled(enabled) {
       this.enabled = enabled;
       this.configure();
     }
 
     configure() {
-      for (let i = 0; i < this.buttons.length; i++) {
-        this.buttons[i].setVisible(this.enabled);
+      for (let key in this.buttons) {
+        this.buttons[key].setVisible(this.enabled);
       }
     }
+
+    setBackButtonEnabled(enabled) {
+      this.buttons.backButton.setEnabled(enabled);
+    }
+
+    setForwardButtonEnabled(enabled) {
+      this.buttons.forwardButton.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;
+
+      /** No need to call updateState to adjust button properties. */
+      this.controls.setBackButtonEnabled(this.canGoBack || this.fullscreen);
+      this.controls.setForwardButtonEnabled(this.canGoForward);
+    }
+
     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 || this.fullscreen);
+      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);