Add arcade mode to chrome://dino

components/neterror/resources/neterror.css

Index: components/neterror/resources/neterror.css
diff --git a/components/neterror/resources/neterror.css b/components/neterror/resources/neterror.css
index 4649cd82bbb7477aa6ca691e0e22171e2d131767..1e1286ad82ac4d4bffcd5b98d34b0c0f73c7d2ec 100644
--- a/components/neterror/resources/neterror.css
+++ b/components/neterror/resources/neterror.css
@@ -462,13 +462,6 @@ html[subframe] body {
   }
 }
 
-@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {

[mmenke, 2017/07/05 18:51:28]

Why are you removing this?

[edwardjung, 2017/07/06 19:33:19]

Centre aligning the container makes more sense for this subset of widths. It was
off balance when the container width is 600px. It also fixes the snap that
occurs when resizing the window into these sizes.

-  .offline .interstitial-wrapper {
-    margin-left: 0;
-    margin-right: 0;
-  }
-}
-
 @media (min-width: 420px) and (max-width: 736px) and
        (min-height: 240px) and (max-height: 420px) and
        (orientation:landscape) {
@@ -514,3 +507,35 @@ html[subframe] body {
     width: auto;
   }
 }
+
+.arcade-mode {

[mmenke, 2017/07/05 18:51:28]

Is this needed?  It seems like the next block applies overflow:hidden to this
anyways.

[edwardjung, 2017/07/06 19:33:19]

Done.

+  overflow: hidden;
+}
+
+.arcade-mode,
+.arcade-mode .runner-container,
+.arcade-mode .runner-canvas {
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode #buttons,
+.arcade-mode #main-content {
+  opacity: 0;
+  overflow: hidden;

[mmenke, 2017/07/05 18:51:29]

I assume there's a reason we aren't just using display:none for these?

[edwardjung, 2017/07/06 19:33:19]

With display none: you can't transition out the elements as it removes them from
the DOM immediately.

+}
+
+.arcade-mode .interstitial-wrapper {
+  height: 100vh;

[mmenke, 2017/07/05 18:51:29]

vh?  Is that a typo, or does it mean something?

[edwardjung, 2017/07/06 19:33:19]

Not a typo, a new proportional unit referring to viewport height. Just using
100% doesn't cover the whole screen / window.

+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode .runner-container {
+  left: 0;
+  margin: auto;
+  right: 0;
+  transform-origin: top center;
+  transition: transform 250ms cubic-bezier(0.4, 0.0, 1, 1) .4s;
+  z-index: 2;
+}