add better release testing page at http://<host>:9966/test/release/

build/print-release-url.js

@@ -0,0 +1,6 @@
+const address = require('address');
+const qrcode = require('qrcode-terminal');
+
+const url = `http://${address.ip()}:9966/test/release/`;
+console.warn(`Scan this QR code or enter ${url}`);
+qrcode.generate(url);

package.json

@@ -43,6 +43,7 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.2.1",
     "@mapbox/mapbox-gl-test-suite": "file:test/integration",
     "@octokit/rest": "^15.15.1",
+    "address": "^1.1.2",
     "babel-eslint": "^10.0.1",
     "browserify": "^16.2.3",
     "d3": "^4.12.0",
@@ -70,9 +71,10 @@
     "postcss-cli": "^6.1.2",
     "postcss-inline-svg": "^3.1.1",
     "pretty-bytes": "^5.1.0",
+    "puppeteer": "^1.18.0",
+    "qrcode-terminal": "^0.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "puppeteer": "^1.18.0",
     "request": "^2.88.0",
     "rollup": "^1.16.4",
     "rollup-plugin-buble": "^0.19.8",
@@ -112,6 +114,7 @@
     "start": "run-p build-token watch-css watch-dev watch-benchmarks start-server",
     "start-debug": "run-p build-token watch-css watch-dev start-server",
     "start-bench": "run-p build-token watch-benchmarks start-server",
+    "start-release": "run-s build-token build-prod-min build-css print-release-url start-server",
     "start-docs": "run-s build-prod-min build-css build-docs && NODE_OPTIONS=\"--max_old_space_size=2048\" DEPLOY_ENV=local batfish start",
     "lint": "eslint --cache --ignore-path .gitignore src test bench debug/*.html",
     "lint-docs": "documentation lint src/index.js",
@@ -127,6 +130,7 @@
     "test-flow": "build/run-node build/generate-flow-typed-style-spec && flow .",
     "test-cov": "nyc --require=@mapbox/flow-remove-types/register --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render",
     "prepublishOnly": "run-s build-flow-types build-dev build-prod-min build-prod build-csp build-css build-style-spec test-build",
+    "print-release-url": "node build/print-release-url.js",
     "codegen": "build/run-node build/generate-style-code.js && build/run-node build/generate-struct-arrays.js"
   },
   "files": [

test/release/add-geojson.json

@@ -0,0 +1,4 @@
+{
+    "title": "Add GeoJSON marker",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/geojson-markers.html"
+}

test/release/adjust-layer-opacity.json

@@ -0,0 +1,4 @@
+{
+    "title": "Adjust a layer's opacity",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/adjust-layer-opacity.html"
+}

test/release/animate-point.json

@@ -0,0 +1,4 @@
+{
+    "title": "Animate point",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/animate-point-along-line.html"
+}

test/release/check-for-support.json

@@ -0,0 +1,4 @@
+{
+    "title": "Check for browser support",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/check-for-support.html"
+}

test/release/custom-marker-icons.json

@@ -0,0 +1,4 @@
+{
+    "title": "Add custom icons with Markers",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/custom-marker-icons.html"
+}

test/release/custom-style-layer.json

@@ -0,0 +1,4 @@
+{
+    "title": "Add a custom style layer",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/custom-style-layer.html"
+}

test/release/filter-features-within-map-view.json

@@ -0,0 +1,4 @@
+{
+    "title": "Filter features within map view",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/filter-features-within-map-view.html"
+}

test/release/hover-styles.json

@@ -0,0 +1,4 @@
+{
+    "title": "Create a hover effect",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/hover-styles.html"
+}

test/release/index.css

@@ -0,0 +1,69 @@
+html, body {
+    margin:0;
+    padding:0;
+    height:100%;
+    width:100%;
+    position: fixed;
+}
+
+body {
+    font-family:"Open Sans", sans-serif;
+}
+
+nav#top {
+    height:60px;
+    background:#4264fb;
+    display:flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    color:white;
+    overflow: hidden;
+}
+
+#logo {
+    margin:10px;
+    display:flex;
+}
+
+#title {
+    flex-grow:1;
+    font-size:20px;
+    display:flex;
+    align-items:center;
+    padding:4px 20px;
+    line-height:0.9em;
+    text-overflow:ellipsis;
+}
+
+#buttons {
+    width:120px;
+    display:flex;
+}
+
+#buttons button {
+    width:60px;
+    height:60px;
+    border:0;
+    background:none;
+    color:white;
+}
+
+#buttons button path {
+    fill:white;
+}
+
+#buttons button:disabled {
+    opacity:0.25;
+}
+
+section#container {
+    height:calc(100% - 60px);
+    max-height:768px;
+    display:flex;
+    background-color:#CCC;
+}
+
+section#container iframe {
+    flex-grow : 1;
+    border:0;
+}

