Remove fixed positioning of HTML UI elements.

chrome/browser/resources/vr_shell/vr_shell_ui.css

 /* 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. */
 
 html {
   background-color: rgba(255, 255, 255, 0);
 }
 
 #ui {
   --scaleFactor: 4;
   left: 0;
   position: absolute;
   top: 0;
   transform: scale(0.25, 0.25);
+  transform-origin: left top;
+  width: 400%;
+}
+
+/* This class manages the position of elements on the texture page.
+ * Each UI element should have a bounding div of this class. */
+.ui-element {
+  border: 1px sold red;

[mthiesse, 2016/11/11 16:01:55]

s/sold/solid? why red? Don't we want a transparent border?

[cjgrant, 2016/11/11 16:13:14]

My mistake.  This was for debugging (to visualize margins), and it doesn't show
up because of the typo.  Two wrongs make a right!

[cjgrant, 2016/11/11 16:14:27]

Done.

+  float: left;
+  margin: 2px;
 }
 
 .webvr-message-box {
   align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: absolute;
 }
 
-/* Permanent security warning for WebVR. This uses a fixed-size absolutely
- * positioned DIV, the rectangle must match kWebVrWarningPermanentRect
- * in vr_shell.cc for use as a GL textured quad. */
+/* Permanent security warning for WebVR. */
 #webvr-not-secure-permanent {
   height: 128px;
-  left: 0;
-  top: 0;
   width: 512px;
 }
 
 #webvr-not-secure-permanent .webvr-not-secure-icon {
   display: inline-block;
   margin: 20px 0;
   vertical-align: middle;
 }
 
 #webvr-not-secure-permanent .webvr-string {
@@ skipping 15 matching lines @@
   color: #444;
   font-size: 26px;
   height: 78px;
   max-width: 472px;
   min-width: 226px;
   overflow: hidden;
   padding: 0 20px;
   white-space: nowrap;
 }
 
-/* Transient security warning for WebVR. This uses a fixed-size absolutely
- * positioned DIV, the rectangle must match kWebVrWarningTransientRect
- * in vr_shell.cc for use as a GL textured quad. */
+/* Transient security warning for WebVR. */
 #webvr-not-secure-transient {
   height: 256px;
-  left: 0;
-  top: 128px;
   width: 512px;
 }
 
 /* This uses fixed width but the height has some elasticity for translations.
  * The maximum is based on the fixed-size container DIV, excess will be
  * clipped. */
 #webvr-not-secure-transient > div {
   background-color: rgba(26, 26, 26, 0.8);
   border-radius: 6px;
   box-sizing: border-box;
   color: white;
   display: flex;
   flex-direction: column;
   font-size: 26px;
   justify-content: center;
   line-height: 1.4;
   max-height: 210px;
   min-height: 160px;
+  overflow: hidden;
   padding: 20px;
   text-align: center;
   width: 512px;
 }
 
-.round-button {
-  height: 136px;
-  left: 512px;
-  position: absolute;
-  width: 96px;
-}
-
 .round-button .button {
   background-color: #eee;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   border-radius: 50%;
   height: 96px;
+  margin: auto auto;
   opacity: 0.8;
-  position: absolute;
-  top: 0;
   transition: opacity 150ms ease-in-out;
   width: 96px;
 }
 
 .round-button .caption {
-  bottom: 0;
   color: white;
   font-size: 24px;
-  left: 50%;
+  max-width: 192px;
   opacity: 0;
-  position: absolute;
-  transform: translateX(-50%);
+  overflow: hidden;
+  text-align: center;
   transition: opacity 150ms ease-in-out;
-  z-index: 100;
-}
-
-#back {
-  top: 0;
+  white-space: nowrap;
 }
 
 #back .button {
   background-image: url(../../../../ui/webui/resources/images/vr_back.svg);
 }
 
-#reload {
-  top: 138px;
-}
-
 #reload .button {
   background-image: url(../../../../ui/webui/resources/images/vr_reload.svg);
 }
 
-#forward {
-  top: 276px;
-}
-
 #forward .button {
   background-image: url(../../../../ui/webui/resources/images/vr_back.svg);
   transform: scaleX(-1);
 }
 
 #reload-ui-button {
   background-color: #555;
   color: white;
-  font-size: 16;
-  height: 24px;
-  left: 610px;
-  opacity: 1;
-  position: absolute;
-  text-align: center;
-  top: 0;
-  width: 96px;
+  font-size: 24px;
+  padding: 12px;
 }
 
 #omni {
   --tranX: 0;
   --tranY: -0.5;
   --tranZ: -1.0;
+  align-items: center;
   background-color: rgba(255, 255, 255, 0.9);
   border-radius: 100px;
   box-sizing: border-box;
+  display: flex;
   height: 104px;
-  left: 0;
+  justify-content: center;
+  margin-bottom: 60px;
+  margin-top: 0;
   opacity: 1;
-  position: absolute;
-  top: 402px;
   transition: opacity 250ms ease, margin-top 250ms ease;
   white-space: nowrap;
-  width: 504px;
+  width: 512px;
 }
 
-#omni #connection-security {
-  left: 35px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+#omni-content {
+  align-items: center;
+  display: flex;
+  max-width: 448px;
+}
+
+#omni .connection-security {
+  height: 50px;
+  margin-right: 10px;
+  width: 50px;
 }
 
 #omni #url {
   color: #252525;
   font-size: 34px;
-  left: 80px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+  overflow: hidden;
   white-space: nowrap;
 }
 
 #omni #path {
   color: #868686;
 }
 
 #omni.hide {
+  margin-bottom: 0;
   margin-top: 60px;
   opacity: 0;
 }
 
 #omni.loading {
   border: 4px solid rgb(86, 203, 255);
 }
 
 #omni.idle {
-  background-color: #ECECEC;
-  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.1);
+  background-color: #ececec;
 }
 
 #omni.idle #domain {
   color: black;
 }