featurepolicy-extension/page.html at master · ebidel/featurepolicy-extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!--
Copyright 2018 Google Inc. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<main class="layout">
  <section id="sidebar" class="border-right">
    <hgroup>
      <h1 class="title">Feature Policy Tester</h1>
      <!-- <h2 class="subtitle">tester</h2> -->
    </hgroup>
    <div class="summary">
      <a href="https://wicg.github.io/feature-policy/" target="_blank">Feature Policy</a> can be
      used to selectively enable, disable, and modify the behavior of various features and APIs
      in the browser. This can provide a well-lit path towards good performance and prevent common
      footguns when building or maintaining a site.
      <br><br>
      Learn more on <a href="https://developers.google.com/web/updates/2018/06/feature-policy" target="_blank">developers.google.com</a>
      or visit the <a href="https://feature-policy-demos.appspot.com/" target="_blank">demos site</a>.
    </div>
    <div id="settings">
      <h3>Options</h3>
      <div class="border-botton">
        <label>
          <input type="checkbox" id="persist-on-reload">Persist policy selections across page navigations
        </label>
        <p class="hint">Help: By default, refreshing the same page will continue to use any feature
        policy settings you customize to the right. To persist these selections
        across navigations to different pages, check the box above.</p>
      </div>
      <div>
        <button id="restore-button">Restore policies sent by server</button>
        <p class="hint">Help: Restores the original feature policies sent by the server and removes
        any customized values to the right.</p>
      </div>
    </div>
  </section>
  <div id="policy-lists">
    <h2>Policy status</h2>
    <div class="instructions">Instructions: click the feature polices below to
    toggle see how they effect the page. The page automatically refreshes.</div>
    <div id="error-msg"></div>
    <div class="layout">
      <div class="policy-list">
        <div id="active-policies"></div>
      </div>
    </div>
  </div>
</main>

<output></output>

<script type="module" src="panel.js"></script>
</body>
</html>