Start a basic status page on webkit.org
authorbenjamin@webkit.org <benjamin@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 26 Apr 2015 19:57:11 +0000 (19:57 +0000)
committerbenjamin@webkit.org <benjamin@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sun, 26 Apr 2015 19:57:11 +0000 (19:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=143940

Patch by Benjamin Poulain  <benjamin@webkit.org>, Chris Bateman <chrisb808@gmail.com> on 2015-04-26
Reviewed by Darin Adler.

* status.html: Added.
Nothing fancy, for now just show the "features" list of the two features.json

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@183359 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/status.html [new file with mode: 0644]

index f588320..ca22b08 100644 (file)
@@ -1,3 +1,13 @@
+2015-04-26  Benjamin Poulain  <benjamin@webkit.org>, Chris Bateman  <chrisb808@gmail.com>
+
+        Start a basic status page on webkit.org
+        https://bugs.webkit.org/show_bug.cgi?id=143940
+
+        Reviewed by Darin Adler.
+
+        * status.html: Added.
+        Nothing fancy, for now just show the "features" list of the two features.json
+
 2015-04-19  Dan Bernstein  <mitz@apple.com>
 
         Fixed a typo.
diff --git a/Websites/webkit.org/status.html b/Websites/webkit.org/status.html
new file mode 100644 (file)
index 0000000..fcbd770
--- /dev/null
@@ -0,0 +1,254 @@
+<?php
+$extra_head_content = <<<EOF
+<style type="text/css">
+p { margin: 0px 0px 4px 0px; }
+</style>
+EOF;
+include("header.inc");
+?>
+
+<style>
+#feature-list {
+    margin-top: 2em;
+}
+
+#search {
+    width: 50%;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.feature-header {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    flex-direction: row;
+}
+
+.feature-header > h3:first-of-type {
+    -webkit-flex-grow: 1;
+    flex-grow: 1;
+}
+
+ul.features {
+    padding: 0;
+}
+
+.feature {
+    display: block;
+    background: linear-gradient(#fff, #f9f9f9);
+    border: 1px solid #bbb;
+    border-radius: 5px;
+    padding: 1em;
+    margin: 1em 0 !important;
+}
+
+.feature.is-hidden {
+    display: none;
+}
+
+.feature-header {
+    display: inline-block;
+    width: 100%;
+    vertical-align: middle;
+}
+.feature-heading {
+    margin: 0;
+    float: left;
+    font-size: 16px;
+    line-height: 1.4em;
+    text-shadow: none;
+}
+.feature-status {
+    float:right;
+}
+.feature-desc {
+    margin: 0.4em 0;
+}
+
+ul.feature-details {
+    margin: 0;
+}
+
+.feature-statusItem {
+    margin-right: .5em;
+}
+</style>
+
+<h2>WebKit Web Platform Status</h2>
+<div id="feature-list">
+</div>
+
+<template id="success-template">
+    <input type="search" id="search" placeholder="Filter" title="Filter the feature list.">
+    <ul class="features" id="featuresContainer"></ul>
+    <p>Cannot find something? You can contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or contact the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list for questions.</p>
+    <p>You can also <a href="http://127.0.0.1:8000/coding/contributing.html">contribute to features</a> directly, the entire project is Open Source. To report bugs on existing features or check existing bug reports, see <a href="https://bugs.webkit.org">https://bugs.webkit.org</a>.</p>
+</template>
+<template id="error-template">
+    <p>Error: unable to load the features list (<span id="error-message"></span>).</p>
+    <p>If this is not resolved soon, please contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list.</p>
+</template>
+
+<script id="template" type="x-tmpl-mustache">
+{{#features}}
+    <li class="feature">
+        <div class="feature-header">
+            <div class="feature-header">
+                <h3 class="feature-heading">{{name}}</h3>
+                <strong class="feature-status">Status: {{#webkit-url}}<a href="{{webkit-url}}">{{/webkit-url}}{{status.status}}{{#webkit-url}}</a>{{/webkit-url}}</strong>
+            </div>
+            {{#description}}
+                <p class="feature-desc">{{description}}</p>
+            {{/description}}
+            {{#comment}}
+            <p>Comment: {{comment}}</p>
+            {{/comment}}
+        </div>
+        <ul class="feature-details">
+            {{#documentation-url}}
+                 <li>Documentation: <a href="{{documentation-url}}">{{documentation-url}}</a></li>
+            {{/documentation-url}}
+            {{#url}}
+                <li>More Info: <a href="{{url}}">{{url}}</a></li>
+            {{/url}}
+            {{#contact}}
+                <li>Contact:
+                    {{#twitter}} <a href="https://twitter.com/{{twitter}}">{{twitter}}</a>{{/twitter}}
+                    {{#email}}<a href="mailto:{{email}}">{{name}}</a>{{/email}}
+                </li>
+            {{/contact}}
+        </ul>
+    </li>
+{{/features}}
+</script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
+<script>
+function initializeStatusPage() {
+    function sortAlphabetically(array) {
+        array.sort(function(a, b){
+            var aName = a.name.toLocaleLowerCase();
+            var bName = b.name.toLocaleLowerCase();
+            
+            if (aName < bName) {
+                return -1;
+            }
+            if (aName > bName) {
+                return 1;
+            }
+            return 0;
+        });
+    }
+
+    function renderFeatures(features) {
+        var template = document.getElementById('template').innerHTML;
+        
+        var rendered = Mustache.render(template, {
+            features: features
+        });
+        
+        document.getElementById('featuresContainer').innerHTML = rendered;
+    }
+
+    function initSearch(featuresArray) {
+        var inputField = document.getElementById('search');
+        var featuresEls = document.querySelectorAll('.features > li');
+        
+        featuresArray.forEach(function(feature, i) {
+            feature.el = featuresEls[i];
+            feature.visible = true;
+        });
+
+        inputField.addEventListener('input', search);
+
+        function search(ev) {
+            var searchTerm = inputField.value.trim().toLowerCase();
+            searchFeatures(featuresArray, searchTerm);
+        }
+    }
+
+    function searchFeatures(featuresArray, searchTerm) {
+        featuresArray.forEach(function(feature) {
+            var visible = isSearchMatch(feature, searchTerm);
+            
+            if (visible && !feature.visible) {
+                feature.el.className = 'feature';
+            } else if (!visible && feature.visible) {
+                feature.el.className = 'feature is-hidden';
+            }
+            
+            feature.visible = visible;
+        });
+    }
+
+    function isSearchMatch(feature, searchTerm) {
+        return feature.name.toLowerCase().indexOf(searchTerm) !== -1;
+    }
+
+    function displayFeatures(results)
+    {
+        var mainContent = document.getElementById("feature-list");
+        var successSubtree = document.importNode(document.getElementById("success-template").content, true);
+        mainContent.appendChild(successSubtree);
+
+        var allFeatures = [];
+        for (var i in results) {
+            allFeatures = allFeatures.concat(results[i].features);
+        }
+        sortAlphabetically(allFeatures);
+        renderFeatures(allFeatures);
+        initSearch(allFeatures);
+    }
+
+    function displayError(error)
+    {
+        var mainContent = document.getElementById("feature-list");
+        var successSubtree = document.importNode(document.getElementById("error-template").content, true);
+
+        var errorMessage = "Unable to load " + error.url;
+
+        if (error.request.status !== 200) {
+            errorMessage += ", status: " + error.request.status + " - " + error.request.statusText;
+        } else if (!error.response) {
+            errorMessage += ", the JSON file cannot be processed.";
+        }
+
+        successSubtree.querySelector("#error-message").textContent = errorMessage;
+
+        mainContent.appendChild(successSubtree);
+    }
+
+    function xhrPromise(url) {
+        return new Promise(function(resolve, reject) {
+            var xhrRequest = new XMLHttpRequest();
+            xhrRequest.responseType = "json";
+            xhrRequest.open('GET', url);
+
+            xhrRequest.onload = function() {
+                if (xhrRequest.status == 200) {
+                    if (xhrRequest.response) {
+                        resolve(xhrRequest.response);
+                    } else {
+                        reject({ request: xhrRequest, url:url});
+                    }
+                } else {
+                    reject({ request: xhrRequest, url:url});
+                }
+            };
+            xhrRequest.onerror = function() {
+                reject({ request: xhrRequest, url:url});
+            };
+            xhrRequest.send();
+        });
+    }
+
+    var loadJavaScriptCoreFeatures = xhrPromise("https://svn.webkit.org/repository/webkit/trunk/Source/JavaScriptCore/features.json");
+    var loadWebCoreFeatures = xhrPromise("https://svn.webkit.org/repository/webkit/trunk/Source/WebCore/features.json");
+    Promise.all([loadJavaScriptCoreFeatures, loadWebCoreFeatures]).then(displayFeatures).catch(displayError);
+}
+
+document.addEventListener("DOMContentLoaded", initializeStatusPage);
+</script>
+
+<?php include("footer.inc"); ?>