test/release/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html class="has-navbar-fixed-top">
+<head>
+    <title>Mapbox GL JS release testing page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel="stylesheet" type="text/css" href="/test/release/index.css">
+    <script src="/test/release/index.js"></script>
+    <script src='/debug/access_token_generated.js'></script>
+</head>
+
+<body>
+<nav id="top">
+    <div id="title">Release Testing</div>
+    <div id="buttons">
+        <button id="prev"><svg aria-hidden="true" viewBox="-3 -1 14 9"><path d="M10,5l-6,0l0,3l-4,-4l4,-4l0,3l6,0l0,2Z"/></svg> Previous</button>
+        <button id="next"><svg aria-hidden="true" viewBox="-2 -1 14 9"><path d="M0,3l6,0l0,-3l4,4l-4,4l0,-3l-6,0l0,-2Z"/></svg> Next</button>
+    </div>
+</nav>
+<section id="container"></section>
+</body>
+</html>

test/release/index.js

@@ -0,0 +1,133 @@
+/* eslint-env browser */
+const mapboxgl = {};
+
+document.addEventListener('DOMContentLoaded', () => {
+    const jsProdMin = document.createElement("a");
+    jsProdMin.href = "/dist/mapbox-gl.js";
+    const css = document.createElement("a");
+    css.href = "/dist/mapbox-gl.css";
+
+    const titleElement = document.querySelector('#title');
+    const container = document.querySelector('#container');
+    const prevButton = document.querySelector('#prev');
+    const nextButton = document.querySelector('#next');
+
+    const pages = [
+        "add-geojson",
+        "animate-point",
+        "queryrenderedfeatures",
+        "scroll-fly-to",
+        "popup-on-click",
+        "hover-styles",
+        "satellite-map",
+        "custom-marker-icons",
+        "filter-features-within-map-view",
+        "video-on-a-map",
+        "custom-style-layer",
+        "adjust-layer-opacity",
+        "check-for-support",
+        "mapbox-gl-geocoder",
+        "mapbox-gl-directions",
+        "mapbox-gl-draw",
+        "mapbox-gl-compare",
+        "mapbox-gl-rtl-text"
+    ];
+
+    const params = {
+        page: pages[0]
+    };
+
+    location.hash.substr(1).split('&').forEach((param) => {
+        const entry = param.split('=', 2);
+        params[entry[0]] = entry[1];
+    });
+
+    let index = pages.indexOf(params.page);
+    if (index < 0) index = 0;
+
+    let req;
+    let metadata;
+
+    function load() {
+        if (req) {
+            req.abort();
+        }
+
+        titleElement.innerText = 'Loading…';
+        while (container.firstChild) container.removeChild(container.firstChild);
+
+        params.page = pages[index];
+        const page = params.page;
+
+        req = new XMLHttpRequest();
+        req.addEventListener("load", loadedMetadata);
+        req.responseType = 'json';
+        req.open("GET", `/test/release/${page}.json`);
+        req.send();
+
+        function loadedMetadata() {
+            if (req.status !== 200) {
+                container.innerText = `Failed to load ${req.responseURL}: ${req.statusText}`;
+                return;
+            }
+            metadata = req.response;
+            titleElement.innerText = metadata.title;
+
+            req = new XMLHttpRequest();
+            req.addEventListener("load", loadedHTML);
+            req.open("GET", metadata.url ? metadata.url : `/test/release/${page}.html`);
+            req.send();
+        }
+
+        function loadedHTML() {
+            if (req.status !== 200) {
+                container.innerText = `Failed to load ${req.responseURL}: ${req.statusText}`;
+                return;
+            }
+            const iframe = document.createElement('iframe');
+            container.appendChild(iframe);
+            const url = URL.createObjectURL(new Blob([
+                '<!DOCTYPE html>\n',
+                '<html>\n',
+                '<head>\n',
+                '    <title>Mapbox GL JS debug page</title>\n',
+                '    <meta charset="utf-8">\n',
+                '    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">\n',
+                `    <script src="${jsProdMin.href}"><\/script>\n`,
+                `    <script>mapboxgl.accessToken = "${mapboxgl.accessToken}";<\/script>\n`,
+                `    <link rel="stylesheet" href="${css.href}" />\n`,
+                '    <style>\n',
+                '        body { margin: 0; padding: 0; }\n',
+                '        html, body, #map { height: 100%; }\n',
+                '    </style>\n',
+                '</head>\n',
+                '<body>\n',
+                req.response,
+                '</body>\n',
+                '</html>' ], {type: 'text/html'}));
+
+            iframe.src = url;
+        }
+
+        prevButton.disabled = index === 0;
+        nextButton.disabled = index + 1 === pages.length;
+
+        location.hash = `page=${page}`;
+    }
+
+    prevButton.addEventListener('click', () => {
+        if (index > 0) {
+            index--;
+            load();
+        }
+    });
+
+    nextButton.addEventListener('click', () => {
+        if (index + 1 <= pages.length) {
+            index++;
+            load();
+        }
+    });
+
+    load();
+});

