• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3 * Copyright (c) 2011 The Chromium Authors. All rights reserved.  Use of this
4 * source code is governed by a BSD-style license that can be found in the
5 * LICENSE file.
6-->
7<html>
8  <head>
9    <title>WebNavigation Tech Demo Popup</title>
10    <style>
11      body {
12        margin: 5px 10px 10px;
13      }
14
15      h1 {
16        color: #53637D;
17        font: 26px/1.2 Helvetica, sans-serif;
18        font-size: 200%;
19        margin: 0;
20        padding-bottom: 4px;
21        text-shadow: white 0 1px 2px;
22      }
23
24      body > section {
25        border-radius: 5px;
26        background: -webkit-linear-gradient(rgba(234, 238, 243, 0.2), #EAEEF3),
27                    -webkit-linear-gradient(
28                        left, #EAEEF3, #EAEEF3 97%, #D3D7DB);
29        font: 14px/1 Arial,Sans Serif;
30        padding: 10px;
31        width:  563px;
32        max-height: 400px;
33        overflow-y: auto;
34        box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5);
35      }
36
37      body > section > ol {
38        padding: 0;
39        margin: 0;
40        list-style: none inside;
41      }
42
43      body > section > ol > li {
44        position: relative;
45        margin: 0.5em 0 0.5em 40px;
46      }
47
48      code {
49        word-wrap: break-word;
50        background: rgba(255,255,0, 0.5);
51      }
52
53      em {
54        position: absolute;
55        top: 0px;
56        left: -40px;
57        width: 30px;
58        text-align: right;
59        font: 30px/1 Helvetica, sans-serif;
60        font-weight: 700;
61      }
62
63      p {
64        min-height: 30px;
65        line-height: 1.2;
66      }
67  </style>
68  </head>
69  <body>
70    <h1>Most Requested URLs</h1>
71    <section></section>
72    <script>
73        chrome.extension.sendRequest(
74            {'type': 'getMostRequestedUrls'},
75            function generateList(response) {
76              var section = document.querySelector('body>section');
77              var results = response.result;
78              var ol = document.createElement('ol');
79              var li, p, em, code, text;
80              var i;
81              for (i = 0; i < results.length; i++ ) {
82                li = document.createElement('li');
83                p = document.createElement('p');
84                em = document.createElement('em');
85                em.textContent = i + 1;
86                code = document.createElement('code');
87                code.textContent = results[i].url;
88                text = document.createTextNode(
89                    chrome.i18n.getMessage('navigationDescription',
90                                           [results[i].numRequests,
91                                            results[i].average]));
92                p.appendChild(em);
93                p.appendChild(code);
94                p.appendChild(text);
95                li.appendChild(p);
96                ol.appendChild(li);
97              }
98              section.innerHTML = '';
99              section.appendChild(ol);
100            });
101    </script>
102  </body>
103</html>
104