Assign names to VR UI elements for debugging and test.

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 39 matching lines @@
       /** @const */ this.MENU_MODE_SCREEN_HEIGHT = 0.48;
       /** @const */ this.MENU_MODE_SCREEN_ELEVATION = -0.125;
       /** @const */ this.BACKGROUND_DISTANCE_MULTIPLIER = 1.414;
       /** @const */ this.DOM_INTERCEPTOR_SELECTOR = '#content-interceptor';
       /** @const */ this.DOM_INTERCEPTOR_ELEVATION = 0.01;
 
       this.menuMode = false;
       this.fullscreen = false;
 
       let element = new api.UiElement(0, 0, 0, 0);
+      element.setName('Content');
       element.setFill(new api.Content());
       element.setVisible(false);
       element.setSize(
           this.SCREEN_HEIGHT * this.SCREEN_RATIO, this.SCREEN_HEIGHT);
       element.setTranslation(
           0, this.BROWSING_SCREEN_ELEVATION, -this.BROWSING_SCREEN_DISTANCE);
       this.elementId = ui.addElement(element);
 
       // Place an invisible (fill none) but hittable plane behind the content
       // quad, to keep the reticle roughly planar with the content if near
       // content.
       let backPlane = new api.UiElement(0, 0, 0, 0);
+      backPlane.setName('Content backing');
       backPlane.setSize(1000, 1000);
       backPlane.setTranslation(0, 0, -0.01);
       backPlane.setParentId(this.elementId);
       backPlane.setFill(new api.NoFill());
       ui.addElement(backPlane);
 
       // Place invisible plane on top of content quad, to intercept the clicks
       // while on menu mode.
       this.interceptor = new DomUiElement(this.DOM_INTERCEPTOR_SELECTOR);
       let update = new api.UiElementUpdate();
@@ skipping 115 matching lines @@
       }
 
       this.rotationX = getStyleFloat(style, '--rotX', 0);
       this.rotationY = getStyleFloat(style, '--rotY', 0);
       this.rotationZ = getStyleFloat(style, '--rotZ', 0);
       if (this.rotationX != 0 || this.rotationY != 0 || this.rotationZ != 0) {
         element.setRotation(
             this.rotationX, this.rotationY, this.rotationZ, 2 * Math.PI);
       }
 
+      element.setName(domId);
       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.setName(domId + '-backing');
       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);
@@ skipping 55 matching lines @@
     }
   };
 
   class GestureHandlers {
     constructor() {
       /** @const */ var BACKING_DISTANCE = 0.8;
       /** @const */ var INDICATOR_DISTANCE = 0.15;
       this.enabled = false;
 
       let backing = new api.UiElement(0, 0, 0, 0);
+      backing.setName('Navigation indicator backing');
       backing.setVisible(false);
       backing.setTranslation(0, 0, -BACKING_DISTANCE);
       backing.setLockToFieldOfView(true);
       this.backingElementId = ui.addElement(backing);
 
       this.indicators = {};
       this.indicators[api.Direction.LEFT] =
           new GestureHandler(
               '#back-indicator',
               function() {
@@ skipping 104 matching lines @@
             api.doAction(api.Action.HISTORY_FORWARD, {});
           }
         ],
       ];
 
       /** @const */ var BUTTON_Y = -0.53;
       /** @const */ var BUTTON_Z = -2;
       /** @const */ var BUTTON_SPACING = 0.14;
 
       let controls = new api.UiElement(0, 0, 0, 0);
+      controls.setName('Controls');
       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 name = descriptors[i][0];
         let domId = descriptors[i][1];
         let callback = descriptors[i][2];
@@ skipping 297 matching lines @@
     constructor() {
       /** @const */ this.SCENE_GROUND_SIZE = 25.0;
       /** @const */ this.SCENE_HEIGHT = 4.0;
       /** @const */ this.GRIDLINE_COUNT = 40;
       /** @const */ this.HORIZON_COLOR = {r: 0.57, g: 0.57, b: 0.57, a: 1.0};
       /** @const */ this.CENTER_COLOR = {r: 0.48, g: 0.48, b: 0.48, a: 1.0};
       /** @const */ this.FULLSCREEN_BACKGROUND_COLOR =
           {r: 0.1, g: 0.1, b: 0.1, a: 1.0};
 
       // Make ground plane.
-      let groundPlane = new api.UiElementUpdate();
+      let groundPlane = new api.UiElement();

[tiborg, 2017/03/24 22:03:06]

Why make these UiElements? They don't show a sprite.

[cjgrant, 2017/03/27 14:03:22]

UiElement is meant to be passed to ui.addElement(), and UiElementUpdate for
ui.updateElement().  However, I see my change fails on closure, as creating a
UiElement does require 4 arguments.  It feels like UiElement should be
subclassed to UiSpriteElement.  Thoughts?

[tiborg, 2017/03/27 14:55:07]

As discussed offline, let's move this change to a future CL.

+      groundPlane.setName('Ground plane');
       groundPlane.setVisible(true);
       groundPlane.setSize(this.SCENE_GROUND_SIZE, this.SCENE_GROUND_SIZE);
       groundPlane.setFill(
           new api.OpaqueGradient(this.HORIZON_COLOR, this.CENTER_COLOR));
       groundPlane.setTranslation(0, -this.SCENE_HEIGHT / 2, 0);
       groundPlane.setRotation(1.0, 0.0, 0.0, -Math.PI / 2);
       groundPlane.setDrawPhase(0);
       this.groundPlaneId = ui.addElement(groundPlane);
 
       // Make ceiling plane.
-      let ceilingPlane = new api.UiElementUpdate();
+      let ceilingPlane = new api.UiElement();
+      ceilingPlane.setName('Ceiling');
       ceilingPlane.setVisible(true);
       ceilingPlane.setSize(this.SCENE_GROUND_SIZE, this.SCENE_GROUND_SIZE);
       ceilingPlane.setFill(
           new api.OpaqueGradient(this.HORIZON_COLOR, this.CENTER_COLOR));
       ceilingPlane.setTranslation(0, this.SCENE_HEIGHT * 2, 0);
       ceilingPlane.setRotation(1.0, 0.0, 0.0, Math.PI / 2);
       ceilingPlane.setDrawPhase(0);
       this.ceilingPlaneId = ui.addElement(ceilingPlane);
 
       // Ground grid.
-      let groundGrid = new api.UiElementUpdate();
+      let groundGrid = new api.UiElement();
+      groundGrid.setName('Ground grid');
       groundGrid.setVisible(true);
       groundGrid.setSize(this.SCENE_GROUND_SIZE, this.SCENE_GROUND_SIZE);
       let transparentHorizonColor = {
         r: this.HORIZON_COLOR.r,
         g: this.HORIZON_COLOR.g,
         b: this.HORIZON_COLOR.b,
         a: 0
       };
       groundGrid.setFill(new api.GridGradient(
           transparentHorizonColor, this.HORIZON_COLOR, this.GRIDLINE_COUNT));
@@ skipping 565 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);