test/release/mapbox-gl-compare.json

@@ -0,0 +1,4 @@
+{
+    "title": "Swipe between maps",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/mapbox-gl-compare.html"
+}

test/release/mapbox-gl-directions.json

@@ -0,0 +1,4 @@
+{
+    "title": "Display driving directions",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/mapbox-gl-directions.html"
+}

test/release/mapbox-gl-draw.json

@@ -0,0 +1,4 @@
+{
+    "title": "Show drawn polygon area",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/mapbox-gl-draw.html"
+}

test/release/mapbox-gl-geocoder.json

@@ -0,0 +1,4 @@
+{
+    "title": "Add a geocoder",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/mapbox-gl-geocoder.html"
+}

test/release/mapbox-gl-rtl-text.json

@@ -0,0 +1,4 @@
+{
+    "title": "Add support for right-to-left scripts",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/mapbox-gl-rtl-text.html"
+}

test/release/popup-on-click.json

@@ -0,0 +1,4 @@
+{
+    "title": "Display a popup on click",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/popup-on-click.html"
+}

test/release/queryrenderedfeatures.json

@@ -0,0 +1,4 @@
+{
+    "title": "Get features under the mouse pointer",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/queryrenderedfeatures.html"
+}

test/release/satellite-map.json

@@ -0,0 +1,4 @@
+{
+    "title": "Display a satellite map",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/satellite-map.html"
+}

test/release/scroll-fly-to.json

@@ -0,0 +1,4 @@
+{
+    "title": "Fly to a location based on scroll position",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/scroll-fly-to.html"
+}

test/release/video-on-a-map.json

@@ -0,0 +1,4 @@
+{
+    "title": "Add a video",
+    "url": "https://raw.githubusercontent.com/mapbox/mapbox-gl-js-docs/publisher-production/docs/pages/example/video-on-a-map.html"
+}