extension/options.html

<!DOCTYPE html>
<html>
  <head>
    <script src="app-data.js"></script>
    <script src="app.js"></script>
    <title>There's a web app for that</title>
    <style>
      body {
        font-family: Helvetica, sans-serif;
        font-size: 13px;
        margin: 0;
      }

      h1 {
        margin-top: 0;
        background: #eee;
        padding: 12px;
        border-bottom: solid 1px #ccc;
      }

      .hidden {
        display: none;
      }

      .container {
        margin: 8px;
      }

      #loading-indicator {
        display: none;
      }

      .loading #loading-indicator {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -15px;
        margin-left: -60px;
        width: 120px;
        height: 30px;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        background: #000;
        color: #fff;
        opacity: 0.5;
        border-radius: 10px;
        padding: 10px;
      }

      .app-container {
        overflow: hidden;
      }

      .app-container h2 {
        border-bottom: solid 1px #ccc;
        margin-top: 0;
        padding: 4px 12px;
      }

      .app {
        text-align: center;
      }

      .app .not-interested {
        display: none;
      }

      .app:hover .not-interested {
        display: block;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 0;
        vertical-align: sub;
        height: 0;
        line-height: 0;
        text-indent: -3px;
        background: #ccc;
        padding: 9px;
        border-radius: 20px;
        color: #fff;
      }

      app:hover .not-interested:hover {
        background: #aaa;
      }

      #installed-apps .not-interested {
        display: none !important;
      }

      .app a {
        display: block;
        text-decoration: none;
        padding: 10px;
        border-radius: 10px;
        float: left;
        width: 160px;
        height: 160px;
        color: #333;
        position: relative;
      }

      .app a:hover {
        background: #eee;
      }

      .app .title {
        padding-top: 2px;
        font-weight: bold;
      }

      .app .visits {
        color: #999;
        font-size: 90%;
      }
    </style>
  </head>
  <body class="loading">
    <h1>There's a web app for that</h1>
    <div id="loading-indicator">Loading...</div>

    <div id="suggested-apps" class="hidden app-container">
      <h2>Suggested apps</h2>
      <div class="app-list container"></div>
    </div>

    <div id="installed-apps" class="hidden app-container">
      <h2>Installed apps</h2>
      <div class="app-list container"></div>
    </div>

    <div id="ignored-apps" class="hidden app-container">
      <h2>Ignored apps</h2>
      <div class="app-list container"></div>
    </div>

    <script>
      var appCellsByAppId = {};
      function displayApp(app, historyItem) {
        document.body.classList.remove('loading');
        if (app.appId in appCellsByAppId) {
          var appCell = appCellsByAppId[app.appId];
          appCell.visitCount++;
          appCell.visitCountNode.textContent = appCell.visitCount + ' visits';
          return;
        }

        var appCell = appCellsByAppId[app.appId] = {
          node: document.createElement('div'),
          visitCount: 1,
          visitCountNode: document.createElement('div')
        };

        appCell.node.classList.add('app');

        var appLinkNode = document.createElement('a');
        appLinkNode.href = app.getStoreUrl();
        appLinkNode.target = '_blank';
        appCell.node.appendChild(appLinkNode);

        var appIconNode = document.createElement('img');
        appIconNode.width = 128;
        appIconNode.height = 128;
        appIconNode.src = app.iconUrl;
        appLinkNode.appendChild(appIconNode);

        var appTitleNode = document.createElement('div');
        appTitleNode.classList.add('title');
        appTitleNode.textContent = app.title;
        appLinkNode.appendChild(appTitleNode);

        appCell.visitCountNode.classList.add('visits');
        appCell.visitCountNode.textContent = '1 visit';
        appLinkNode.appendChild(appCell.visitCountNode);

        var notInterestedNode = document.createElement('div');
        notInterestedNode.classList.add('not-interested');
        notInterestedNode.textContent = 'x';
        appLinkNode.appendChild(notInterestedNode);
        notInterestedNode.addEventListener(
            'click',
            function(event) {
              event.stopPropagation();
              event.preventDefault();

              appCell.node.parentNode.removeChild(appCell.node);
              if (app.isIgnored()) {
                app.setIsIgnored(true);
                addToContainer('suggested-apps');
              } else {
                app.setIsIgnored(true);
                addToContainer('ignored-apps');
              }
            },
            false);

        var containerId = 'suggested-apps';
        if (app.appId in installedAppIds) {
          containerId = 'installed-apps';
        } else if (app.isIgnored()) {
          containerId = 'ignored-apps';
        }
        addToContainer(containerId);

        function addToContainer(containerId) {
          var containerNode = document.getElementById(containerId);
          containerNode.querySelector('.app-list').appendChild(appCell.node);
          containerNode.classList.remove('hidden');
        }
      }

      function processHistoryItems(startIndex, historyItems) {
        var endIndex = startIndex + 1000;
        var isLastChunk = false;
        if (endIndex > historyItems.length) {
          isLastChunk = true;
          endIndex = historyItems.length;
        }
        for (var i = startIndex; i < endIndex; i++) {
          var historyItem = historyItems[i];
          var app = App.fromUrl(historyItem.url);
          if (app) displayApp(app, historyItem)
        }

        if (!isLastChunk)
          setTimeout(processHistoryItems.bind(this, endIndex, historyItems), 0);
      }

      var installedAppIds = {};
      chrome.management.getAll(function(extensionInfos) {
        extensionInfos.forEach(function(extensionInfo) {
          installedAppIds[extensionInfo.id] = 1;
        });

        // TOOD(mihaip): re-visit chrome.history.search parameters
        chrome.history.search({
            'text': '',
            'maxResults': 1000000000,
            'startTime': 0
            },
            processHistoryItems.bind(this, 0));
      });

    </script>
  </head>
</html>