style no webgl msg

Author: etpinard

src/lib/show_no_webgl_msg.js

@@ -32,15 +32,25 @@ module.exports = function showNoWebGlMsg(scene) {
 
     var div = document.createElement('div');
     div.className = 'no-webgl';
-    div.textContent = 'WebGL is not supported by your browser - visit https://get.webgl.org for more info';
     div.style.cursor = 'pointer';
     div.style.fontSize = '24px';
     div.style.color = Color.defaults[0];
     div.style.position = 'absolute';
-    div.style.left = '20px';
-    div.style.top = '50%';
+    div.style.left = div.style.top = '0px';
     div.style.width = div.style.height = '100%';
-
+    div.style['background-color'] = Color.lightLine;
+    div.style['z-index'] = 30;
+
+    var p = document.createElement('p');
+    p.textContent = 'WebGL is not supported by your browser - visit https://get.webgl.org for more info';
+    p.style.position = 'relative';
+    p.style.top = '50%';
+    p.style.left = '50%';
+    p.style.height = '30%';
+    p.style.width = '50%';
+    p.style.margin = '-15% 0 0 -25%';
+
+    div.appendChild(p);
     scene.container.appendChild(div);
     scene.container.style.background = '#FFFFFF';
     scene.container.onclick = function() {

test/jasmine/bundle_tests/no_webgl_test.js

@@ -17,7 +17,7 @@ describe('Plotly w/o WebGL support:', function() {
     });
 
     function checkNoWebGLMsg(visible) {
-        var msg = gd.querySelector('div.no-webgl');
+        var msg = gd.querySelector('div.no-webgl > p');
         if(visible) {
             expect(msg.innerHTML.substr(0, 22)).toBe('WebGL is not supported');
         } else {