features.html

{% extends "_base.html" %}


{% block rss %}
  <link rel="alternate" type="application/rss+xml" href="/features.xml" title="All features" />
{% endblock %}

{% block css %}
<link rel="stylesheet" href="/static/css/features/features.css?v={{app_version}}">
{% endblock %}

{% block content %}
  <div id="column-container">
    <div id="drawer-column">
      <h3>Filter By</h3>
        <!-- Use single quote here. The value is a json string with double quote. -->
        <chromedash-metadata implstatuses='{{IMPLEMENTATION_STATUSES|safe}}'></chromedash-metadata>
    </div>
    <div id="content-column">
      <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>
          <button class="legend-button">
            <iron-icon icon="chromestatus:help"></iron-icon>
          </button>
        </div>
      </div>
      <chromedash-featurelist
        {% if user %} user="{{user_json}}" {% endif %}
        {% if user %} signedInUser="{{user.email}}" {% endif %}
        {% if user.can_edit_all %}isSiteEditor{% endif %}
        {% if user %} editableFeatures="{{user.editable_features}}" {% endif %}
        {% if user.can_approve %}canApprove{% endif %}>
      </chromedash-featurelist>
    </div>
  </div>
{% endblock %}

{% block overlay %}
  <chromedash-legend></chromedash-legend>
{% endblock %}

{% block js %}
  <script type="module" nonce="{{nonce}}">
    import {loadFeatureLegendViews} from "/static/dist/features-page.js?v={{app_version}}";
    (function() {
      'use strict';
      // Get values from server. used in /static/dist/features-page.js
      const VIEWS = {
        vendors: {{VENDOR_VIEWS|safe}},
        webdevs: {{WEB_DEV_VIEWS|safe}},
        standards: {{STANDARDS_VALS|safe}}
      };
      loadFeatureLegendViews(VIEWS);
    })();

    // Since we don't use chromedash-app on this page, re-implement a little
    // logic for the main menu shifting the page content on desktop.
    const isMobile = window.screen.width < 701;
    if (!isMobile) {
        const header = document.querySelector('chromedash-header');
        const drawer = document.querySelector('chromedash-drawer');
        const flexWrapper = document.querySelector('#content-flex-wrapper');
        const shiftedStyle = 'margin-left: 210px; justify-content: start';
        drawer.defaultOpen = true;
        flexWrapper.style = shiftedStyle;

        function shiftPage() {
            const slDrawer = drawer.shadowRoot.querySelector('sl-drawer');
            const isOpening = !slDrawer.open;
            flexWrapper.style = isOpening ? shiftedStyle : '';
        }
        header.addEventListener('drawer-clicked', shiftPage);
    }

  </script>
{% endblock %}