Decouple VR Shell DPR and CSS size from Physical Displays.

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 scene = new ui.Scene();
   let sceneManager;
 
   let uiRootElement = document.querySelector('#ui');
   let uiStyle = window.getComputedStyle(uiRootElement);
-  let scaleFactor = uiStyle.getPropertyValue('--scaleFactor');
   /** @const */ var ANIM_DURATION = 150;
 
+  // This value should match the one in VrShellImpl.java
+  /** @const */ var UI_DPR = 1.2;
+
   function getStyleFloat(style, property) {
     let value = parseFloat(style.getPropertyValue(property));
     return isNaN(value) ? 0 : value;
   }
 
   class ContentQuad {
     constructor() {
       /** @const */ this.SCREEN_HEIGHT = 1.6;
       /** @const */ this.SCREEN_RATIO = 16 / 9;
       /** @const */ this.BROWSING_SCREEN_DISTANCE = 2.0;
@@ skipping 37 matching lines @@
       let domElement = document.querySelector(domId);
 
       // Pull copy rectangle from the position of the element.
       let rect = domElement.getBoundingClientRect();
       let pixelX = Math.floor(rect.left);
       let pixelY = Math.floor(rect.top);
       let pixelWidth = Math.ceil(rect.right) - pixelX;
       let pixelHeight = Math.ceil(rect.bottom) - pixelY;
 
       let element = new api.UiElement(pixelX, pixelY, pixelWidth, pixelHeight);
-      element.setSize(scaleFactor * pixelWidth / 1000,
-          scaleFactor * pixelHeight / 1000);
+      element.setSize(pixelWidth / 1000, pixelHeight / 1000);
 
       // Pull additional custom properties from CSS.
       let style = window.getComputedStyle(domElement);
       element.setTranslation(
           getStyleFloat(style, '--tranX'),
           getStyleFloat(style, '--tranY'),
           getStyleFloat(style, '--tranZ'));
 
       this.uiElementId = scene.addElement(element);
       this.uiAnimationId = -1;
@@ skipping 322 matching lines @@
       this.menuMode = menuMode;
       this.cinemaMode = cinemaMode;
 
       this.contentQuad.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.contentQuad.setCinemaMode(cinemaMode);
       // TODO(crbug/643815): Set aspect ratio on content quad when available.
       // TODO(amp): Don't show controls in CINEMA mode once MENU mode lands.
       this.controls.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.omnibox.setEnabled(mode == api.Mode.STANDARD && !menuMode);
       this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR);
+
+      api.setUiCssSize(uiRootElement.clientWidth, uiRootElement.clientHeight,
+          UI_DPR);
     }
 
     setSecureOrigin(secure) {
       this.secureOriginWarnings.setSecureOrigin(secure);
       this.omnibox.setSecureOrigin(secure);
     }
 
     setReloadUiEnabled(enabled) {
       this.controls.setReloadUiEnabled(enabled);
     }
@@ skipping 26 matching lines @@
     scene.flush();
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 document.addEventListener('DOMContentLoaded', vrShellUi.initialize);