pages/popup.html


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
73
74
75
76
77
78
79
80
81

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="options.css">
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }

      #helpText, #optionsLink {
        font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        font-size: 12px;
      }

      #helpText { color: #979ca0; }
      #exclusionAddButton { width: 80px; }

      #saveOptions {
        margin-top: 5px; /* Match exclusionAddButton */
        margin-left: 5px;
        float: right;
      }

      /* These are overridden from options.css. */

      #endSpace, #footerWrapper { width: 450px; }
      #footerWrapper { margin-left: 0px; }
      /* Make exclusionScrollBox smaller than on the options page, because there are likely to be fewer
         matching rules, and the popup obscures the underlying page. */
      #exclusionScrollBox { max-height: 124px; }

      #endSpace { /* Leave space for the fixed footer. */
        min-height: 46px;
        max-height: 46px;
      }

    </style>
    <script src="options.js"></script>
  </head>
  <body>
    <!-- Copied (almost) directly from options.html - start -->
    <div id="exclusionScrollBox">
       <table id="exclusionRules">
          <tr>
             <td><span class="exclusionHeaderText">URL Patterns</span></td>
             <td><span class="exclusionHeaderText">Excluded Keys</span></td>
          </tr>
       </table>
       <template id="exclusionRuleTemplate">
          <tr class="exclusionRuleTemplateInstance">
             <td><input/ type="text" class="pattern" placeholder="URL pattern"></td>
             <td class="exclusionRulePassKeys"><input/ type="text" class="passKeys" placeholder="Excluded keys"></td>
             <td class="exclusionRemoveButton">
               <input/ type="button" tabindex = "-1" class="exclusionRemoveButtonButton" value="&#x2716;"></td>
          </tr>
       </template>
    </div>
    <!-- Copied (almost) directly from options.html - end -->

    <!-- Some extra space which is hidden underneath the footer. -->
    <div id="endSpace"/>

    <div id="footer">
      <div id="footerWrapper">
        <table id="footerTable">
          <tr>
            <td id="footerTableData">
              <span>
                <span id="helpText">These are the matching rules for this page.</span>
                <button id="saveOptions" disabled="true">No Changes</button>
                <button id="exclusionAddButton">Add Rule</button>
                <br/>
                <span> <a id="optionsLink" target="_blank">Vimium Options</a>.</span>
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </body>
</html>