Title: [183359] trunk/Websites/webkit.org
- Revision
- 183359
- Author
- [email protected]
- Date
- 2015-04-26 12:57:11 -0700 (Sun, 26 Apr 2015)
Log Message
Start a basic status page on webkit.org
https://bugs.webkit.org/show_bug.cgi?id=143940
Patch by Benjamin Poulain <[email protected]>, Chris Bateman <[email protected]> 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
Modified Paths
Added Paths
Diff
Modified: trunk/Websites/webkit.org/ChangeLog (183358 => 183359)
--- trunk/Websites/webkit.org/ChangeLog 2015-04-26 19:55:18 UTC (rev 183358)
+++ trunk/Websites/webkit.org/ChangeLog 2015-04-26 19:57:11 UTC (rev 183359)
@@ -1,3 +1,13 @@
+2015-04-26 Benjamin Poulain <[email protected]>, Chris Bateman <[email protected]>
+
+ 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 <[email protected]>
Fixed a typo.
Added: trunk/Websites/webkit.org/status.html (0 => 183359)
--- trunk/Websites/webkit.org/status.html (rev 0)
+++ trunk/Websites/webkit.org/status.html 2015-04-26 19:57:11 UTC (rev 183359)
@@ -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="" on Twitter or contact the <a href="" mailing list for questions.</p>
+ <p>You can also <a href="" to features</a> directly, the entire project is Open Source. To report bugs on existing features or check existing bug reports, see <a href=""
+</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="" on Twitter or the <a href="" 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=""
+ </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}}
+ {{#url}}
+ <li>More Info: <a href=""
+ {{/url}}
+ {{#contact}}
+ <li>Contact:
+ {{#twitter}} <a href=""
+ {{#email}}<a href=""
+ </li>
+ {{/contact}}
+ </ul>
+ </li>
+{{/features}}
+</script>
+
+<script src=""
+<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/_javascript_Core/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"); ?>
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
