consolidate fullscreen styles under a single class

src/core/scene/a-scene.js

@@ -67,19 +67,13 @@ module.exports.AScene = registerElement('a-scene', {
 
     addFullScreenStyles: {
       value: function () {
-        var htmlEl = document.documentElement;
-        htmlEl.classList.add('a-html');
-        document.body.classList.add('a-body');
-        this.classList.add('fullscreen');
+        document.documentElement.classList.add('a-fullscreen');
       }
     },
 
     removeFullScreenStyles: {
       value: function () {
-        var htmlEl = document.documentElement;
-        htmlEl.classList.remove('a-html');
-        document.body.classList.remove('a-body');
-        this.classList.remove('fullscreen');
+        document.documentElement.classList.remove('a-fullscreen');
       }
     },
 

src/style/aframe.css

@@ -1,21 +1,36 @@
-/* Applied to the html element */
-.a-html {
+/* .a-fullscreen means not embedded. */
+html.a-fullscreen {
   bottom: 0;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
 }
 
-/* Applied to the body element */
-.a-body {
+html.a-fullscreen body {
   height: 100%;
   margin: 0;
   overflow: hidden;
   padding: 0;
   width: 100%;
 }
 
+/* Class is removed when doing <a-scene embedded>. */
+html.a-fullscreen .a-canvas {
+  width: 100% !important;
+  height: 100% !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  position: fixed !important;
+}
+
+html:not(.a-fullscreen) .a-enter-vr {
+  right: 5px;
+  bottom: 5px;
+}
+
 /* In chrome mobile the user agent stylesheet set it to white  */
 :-webkit-full-screen {
   background-color: transparent;
@@ -39,18 +54,6 @@
   cursor: -webkit-grab;
 }
 
-
-/* Class is removed when doing <a-scene embedded>. */
-a-scene.fullscreen .a-canvas {
-  width: 100% !important;
-  height: 100% !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  position: fixed !important;
-}
-
 .a-inspector-loader {
   background-color: #ed3160;
   position: fixed;
@@ -134,11 +137,6 @@ a-scene audio {
   bottom: 20px;
 }
 
-.a-enter-vr.embedded {
-  right: 5px;
-  bottom: 5px;
-}
-
 .a-enter-vr-button,
 .a-enter-vr-modal,
 .a-enter-vr-modal a {

tests/components/scene/embedded.test.js

@@ -1,8 +1,7 @@
 /* global assert, process, setup, suite, test */
 var entityFactory = require('../../helpers').entityFactory;
 
-var ENTER_VR_CLASS = '.a-enter-vr.embedded';
-var SCENE_FULL_SCREEN_CLASS = 'fullscreen';
+var SCENE_FULLSCREEN_CLASS = 'a-fullscreen';
 
 suite('embedded', function () {
   setup(function (done) {
@@ -12,41 +11,17 @@ suite('embedded', function () {
     el.addEventListener('loaded', function () { done(); });
   });
 
-  test('adds embedded class to Enter VR element', function () {
-    var scene = this.el;
-    assert.equal(scene.querySelectorAll(ENTER_VR_CLASS).length, 1);
-  });
-
   test('removes fullscreen class from scene element', function () {
-    var scene = this.el;
-    assert.notOk(scene.classList.contains(SCENE_FULL_SCREEN_CLASS));
+    assert.notOk(document.documentElement.classList.contains(SCENE_FULLSCREEN_CLASS));
   });
+});
 
-  test('can remove embedded class from Enter VR element', function () {
-    var scene = this.el;
-    scene.setAttribute('embedded', false);
-    assert.notOk(scene.querySelector(ENTER_VR_CLASS));
-  });
-
-  test('can add fullscreen class to scene element', function () {
-    var scene = this.el;
-    scene.setAttribute('embedded', false);
-    assert.ok(scene.classList.contains(SCENE_FULL_SCREEN_CLASS));
-  });
-
-  suite('with vr-mode-ui disabled', function () {
-    test('removes fullscreen class from scene element', function () {
-      var scene = this.el;
-      scene.setAttribute('vr-mode-ui', 'enabled', false);
-      scene.setAttribute('embedded', true);
-      assert.notOk(scene.classList.contains(SCENE_FULL_SCREEN_CLASS));
-    });
-
-    test('can add fullscreen class to scene element', function () {
-      var scene = this.el;
-      scene.setAttribute('vr-mode-ui', 'enabled', false);
-      scene.setAttribute('embedded', false);
-      assert.ok(scene.classList.contains(SCENE_FULL_SCREEN_CLASS));
+suite('embedded (fullscreen)', function () {
+  test('has fullscreen class without embedded', function (done) {
+    var el = entityFactory();
+    el.addEventListener('loaded', function () {
+      assert.ok(document.documentElement.classList.contains(SCENE_FULLSCREEN_CLASS));
+      done();
     });
   });
 });

tests/core/scene/a-scene.test.js

@@ -196,7 +196,7 @@ suite('a-scene (without renderer)', function () {
     test('adds fullscreen styles', function (done) {
       var sceneEl = this.el;
       sceneEl.enterVR().then(function () {
-        assert.ok(sceneEl.classList.contains('fullscreen'));
+        assert.ok(document.documentElement.classList.contains('a-fullscreen'));
         done();
       });
     });
@@ -293,18 +293,18 @@ suite('a-scene (without renderer)', function () {
     test('removes fullscreen styles if embedded', function (done) {
       var sceneEl = this.el;
       sceneEl.setAttribute('embedded', 'true');
-      sceneEl.classList.add('fullscreen');
+      document.documentElement.classList.add('a-fullscreen');
       sceneEl.exitVR().then(function () {
-        assert.notOk(sceneEl.classList.contains('fullscreen'));
+        assert.notOk(document.documentElement.classList.contains('a-fullscreen'));
         done();
       });
     });
 
     test('does not remove fullscreen styles if not embedded', function (done) {
       var sceneEl = this.el;
-      sceneEl.classList.add('fullscreen');
+      document.documentElement.classList.add('a-fullscreen');
       sceneEl.exitVR().then(function () {
-        assert.ok(sceneEl.classList.contains('fullscreen'));
+        assert.ok(document.documentElement.classList.contains('a-fullscreen'));
         done();
       });
     });