<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[215154] trunk/Websites/webkit.org</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/215154">215154</a></dd>
<dt>Author</dt> <dd>simon.fraser@apple.com</dd>
<dt>Date</dt> <dd>2017-04-08 16:55:33 -0700 (Sat, 08 Apr 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>Update the css-status page to handle changes in CSSProperties.json.
Change the page structure to allow the left sidebar to use sticky positioning.
"Done" -> "Supported".
Save the search in the URL.
Other formatting changes.
* wp-content/themes/webkit/css-status.php:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsiteswebkitorgChangeLog">trunk/Websites/webkit.org/ChangeLog</a></li>
<li><a href="#trunkWebsiteswebkitorgwpcontentthemeswebkitcssstatusphp">trunk/Websites/webkit.org/wp-content/themes/webkit/css-status.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsiteswebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/webkit.org/ChangeLog (215153 => 215154)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/ChangeLog 2017-04-08 23:55:30 UTC (rev 215153)
+++ trunk/Websites/webkit.org/ChangeLog 2017-04-08 23:55:33 UTC (rev 215154)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+2017-04-08 Simon Fraser <simon.fraser@apple.com>
+
+ Update the css-status page to handle changes in CSSProperties.json.
+
+ Change the page structure to allow the left sidebar to use sticky positioning.
+
+ "Done" -> "Supported".
+
+ Save the search in the URL.
+
+ Other formatting changes.
+
+ * wp-content/themes/webkit/css-status.php:
+
</ins><span class="cx"> 2017-04-06 Dean Jackson <dino@apple.com>
</span><span class="cx">
</span><span class="cx"> Fix broken link.
</span></span></pre></div>
<a id="trunkWebsiteswebkitorgwpcontentthemeswebkitcssstatusphp"></a>
<div class="modfile"><h4>Modified: trunk/Websites/webkit.org/wp-content/themes/webkit/css-status.php (215153 => 215154)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/wp-content/themes/webkit/css-status.php 2017-04-08 23:55:30 UTC (rev 215153)
+++ trunk/Websites/webkit.org/wp-content/themes/webkit/css-status.php 2017-04-08 23:55:33 UTC (rev 215154)
</span><span class="lines">@@ -32,57 +32,18 @@
</span><span class="cx"> var origin = new URL("https://<?php echo strpos(WP_HOST, "webkit.org") !== false ? "svn.webkit.org" : WP_HOST; ?>/");
</span><span class="cx"> var loadCSSProperties = xhrPromise(new URL("/repository/webkit/trunk/Source/WebCore/css/CSSProperties.json", origin));
</span><span class="cx">
</span><del>-/*
- TODO:
- "r" not labeled as SVG. needs two links (circle and radialGradient)
- filter on unspecified properties/values
-
- need separate filters on properties and values
-
- background-repeat-x isn't a web-exposed longhand in the background property.
-
- Need to indicate that some properties apply to SVG and HTML:
- pointer-events
- paint-order
-
- Annotate appearance values.
- Annotate things that only work in @rules like src or page, size, unicode-range, src, device orientation stuff.
-
- Denote replacement properties & values (e.g. word-wrap is now overflow-wrap.) other than in comments
-
- Show status comments
- Mark things pending removal
- Add a removed status.
-
- PROPERTY ISSUES
- -webkit-backface-visibility is not unprefixed
- "animatable" wrong for animation properties.
-
- Mark things as not applicable to the open web:
- -webkit-border-fit
- -apple-trailing-word
- -webkit-column-progress
- -webkit-column-axis
-
- -webkit-border-fit?. r19862 for iChat.
- status of margin-collapse properties
-
- Mark things as internal-only:
- -webkit-marquee*
- -webkit-text-security
- -webkit-text-decorations-in-effect
- -webkit-nbsp-mode ?
- -webkit-font-size-delta?
-*/
</del><span class="cx"> </script>
</span><span class="cx">
</span><span class="cx"> <style>
</span><span class="cx">
</span><ins>+.feature-status-page {
+ animation: none !important; /* This animation can trigger a hit-testing bug, so remove it for now */
+}
+
</ins><span class="cx"> .page {
</span><span class="cx"> display: -webkit-flex;
</span><span class="cx"> display: flex;
</span><del>- -webkit-flex-wrap: wrap;
- flex-wrap: wrap;
</del><ins>+ flex-direction: column;
</ins><span class="cx"> -webkit-justify-content: space-between;
</span><span class="cx"> justify-content: space-between;
</span><span class="cx"> box-sizing: border-box;
</span><span class="lines">@@ -89,6 +50,30 @@
</span><span class="cx"> width: 100%;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+section.side-by-side {
+ display: flex;
+ display: -webkit-flex;
+ flex: 1;
+ -webkit-flex: 1;
+}
+
+sidebar {
+ flex: 0 400px;
+ margin-right: 3rem;
+ font-size: 2rem;
+ margin-left: 1rem;
+}
+
+section.primary {
+ flex: 1;
+ -webkit-flex: 1;
+}
+
+.sticky {
+ position: -webkit-sticky;
+ top: 0;
+}
+
</ins><span class="cx"> .page h1 {
</span><span class="cx"> font-size: 4.2rem;
</span><span class="cx"> font-weight: 200;
</span><span class="lines">@@ -113,27 +98,22 @@
</span><span class="cx"> font-size: 2.2rem;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.page p {
- margin-bottom: 3rem;
-}
-
</del><span class="cx"> .property-count {
</span><span class="cx"> text-align: right;
</span><span class="cx"> color: #999;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#property-list {
- display: inline-block;
- width: 65%;
- word-wrap: break-word;
</del><ins>+.property-count p {
+ margin: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-/* Hide the internal links on search since they are unlikely to work. */
-#search:required:valid + * .internal-reference {
- display: none;
</del><ins>+#property-list {
+/* word-wrap: break-word;*/
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .property-header > h3:first-of-type {
</span><ins>+ -webkit-flex-grow: 1;
+ flex-grow: 1;
</ins><span class="cx"> margin: 0;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -176,8 +156,13 @@
</span><span class="cx"> margin-top: 1rem;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.comment {
+ font-size: smaller;
+}
+
</ins><span class="cx"> .more-info {
</span><span class="cx"> margin-top: 0.5em;
</span><ins>+ font-size: smaller;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .sub-features {
</span><span class="lines">@@ -206,7 +191,7 @@
</span><span class="cx">
</span><span class="cx"> ul.values {
</span><span class="cx"> margin-left: 3em;
</span><del>- margin-top: 0.5em;
</del><ins>+ margin-bottom: 0.5em;
</ins><span class="cx"> cursor: default;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -217,13 +202,17 @@
</span><span class="cx"> .property-header {
</span><span class="cx"> position: relative;
</span><span class="cx"> padding-right: 3rem;
</span><ins>+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ flex-direction: row;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.property-header:after {
</del><ins>+.property-header .toggle {
</ins><span class="cx"> display: inline-block;
</span><del>- content: "";
</del><span class="cx"> background: url('images/menu-down.svg') no-repeat 50%;
</span><span class="cx"> background-size: 2rem;
</span><ins>+ border: none;
</ins><span class="cx"> width: 2rem;
</span><span class="cx"> height: 2rem;
</span><span class="cx"> position: absolute;
</span><span class="lines">@@ -234,18 +223,12 @@
</span><span class="cx"> transition: transform 0.3s ease-out;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.property.opened .property-header:after {
</del><ins>+.property.opened .property-header .toggle {
</ins><span class="cx"> -webkit-transform: rotateX(-180deg);
</span><span class="cx"> -moz-transform: rotateX(-180deg);
</span><span class="cx"> transform: rotateX(-180deg);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.property-header h3 .internal-reference a {
- color: #999;
- text-decoration: none;
- padding-left: 0.5em;
-}
-
</del><span class="cx"> .property-header h3 .spec-label {
</span><span class="cx"> color: #999;
</span><span class="cx"> text-decoration: none;
</span><span class="lines">@@ -265,7 +248,7 @@
</span><span class="cx"> color: #444;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.property-header .property-alias {
</del><ins>+.property-alias {
</ins><span class="cx"> font-size: smaller;
</span><span class="cx"> color: #999;
</span><span class="cx"> }
</span><span class="lines">@@ -283,11 +266,6 @@
</span><span class="cx"> color: #999;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.property-header h3 .internal-reference a:hover {
- color: inherit;
- text-decoration: underline;
-}
-
</del><span class="cx"> .property.is-hidden {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><span class="lines">@@ -300,12 +278,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .property-status {
</span><del>- font-size: 2rem;
</del><span class="cx"> display: inline-block;
</span><span class="cx"> position: relative;
</span><ins>+ font-size: 2rem;
</ins><span class="cx"> min-width: 4em;
</span><span class="cx"> text-align: right;
</span><del>- display: none; /* Hide status for now. */
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .property-status,
</span><span class="lines">@@ -324,13 +301,13 @@
</span><span class="cx"> border-color: transparent transparent transparent transparent;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-#status-filters .done,
-.property-status.done,
-.property-status.done a {
</del><ins>+#status-filters .supported,
+.property-status.supported,
+.property-status.supported a {
</ins><span class="cx"> color: #339900;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.status-marker.done {
</del><ins>+.status-marker.supported {
</ins><span class="cx"> border-color: #339900 transparent transparent transparent;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -394,13 +371,14 @@
</span><span class="cx"> border-color: #FFC500 transparent transparent transparent;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+#status-filters .removed,
</ins><span class="cx"> .property-status.removed,
</span><span class="cx"> .property-status.removed a {
</span><del>- color: #999;
</del><ins>+ color: #7F7F7F;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .status-marker.removed {
</span><del>- border-color: #999 transparent transparent transparent;
</del><ins>+ border-color: #7F7F7F transparent transparent transparent;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #status-filters .non-standard,
</span><span class="lines">@@ -443,17 +421,6 @@
</span><span class="cx"> border-color: #804000 transparent transparent transparent;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-
-sidebar {
- width: -webkit-calc(33.33% - 3rem);
- width: -moz-calc(33.33% - 3rem);
- width: calc(33.33% - 3rem);
- display: inline-block;
- margin-right: 3rem;
- font-size: 2rem;
- margin-left: 1rem;
-}
-
</del><span class="cx"> .property-filters {
</span><span class="cx"> position: relative;
</span><span class="cx"> top: 0;
</span><span class="lines">@@ -489,17 +456,14 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #specifications {
</span><del>- max-height: 29rem;
- overflow: auto;
</del><ins>+ display: block;
+ font-size: 1.6rem;
+ border: 1px solid silver;
+ width: calc(100% - 2rem);
+ height: 3rem;
+ margin: 1rem 2rem;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-#specifications li {
- font-size: smaller;
- cursor: hand;
- margin-bottom: 0.5rem;
- margin-left: 2rem;
-}
-
</del><span class="cx"> h3 a[name], .admin-bar h3 a[name] {
</span><span class="cx"> top: initial;
</span><span class="cx"> width: auto;
</span><span class="lines">@@ -532,7 +496,6 @@
</span><span class="cx"> margin-top: 0.4rem;
</span><span class="cx"> }
</span><span class="cx"> }
</span><del>-
</del><span class="cx"> </style>
</span><span class="cx"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
</span><span class="cx">
</span><span class="lines">@@ -540,38 +503,46 @@
</span><span class="cx"> <?php echo str_repeat('&nbsp;', 200);?>
</span><span class="cx"> <h1><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>
</span><span class="cx">
</span><del>- <sidebar>
- <form id="property-filters" class="property-filters">
- <h2>Filters</h2>
- <input type="text" id="search" placeholder="Search filter&hellip;" title="Filter the property list." required>
- <h2>Filter by Status</h2>
- <ul id="status-filters">
- </ul>
- </form>
</del><ins>+ <section class="side-by-side">
+ <sidebar>
+ <section class="sticky">
+ <form id="property-filters" class="property-filters">
+ <h2>Filters</h2>
+ <input type="text" id="search" placeholder="Search filter&hellip;" title="Filter the property list." required>
+ <h2>Filter by Status</h2>
+ <ul id="status-filters">
+ </ul>
+ </form>
</ins><span class="cx">
</span><del>- <div class="prefixes">
- <h2>Filter by Prefix</h2>
- <ul id="prefix-filters">
- </ul>
- </div>
- </sidebar>
</del><ins>+ <div class="prefixes">
+ <h2>Filter by Prefix</h2>
+ <ul id="prefix-filters">
+ </ul>
+ </div>
+ </section>
+ </sidebar>
</ins><span class="cx">
</span><del>- <div id="property-list">
- <div class="property-count">
- <p><span id="property-count"></span> <span id="property-pluralize">properties</span></p>
- </div>
- </div>
</del><ins>+ <section class="primary">
+ <div id="property-list">
+ <div class="property-count">
+ <p><span id="property-count"></span> <span id="property-pluralize">properties</span></p>
+ </div>
+ </div>
</ins><span class="cx">
</span><del>- <template id="success-template">
- <ul class="properties" id="properties-container"></ul>
</del><ins>+ <template id="success-template">
+ <ul class="properties" id="properties-container"></ul>
</ins><span class="cx">
</span><del>- <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="/contributing-code/">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>
</del><ins>+ <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="/contributing-code/">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>
+
+ </section>
+ </section>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <?php //comments_template(); ?>
</span><span class="lines">@@ -586,6 +557,30 @@
</span><span class="cx"> <script>
</span><span class="cx"> function initializeStatusPage() {
</span><span class="cx">
</span><ins>+ const statusOrder = [
+ 'supported',
+ 'in-development',
+ 'under-consideration',
+ 'experimental',
+ 'non-standard',
+ 'not-considering',
+ 'not-implemented',
+ 'obsolete',
+ 'removed',
+ ];
+
+ const readableStatus = {
+ 'supported': 'Supported',
+ 'in-development': 'In Development',
+ 'under-consideration': 'Under Consideration',
+ 'experimental': 'Experimental',
+ 'non-standard': 'Non-standard',
+ 'not-considering': 'Not considering',
+ 'not-implemented': 'Not implemented',
+ 'obsolete': 'Obsolete',
+ 'removed': 'Removed',
+ };
+
</ins><span class="cx"> function sortAlphabetically(array)
</span><span class="cx"> {
</span><span class="cx"> function replaceDashPrefix(name)
</span><span class="lines">@@ -671,26 +666,11 @@
</span><span class="cx">
</span><span class="cx"> var container = document.createElement('li');
</span><span class="cx">
</span><del>- var hasSpecLink = specificationObject && "url" in specificationObject;
- var hasReferenceLink = categoryObject && "url" in categoryObject;
- var hasDocumentationLink = (specificationObject && "documentation-url" in specificationObject) || (categoryObject && "documentation-url" in categoryObject);
- var hasContactObject = specificationObject && "contact" in specificationObject;
-
- container.addEventListener('click', function (e) {
- if (container.className.indexOf('opened') !== -1) {
- container.className = container.className.replace(' opened','');
- } else container.className += " opened";
- });
-
</del><span class="cx"> container.className = "property";
</span><span class="cx">
</span><span class="cx"> var slug = propertyObject.name.toLowerCase().replace(/ /g, '-');
</span><span class="cx"> container.setAttribute("id", "property-" + slug);
</span><span class="cx">
</span><del>- if (window.location.hash && window.location.hash == "#" + container.getAttribute('id')) {
- container.className += " opened";
- }
-
</del><span class="cx"> var cornerStatus = document.createElement('div');
</span><span class="cx"> cornerStatus.className = "status-marker ";
</span><span class="cx"> container.appendChild(cornerStatus);
</span><span class="lines">@@ -710,7 +690,8 @@
</span><span class="cx"> titleElement.appendChild(anchorLinkElement);
</span><span class="cx">
</span><span class="cx"> if (categoryObject) {
</span><del>- if (hasSpecLink) {
</del><ins>+ if (specificationObject && ("url" in specificationObject || "obsolete-url" in specificationObject)) {
+ var url = ("url" in specificationObject) ? specificationObject.url : specificationObject['obsolete-url'];
</ins><span class="cx"> var specSpan = createLinkWithHeading("span", null, categoryObject.shortname, specificationObject.url);
</span><span class="cx"> specSpan.className = 'spec-label';
</span><span class="cx"> titleElement.appendChild(specSpan);
</span><span class="lines">@@ -724,18 +705,18 @@
</span><span class="cx">
</span><span class="cx"> featureHeaderContainer.appendChild(titleElement);
</span><span class="cx">
</span><ins>+ var toggledContentContainer = document.createElement('div');
+ toggledContentContainer.className = "toggleable";
+ descriptionContainer.appendChild(toggledContentContainer);
+
</ins><span class="cx"> var aliases = propertyNameAliases(propertyObject);
</span><span class="cx"> if (aliases.length) {
</span><span class="cx"> var propertyAliasDiv = document.createElement('div');
</span><span class="cx"> propertyAliasDiv.className = 'property-alias';
</span><span class="cx"> propertyAliasDiv.textContent = 'Also supported as: ' + aliases.join(', ');
</span><del>- featureHeaderContainer.appendChild(propertyAliasDiv);
</del><ins>+ toggledContentContainer.appendChild(propertyAliasDiv);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- var toggledContentContainer = document.createElement('div');
- toggledContentContainer.className = "toggleable";
- featureHeaderContainer.appendChild(toggledContentContainer);
-
</del><span class="cx"> var longhands = propertyLonghands(propertyObject);
</span><span class="cx"> if (longhands.length) {
</span><span class="cx"> var longhandsDiv = document.createElement('div');
</span><span class="lines">@@ -833,18 +814,26 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> var statusContainer = document.createElement("span");
</span><del>- cornerStatus.className += statusClassName = propertyObject.status.status.toLowerCase().replace(/ /g, '-');
- statusContainer.className = "property-status " + statusClassName;
</del><ins>+ cornerStatus.className += propertyObject.status.status;
+ statusContainer.className = "property-status " + propertyObject.status.status;
</ins><span class="cx"> if ("webkit-url" in propertyObject) {
</span><span class="cx"> var statusLink = document.createElement("a");
</span><span class="cx"> statusLink.href = propertyObject["webkit-url"];
</span><del>- statusLink.textContent = propertyObject.status.status;
</del><ins>+ statusLink.textContent = readableStatus[propertyObject.status.status];
</ins><span class="cx"> statusContainer.appendChild(statusLink);
</span><span class="cx"> } else {
</span><del>- statusContainer.textContent = propertyObject.status.status;
</del><ins>+ statusContainer.textContent = readableStatus[propertyObject.status.status];
</ins><span class="cx"> }
</span><ins>+ featureHeaderContainer.appendChild(statusContainer);
</ins><span class="cx">
</span><del>- toggledContentContainer.appendChild(statusContainer);
</del><ins>+ var toggle = document.createElement('button');
+ toggle.className = 'toggle';
+
+ toggle.addEventListener('click', function (e) {
+ container.classList.toggle('opened');
+ });
+
+ featureHeaderContainer.appendChild(toggle);
</ins><span class="cx">
</span><span class="cx"> if (specificationObject && "description" in specificationObject) {
</span><span class="cx"> var testDescription = document.createElement('p');
</span><span class="lines">@@ -865,6 +854,13 @@
</span><span class="cx"> toggledContentContainer.appendChild(comment);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (propertyObject.status && "comment" in propertyObject.status) {
+ var comment = document.createElement('p');
+ comment.className = 'comment';
+ comment.innerHTML = propertyObject.status.comment;
+ toggledContentContainer.appendChild(comment);
+ }
+
</ins><span class="cx"> container.appendChild(descriptionContainer);
</span><span class="cx">
</span><span class="cx"> function getMostSpecificProperty(categoryObject, specificationObject, attributeName)
</span><span class="lines">@@ -876,6 +872,10 @@
</span><span class="cx"> return categoryObject[attributeName];
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ var hasReferenceLink = categoryObject && "url" in categoryObject;
+ var hasDocumentationLink = (specificationObject && "documentation-url" in specificationObject) || (categoryObject && "documentation-url" in categoryObject);
+ var hasContactObject = specificationObject && "contact" in specificationObject;
+
</ins><span class="cx"> if (hasDocumentationLink || hasReferenceLink || hasContactObject) {
</span><span class="cx"> var moreInfoList = document.createElement("ul");
</span><span class="cx"> moreInfoList.className = 'more-info';
</span><span class="lines">@@ -888,6 +888,11 @@
</span><span class="cx"> if (hasReferenceLink) {
</span><span class="cx"> var url = getMostSpecificProperty(categoryObject, specificationObject, 'url');
</span><span class="cx"> moreInfoList.appendChild(createLinkWithHeading("li", "Reference", url, url));
</span><ins>+
+ if ('obsolete-url' in specificationObject){
+ var url = specificationObject['obsolete-url'];
+ moreInfoList.appendChild(createLinkWithHeading("li", "Reference", url, url));
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if (hasContactObject) {
</span><span class="lines">@@ -916,26 +921,34 @@
</span><span class="cx"> return container;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- function renderSpecifications(categories, properties)
</del><ins>+ function canonicalizeIdentifier(identifier)
</ins><span class="cx"> {
</span><ins>+ return identifier.toLocaleLowerCase().replace(/ /g, '-');
+ }
+
+ function renderSpecifications(categories, properties, selectedSpecifications)
+ {
</ins><span class="cx"> var specificationsList = document.getElementById('specifications');
</span><ins>+ specificationsList.addEventListener('change', function() { updateSearch(properties); });
</ins><span class="cx">
</span><ins>+ var selectedIndex = -1;
</ins><span class="cx"> var allCategories = Object.keys(categories).sort();
</span><del>- for (var categoryKey of allCategories) {
</del><ins>+
+ for (var i = 0; i < allCategories.length; ++i) {
+ var categoryKey = allCategories[i];
</ins><span class="cx"> var category = categories[categoryKey];
</span><del>- var entry = document.createElement("li");
- var label = document.createElement("label");
- var input = document.createElement("input");
- input.setAttribute('type','radio');
- input.setAttribute('value', categoryKey);
- input.setAttribute('name', 'categories');
- input.addEventListener('change', function() { updateSearch(properties); });
- label.appendChild(input);
- label.className = categoryKey.toLocaleLowerCase().replace(/ /g, '-');
- label.appendChild(document.createTextNode(" " + category['shortname']));
- entry.appendChild(label);
- specificationsList.appendChild(entry);
</del><ins>+ categoryKey = canonicalizeIdentifier(categoryKey);
+
+ var option = document.createElement("option");
+ option.setAttribute('value', categoryKey);
+ if (selectedSpecifications.indexOf(categoryKey) != -1)
+ selectedIndex = i;
+
+ option.appendChild(document.createTextNode(" " + category['shortname']));
+ specificationsList.appendChild(option);
</ins><span class="cx"> }
</span><ins>+ if (selectedIndex != -1)
+ specificationsList.selectedIndex = selectedIndex;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function getPropertyCategory(propertyObject)
</span><span class="lines">@@ -970,17 +983,6 @@
</span><span class="cx"> var featuresEls = document.querySelectorAll('.properties > li');
</span><span class="cx"> var statusFilters = {};
</span><span class="cx">
</span><del>- var statusOrder = [
- 'done',
- 'in development',
- 'under consideration',
- 'experimental',
- 'non-standard',
- 'not considering',
- 'not implemented',
- 'obsolete',
- ];
-
</del><span class="cx"> properties.forEach(function(property, i) {
</span><span class="cx"> property.el = featuresEls[i];
</span><span class="cx"> property.visible = true;
</span><span class="lines">@@ -997,18 +999,25 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ var selectedStatuses = statusesFromURL();
+ var selectedSpecs = specificationsFromURL();
+
</ins><span class="cx"> for (var key of statusOrder) {
</span><span class="cx"> var status = statusFilters[key];
</span><ins>+ var canonicalStatus = canonicalizeIdentifier(status);
+
</ins><span class="cx"> var entry = document.createElement("li");
</span><span class="cx"> var label = document.createElement("label");
</span><span class="cx"> var input = document.createElement("input");
</span><span class="cx"> input.setAttribute('type','checkbox');
</span><del>- input.setAttribute('value', key);
</del><ins>+ input.setAttribute('value', canonicalStatus);
+ if (selectedStatuses.indexOf(canonicalStatus) != -1)
+ input.checked = true;
</ins><span class="cx"> input.className = 'status-checkbox';
</span><span class="cx"> input.addEventListener('change', function() { updateSearch(properties); });
</span><span class="cx"> label.appendChild(input);
</span><del>- label.className = status.replace(/ /g, '-');
- label.appendChild(document.createTextNode(" " + convertToTitleCase(status)));
</del><ins>+ label.className = canonicalStatus;
+ label.appendChild(document.createTextNode(" " + readableStatus[status]));
</ins><span class="cx"> entry.appendChild(label);
</span><span class="cx"> statusContainer.appendChild(entry);
</span><span class="cx"> }
</span><span class="lines">@@ -1020,12 +1029,14 @@
</span><span class="cx"> var input = document.createElement("input");
</span><span class="cx"> input.id = 'by-spec-checkbox';
</span><span class="cx"> input.setAttribute('type','checkbox');
</span><ins>+ if (selectedSpecs.length > 0)
+ input.checked = true;
</ins><span class="cx"> input.addEventListener('change', function() { updateSearch(properties); });
</span><span class="cx"> label.appendChild(input);
</span><span class="cx"> label.appendChild(document.createTextNode(" By Specification:"));
</span><span class="cx"> entry.appendChild(label);
</span><span class="cx">
</span><del>- var specsList = document.createElement('ul');
</del><ins>+ var specsList = document.createElement('select');
</ins><span class="cx"> specsList.className = 'specifications';
</span><span class="cx"> specsList.id = 'specifications';
</span><span class="cx"> entry.appendChild(specsList);
</span><span class="lines">@@ -1061,6 +1072,11 @@
</span><span class="cx"> } else filtersForm.className += ' opened';
</span><span class="cx"> });
</span><span class="cx">
</span><ins>+ var searchTerm = searchTermFromURL();
+ if (searchTerm.length) {
+ inputField.value = searchTerm;
+ inputField.placeholder = '';
+ }
</ins><span class="cx"> inputField.addEventListener('input', function() { updateSearch(properties); });
</span><span class="cx">
</span><span class="cx"> var inputs = [].slice.call(filtersForm.getElementsByTagName('input'));
</span><span class="lines">@@ -1070,7 +1086,7 @@
</span><span class="cx"> });
</span><span class="cx"> });
</span><span class="cx">
</span><del>- renderSpecifications(categories, properties);
</del><ins>+ renderSpecifications(categories, properties, selectedSpecs);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function getValuesOfCheckedItems(items)
</span><span class="lines">@@ -1084,13 +1100,25 @@
</span><span class="cx"> return checkedValues;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ function getValuesOfSelectedItems(select)
+ {
+ var selectedValues = [];
+
+ if (select.selectedIndex != -1)
+ selectedValues.push(select.options[select.selectedIndex].value);
+
+ return selectedValues;
+ }
+
</ins><span class="cx"> function selectedSpecifications()
</span><span class="cx"> {
</span><del>- if (!document.getElementById('by-spec-checkbox').checked)
</del><ins>+ var specificationsList = document.getElementById('specifications');
+ if (!document.getElementById('by-spec-checkbox').checked) {
+ specificationsList.disabled = true;
</ins><span class="cx"> return [];
</span><del>-
- var specificationsList = document.getElementById('specifications');
- return getValuesOfCheckedItems([].slice.call(specificationsList.getElementsByTagName('input')));
</del><ins>+ }
+ specificationsList.disabled = false;
+ return getValuesOfSelectedItems(specificationsList);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function updateSearch(properties)
</span><span class="lines">@@ -1109,6 +1137,7 @@
</span><span class="cx"> document.getElementById('property-count').textContent = numVisible;
</span><span class="cx">
</span><span class="cx"> updateSpecsState();
</span><ins>+ updateURL(searchTerm, selectedSpecifications(), activeStatusFilters, activePrefixFilters);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function updateSpecsState()
</span><span class="lines">@@ -1121,7 +1150,76 @@
</span><span class="cx"> radiobutton.disabled = !specsEnabled;
</span><span class="cx"> });
</span><span class="cx"> }
</span><ins>+
+ function updateURL(searchTerm, selectedSpecifications, activeStatusFilters, activePrefixFilters)
+ {
+ var searchString = '';
+
+ function appendDelimiter()
+ {
+ searchString += searchString.length ? '&' : '?';
+ }
+
+ if (searchTerm.length > 0) {
+ appendDelimiter();
+ searchString += 'search=' + encodeURIComponent(searchTerm);
+ }
+
+ if (activeStatusFilters.length) {
+ appendDelimiter();
+ searchString += 'status=' + activeStatusFilters.join(',');
+ }
</ins><span class="cx">
</span><ins>+ if (selectedSpecifications.length) {
+ appendDelimiter();
+ searchString += 'specs=' + selectedSpecifications.join(',');
+ }
+
+ if (activePrefixFilters.length) {
+ appendDelimiter();
+ searchString += 'prefix=' + activePrefixFilters.join(',');
+ }
+
+ var current = window.location.href;
+ window.location.href = current.replace(/#(.*)$/, '') + '#' + searchString;
+ }
+
+ function searchTermFromURL()
+ {
+ var search = window.location.search;
+ var searchRegExp = /\#.*search=([^&]+)/;
+
+ var result;
+ if (result = window.location.href.match(searchRegExp))
+ return decodeURIComponent(result[1]);
+
+ return '';
+ }
+
+ function statusesFromURL()
+ {
+ var search = window.location.search;
+ var statusRegExp = /\#.*status=([^&]+)/;
+
+ var result;
+ if (result = window.location.href.match(statusRegExp))
+ return result[1].split(',');
+
+ return [];
+ }
+
+ function specificationsFromURL()
+ {
+ var search = window.location.search;
+ var specsRegExp = /\#.*specs=([^&]+)/;
+
+ var result;
+ if (result = window.location.href.match(specsRegExp))
+ return result[1].split(',');
+
+ return [];
+ }
+
</ins><span class="cx"> function valueOrAliasIsPrefixed(valueObj)
</span><span class="cx"> {
</span><span class="cx"> if (prefixRegexp.exec(valueObj.value))
</span><span class="lines">@@ -1197,6 +1295,9 @@
</span><span class="cx">
</span><span class="cx"> function propertyIsSearchMatch(propertyObject, searchTerm)
</span><span class="cx"> {
</span><ins>+ if (searchTerm.length == 0)
+ return true;
+
</ins><span class="cx"> if (propertyObject.name.toLowerCase().indexOf(searchTerm) !== -1)
</span><span class="cx"> return true;
</span><span class="cx">
</span><span class="lines">@@ -1226,6 +1327,17 @@
</span><span class="cx"> return undefined;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ function getSpecificationObsoleteCategory(propertyObject)
+ {
+ if ('specification' in propertyObject) {
+ var specification = propertyObject.specification;
+ if ('obsolete-category' in specification) {
+ return specification['obsolete-category'];
+ }
+ }
+ return undefined;
+ }
+
</ins><span class="cx"> function isCategoryMatch(propertyObject, categories)
</span><span class="cx"> {
</span><span class="cx"> if (!categories.length)
</span><span class="lines">@@ -1237,6 +1349,12 @@
</span><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx"> }
</span><ins>+
+ if (category = getSpecificationObsoleteCategory(propertyObject)) {
+ if (categories.indexOf(category) !== -1) {
+ return true;
+ }
+ }
</ins><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1259,7 +1377,7 @@
</span><span class="cx"> return true;
</span><span class="cx"> if (propertyObject.status === undefined)
</span><span class="cx"> return false;
</span><del>- if (activeFilters.indexOf(propertyObject.status.status.toLowerCase()) !== -1)
</del><ins>+ if (activeFilters.indexOf(propertyObject.status.status) !== -1)
</ins><span class="cx"> return true;
</span><span class="cx">
</span><span class="cx"> return false;
</span><span class="lines">@@ -1382,14 +1500,16 @@
</span><span class="cx">
</span><span class="cx"> if (!('status' in propertyObject)) {
</span><span class="cx"> propertyObject.status = {
</span><del>- 'status' : 'done',
</del><ins>+ 'status' : 'supported',
</ins><span class="cx"> 'enabled-by-default' : true
</span><span class="cx"> };
</span><span class="cx"> } else if (!('status' in propertyObject.status))
</span><del>- propertyObject.status.status = 'done';
</del><ins>+ propertyObject.status.status = 'supported';
+
+ propertyObject.status.status = canonicalizeIdentifier(propertyObject.status.status);
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- function displayFeatures(results)
</del><ins>+ function renderContent(results)
</ins><span class="cx"> {
</span><span class="cx"> var mainContent = document.getElementById("property-list");
</span><span class="cx"> var successSubtree = document.importNode(document.getElementById("success-template").content, true);
</span><span class="lines">@@ -1416,7 +1536,7 @@
</span><span class="cx"> renderProperties(categories, everythingToShow);
</span><span class="cx">
</span><span class="cx"> initSearch(everythingToShow, categories);
</span><del>-
</del><ins>+
</ins><span class="cx"> updateSearch(everythingToShow);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1439,7 +1559,7 @@
</span><span class="cx"> mainContent.appendChild(successSubtree);
</span><span class="cx"> }
</span><span class="cx">
</span><del>- Promise.all([loadCSSProperties]).then(displayFeatures).catch(displayError);
</del><ins>+ Promise.all([loadCSSProperties]).then(renderContent).catch(displayError);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> document.addEventListener("DOMContentLoaded", initializeStatusPage);
</span></span></pre>
</div>
</div>
</body>
</html>