zoom/popup.html

<!doctype html>
<html>
  <head>
    <title>Tab Zoom Extension</title>
    <style>
      body {
        width: 150px;
        overflow-x: hidden;
        color: #ffff00;
        background-color: #186464;
      }

      img {
        margin: 5px;
        border: 2px solid black;
        vertical-align: middle;
        width: 19px;
        height: 19px;
      }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <div style="text-align: center">
      <table style="margin: 0px auto">
        <tr>
          <td><button type="button" id="decreaseButton">-</button></td>
          <td><div style="width: 50px; border-style: solid; border-width: 1px"
                   id="displayDiv">100%</div></td>
          <td><button type="button" id="increaseButton">+</button></td>
        </td>
      </table>
      <button type="button" id="defaultButton">Reset to Default</button>
      <div id="defaultLabel"></div>
    </div>
    <p>
    <div style="border-width: 2px; border-style: solid; border-color: #7f0000; padding: 2px">
      <form style="border-width: 2px; border-style: solid; border-color: #7f0000">
        <b>Mode:</b><br>
        <input type="radio" name="modeRadio" value="automatic">automatic<br>
        <input type="radio" name="modeRadio" value="manual">manual<br>
        <input type="radio" name="modeRadio" value="disabled">disabled
      </form><br>
      <form style="border-width: 2px; border-style: solid; border-color: #7f0000">
        <b>Scope:</b><br>
        <input type="radio" name="scopeRadio" value="per-origin">per-origin<br>
        <input type="radio" name="scopeRadio" value="per-tab">per-tab
      </form>
      <button type="button" id="setModeButton">Set Zoom Settings</button>
    </div>
    <p>
    <button type="button" id="closeButton">Close</button>
  </body>
</html>