features.html

{% extends "base.html" %}

{% load inline_file %}

{% block preload %}
{% if VULCANIZE %}
  <link rel="preload" href="/static/elements/features-imports.vulcanize.js" as="script">
{% endif %}
{% if prod %}
  <link rel="preload" href="/features.json" as="script">
{% endif %}
{% endblock %}

{% block html_imports %}
  <link id="features_import"
        rel="import"
        href="/static/elements/features-imports{% if VULCANIZE %}.vulcanize{% endif %}.html"
        async>
{% endblock %}

{% block rss %}
<link rel="alternate" type="application/rss+xml" href="http://www.chromestatus.com/features.xml" title="All features" />
{% for k,v in categories %}
<link rel="alternate" type="application/rss+xml"
      href="http://www.chromestatus.com/features.xml?category={{v}}" title='"{{k}}" features'>
{% endfor %}

{% endblock %}

{% block css %}
<!-- <link rel="stylesheet" href="/static/css/features/features.css"> -->
<style>{% inline_file "/static/css/features/features.css" %}</style>
{% endblock %}

{% block subheader %}
<div id="subheader">
  <div class="feature-count">
    <h2>Features: <span class="num-features"></span></h2>
  </div>
  <div class="search">
    <input type="search" placeholder="Filter" disabled>
    <a href="" class="legend"><iron-icon icon="chromestatus:help"></iron-icon></a>
  </div>
  <div class="actionlinks">
    {% if user.is_whitelisted %}
      <a href="/admin/features/new" class="blue-button"><iron-icon icon="chromestatus:add-circle-outline"></iron-icon>Add new feature</a>
    {% endif %}
  </div>
</div>
{% endblock %}

{% block drawer %}
<h3>Chrome versions</h3>

<chromedash-metadata
  impl-statuses='{{IMPLEMENTATION_STATUSES|safe}}'
  status='{
    "NO_ACTIVE_DEV": 1,
    "PROPOSED": 2,
    "IN_DEVELOPMENT": 3,
    "BEHIND_A_FLAG": 4,
    "ENABLED_BY_DEFAULT": 5,
    "DEPRECATED": 6,
    "REMOVED": 7,
    "IN_EXPERIMENTAL_FRAMEWORK": 8,
    "NO_LONGER_PURSUING": 1000
  }'></chromedash-metadata>
{% endblock %}

{% block overlay %}
<chromedash-legend>
  <p class="description">What you're looking at is a mostly comprehensive list of
  web platform features that have landed in Chromium, ordered chronologically by the milestone
  in which they were added. Features marked "No active development" are being
  considered or have yet to be started. Features marked "In development" are currently
  being worked on.</p>
  <div class="close buttons">
    <iron-icon icon="chromestatus:close" dialog-dismiss></iron-icon>
  </div>
</chromedash-legend>
{% endblock %}

{% block content %}
<chromedash-featurelist {% if user.is_whitelisted %}whitelisted{% endif %}></chromedash-featurelist>
{% endblock %}

{% block js %}
<script>
(function() {
'use strict';

var featureList = $('chromedash-featurelist');
var chromeMetadata = $('chromedash-metadata');
var overlay = $('chromedash-legend');
var search = $('.search input');
var overlayLoaded = false;

// Set search box to URL deep link.
if (location.hash) {
  search.value = location.hash.substr(1);
}

var featuresUnveilMetric = new Metric('features_unveil');
var featuresFetchMetric = new Metric('features_loaded');

chromeMetadata.addEventListener('query-changed', function(e) {
  search.value = '=' + e.detail.version;
  featureList.filter(search.value);
});

featureList.addEventListener('filtered', function(e) {
  $('.num-features').textContent = e.detail.count;
  document.body.classList.remove('loading');
});

featureList.addEventListener('app-ready', function() {
  featuresUnveilMetric.end().log().sendToAnalytics('features', 'unveil');

  // Want "Caching is complete" toast to be slightly delayed after page load.
  // To do that, wait to register SW until features have loaded.
  registerServiceWorker();
});

featureList.addEventListener('filter-category', function(e) {
  search.value = 'category: ' + e.detail.val;
  featureList.filter(search.value);
});

featureList.addEventListener('filter-owner', function(e) {
  search.value = 'owner: ' + e.detail.val;
  featureList.filter(search.value);
});

// Clear input when user clicks the 'x' button.
search.addEventListener('search', function(e) {
  if (!e.target.value) {
    featureList.filter();
    chromeMetadata.selected = null;
  }
});

search.addEventListener('input', function(e) {
  featureList.filter(e.target.value, true);
  chromeMetadata.selected = null;
});

// Handles lazy loading chromedash-legend and settings its properties only once.
var helpOverlayLoadPromise = function(overlay) {
  return new Promise(function(resolve, reject) {
    if (overlayLoaded) {
      return resolve();
    }

    var url = '/static/elements/chromedash-legend{% if VULCANIZE %}.vulcanize{% endif %}.html';

    Polymer.Base.importHref(url, function() {
      overlayLoaded = true;
      overlay.views = {
        vendors: {{VENDOR_VIEWS|safe}}, // set from server
        webdevs: {{WEB_DEV_VIEWS|safe}}, // set from server
        standards: {{STANDARDS_VALS|safe}} // set from server
      };
      resolve();
    }, function(e) {
      reject(new Error('Error loading:' + url));
    }, true);
  });
}


$('.legend').addEventListener('click', function(e) {
  e.preventDefault();

  helpOverlayLoadPromise(overlay).then(function() {
    overlay.toggle();
  });
});

// Fire of features.json XHR right away so data can populate faster.
var featuresPromise = new Promise(function(resolve, reject) {
  var url = location.hostname == 'localhost' ? 'https://www.chromestatus.com/features.json' :
                                               '/features.json';
  var xhr = new XMLHttpRequest(); // Fill features list via AJAX.
  xhr.open('GET', url);
  xhr.responseType = 'json';

  featuresUnveilMetric.start();

  xhr.onloadend = function(e) {
    featuresFetchMetric.end().log().sendToAnalytics('features', 'loaded');

    if (e.target.status < 400) {
      resolve(e.target.response);
    } else {
      reject(new Error('Features XHR failed with status ' + e.target.statusText));
    }
  };
  xhr.onerror = reject;

  featuresFetchMetric.start();
  xhr.send();
});

window.asyncImportsLoadPromise = new Promise(function(resolve, reject) {
  var featuresImport = document.querySelector('#features_import');
  featuresImport.onerror = reject;
  featuresImport.onload = function(e) {
    resolve();

    // Feature list needs access to the selected milestone.
    featureList.metadata = chromeMetadata;
    featureList.search = search;

    featuresPromise.then(function(features) {
      featureList.features = features;
      featureList.filter(search.value);
      search.disabled = false;
    }, function(e) {
      document.getElementById('content').classList.add('error');
      console.error(e);
    });
  };
});

window.addEventListener('popstate', function(e) {
  if (e.state) {
    featureList.scrollToFeature(e.state.id);
  }
});

})();
</script>
{% endblock %}