Clean up debug pages (mapbox#3596)

* clean up debug pages * add debug page linting, fix remaining lint issues
bartcorremans · Nov 11, 2016 · 95b0ca4 · 95b0ca4
1 parent 0474103
commit 95b0ca4
Show file tree

Hide file tree

Showing 16 changed files with 319 additions and 604 deletions.
diff --git a/debug/.eslintrc b/debug/.eslintrc
@@ -0,0 +1,16 @@
+{
+  "rules": {
+    "prefer-arrow-callback": "off",
+    "no-var": "off",
+    "strict": "off",
+    "no-unused-vars": "off",
+    "prefer-template": "off"
+  },
+  "env": {
+    "es6": false,
+    "browser": true
+  },
+  "globals": {
+    "mapboxgl": false
+  }
+}
diff --git a/debug/2762.html b/debug/2762.html
@@ -3,8 +3,7 @@
 <head>
     <title>Mapbox GL JS debug page</title>
     <meta charset='utf-8'>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <link rel='stylesheet' href='/dist/mapbox-gl.css' />
     <style>
         body { margin: 0; padding: 0; }
@@ -14,47 +13,45 @@
 
 <body>
 <div id='map'></div>
+
 <script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
 <script>
-    var map = new mapboxgl.Map({
-        container: 'map',
-        style: {
-            "version": 8,
-            "sources": {
-                "geojson": {
-                    "type": "geojson",
-                    "data": {
-                        "type": "Point",
-                        "coordinates": [
-                            0,
-                            0
-                        ]
-                    }
+
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: {
+        "version": 8,
+        "sources": {
+            "geojson": {
+                "type": "geojson",
+                "data": {
+                    "type": "Point",
+                    "coordinates": [0, 0]
                 }
-            },
-            "transition": {
-                "duration": 1000
-            },
-            "layers": [
-                {
-                    "id": "circle",
-                    "type": "circle",
-                    "source": "geojson",
-                    "paint": {
-                        "circle-translate": [
-                            -50,
-                            -50
-                        ]
-                    }
+            }
+        },
+        "transition": {
+            "duration": 1000
+        },
+        "layers": [
+            {
+                "id": "circle",
+                "type": "circle",
+                "source": "geojson",
+                "paint": {
+                    "circle-translate": [-50, -50]
                 }
-            ]
-        }
-    });
+            }
+        ]
+    }
+});
+
+map.on('click', function(e) {
+    map.setPaintProperty("circle", "circle-color", "red");
+    map.setPaintProperty("circle", "circle-translate", [50, 50]);
+});
 
-    map.on('click', function(e) {
-        map.setPaintProperty("circle", "circle-color", "red");
-        map.setPaintProperty("circle", "circle-translate", [50, 50]);
-    });
 </script>
 </body>
 </html>
diff --git a/debug/chinese.html b/debug/chinese.html
@@ -4,7 +4,6 @@
     <title>Mapbox GL JS debug page</title>
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-
     <link rel='stylesheet' href='/dist/mapbox-gl.css' />
     <style>
         body { margin: 0; padding: 0; }
@@ -27,8 +26,8 @@
 
 <script src='/dist/mapbox-gl-dev.js'></script>
 <script src='/debug/access_token_generated.js'></script>
-
 <script>
+
 var map = window.map = new mapboxgl.Map({
     container: 'map',
     zoom: 12.5,
@@ -62,6 +61,5 @@
 });
 
 </script>
-
 </body>
 </html>
diff --git a/debug/circles.html b/debug/circles.html
@@ -4,55 +4,20 @@
     <title>Mapbox GL JS debug page</title>
     <meta charset='utf-8'>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-
     <link rel='stylesheet' href='/dist/mapbox-gl.css' />
     <style>
         body { margin: 0; padding: 0; }
         html, body, #map { height: 100%; }
-        #checkboxes {
-            position: absolute;
-            background: #fff;
-            top:0;
-            left:0;
-            padding:10px;
-        }
-        #buffer {
-            position: absolute;
-            top:100px;
-            left:0;
-            pointer-events: none;
-        }
-        #buffer div {
-            background-color: #fff;
-            padding: 5px 0;
-            text-indent: 10px;
-            white-space: nowrap;
-            text-shadow:
-               -1px -1px 0 #fff,
-                1px -1px 0 #fff,
-                -1px 1px 0 #fff,
-                 1px 1px 0 #fff;
-        }
     </style>
 </head>
 
 <body>
 <div id='map'></div>
-<div id='checkboxes'>
-  <input id='show-tile-boundaries-checkbox' name='show-tile-boundaries' type='checkbox'> <label for='show-tile-boundaries'>tile debug</label><br />
-  <input id='show-symbol-collision-boxes-checkbox' name='show-symbol-collision-boxes' type='checkbox'> <label for='show-symbol-collision-boxes'>collision debug</label><br />
-  <input id='show-overdraw-checkbox' name='show-overdraw' type='checkbox'> <label for='show-overdraw'>overdraw debug</label><br />
-  <input id='buffer-checkbox' name='buffer' type='checkbox'> <label for='buffer'>buffer stats</label>
-</div>
-
-<div id='buffer' style="display:none">
-    <em>Waiting for data...</em>
-</div>
 
 <script src='/dist/mapbox-gl-dev.js'></script>
 <script src='/debug/access_token_generated.js'></script>
-
 <script>
+
 var map = window.map = new mapboxgl.Map({
     container: 'map',
     zoom: 3,
@@ -96,61 +61,8 @@
             }
         }
     });
-
-    var bufferTimes = {};
-    map.on('tile.stats', function(bufferTimes) {
-        var _stats = [];
-        for (var name in bufferTimes) {
-            var value = Math.round(bufferTimes[name]);
-            if (isNaN(value)) continue;
-            var width = value;
-            _stats.push({name: name, value: value, width: width});
-        }
-        _stats = _stats.sort(function(a, b) { return b.value - a.value }).slice(0, 10);
-
-        var html = '';
-        for (var i in _stats) {
-            html += '<div style="width:' + _stats[i].width * 2 + 'px">' + _stats[i].value + 'ms - ' + _stats[i].name + '</div>';
-        }
-
-        document.getElementById('buffer').innerHTML = html;
-    });
 });
 
-map.on('click', function(e) {
-    if (e.originalEvent.shiftKey) return;
-    (new mapboxgl.Popup())
-        .setLngLat(map.unproject(e.point))
-        .setHTML("<h1>Hello World!</h1>")
-        .addTo(map);
-});
-
-document.getElementById('show-tile-boundaries-checkbox').onclick = function() {
-    map.showTileBoundaries = !!this.checked;
-};
-
-document.getElementById('show-symbol-collision-boxes-checkbox').onclick = function() {
-    map.showCollisionBoxes = !!this.checked;
-};
-
-document.getElementById('show-overdraw-checkbox').onclick = function() {
-    map.showOverdrawInspector = !!this.checked;
-};
-
-document.getElementById('buffer-checkbox').onclick = function() {
-    document.getElementById('buffer').style.display = this.checked ? 'block' : 'none';
-};
-
-// keyboard shortcut for comparing rendering with Mapbox GL native
-document.onkeypress = function(e) {
-    if (e.charCode === 111 && !e.shiftKey && !e.metaKey && !e.altKey) {
-        var center = map.getCenter();
-        location.href = "mapboxgl://?center=" + center.lat + "," + center.lng + "&zoom=" + map.getZoom() + "&bearing=" + map.getBearing();
-        return false;
-    }
-};
-
 </script>
-
 </body>
 </html>