Speedometer/index.html at main · WebKit/Speedometer · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html data-visible-section="home">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=850" />
        <title>Speedometer Next</title>
        <link rel="stylesheet" href="resources/main.css" />
        <link rel="icon" href="resources/favicon.png" />
        <script src="resources/main.mjs" type="module"></script>
    </head>
    <body>
        <main>
            <section id="home">
                <a href="#home" class="logo">
                    <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" />
                    <div class="version next">next</div>
                </a>
                <div class="section-grid">
                    <div class="section-content content">
                        <p class="top-row">Speedometer is a browser benchmark that measures the responsiveness of Web applications. It uses demo web applications to simulate user actions such as adding to-do items.</p>
                        <p id="screen-size-warning">
                            <strong>
                                Your browser window is too small. For most accurate results, please make the view port size at least <span id="min-screen-width">850px</span> by <span id="min-screen-height">650px</span>.<br />
                                It's currently <span id="screen-size"></span>.
                            </strong>
                        </p>
                    </div>
                    <div class="buttons">
                        <div class="button-row">
                            <button class="start-tests-button primary-button">Start Test</button>
                        </div>
                    </div>
                    <div class="buttons section-footer fixed-footer">
                        <div class="button-row">
                            <a class="button" href="about.html">About Speedometer</a>
                            <a class="button" href="instructions.html">Test Instructions</a>
                        </div>
                    </div>
                </div>
            </section>

            <section id="running">
                <a href="#home" class="logo">
                    <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" />
                    <div class="version next">next</div>
                </a>
                <div id="testContainer"></div>
                <div id="progress">
                    <progress aria-label="Progress" id="progress-completed"></progress>
                </div>
                <div id="info">
                    <div id="info-label"></div>
                    <div id="info-progress"></div>
                </div>
            </section>

            <section id="summary" data-title="Results Summary" class="valid">
                <a href="#home" class="logo">
                    <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" />
                    <div class="version next">next</div>
                </a>
                <h1>Score</h1>
                <div class="gauge">
                    <div class="window"><div class="needle"></div></div>
                </div>
                <hr />
                <div id="result-number"></div>
                <div id="confidence-number"></div>
                <div id="invalid-score-text">
                    One or more subtests produced no duration.<br />
                    Please check your <a href="./instructions.html" target="_blank">browser settings</a> and re-run the benchmark.<br />
                </div>
                <div class="buttons">
                    <div class="button-row">
                        <a class="button primary-button" href="#details" id="show-details" title="Show detailed results data.">Details</a>
                    </div>
                </div>
            </section>

            <section id="details" data-title="Results Details">
                <a href="#home" class="logo">
                    <img srcset="resources/logo@2x.png 2x" src="resources/logo.png" alt="Speedometer" />
                    <div class="version next">next</div>
                </a>
                <div class="section-grid">
                    <h1 class="section-header">Detailed Results</h1>
                    <div class="section-content all-metric-results">
                        <div class="non-standard-params">
                            <h2>Non-standard Parameters</h2>
                            <p>
                                Speedometer ran with non-standard parameters.<br />
                                The results are likely not comparable to default runs.
                            </p>
                            <table id="non-standard-params-table">
                                <thead>
                                    <tr>
                                        <th>Param</th>
                                        <th>Value</th>
                                        <th>Default</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                        <div class="aggregated-metric-result">
                            <h2>Aggregate Metric</h2>
                            <div id="aggregate-chart"></div>
                            <h2>Test Metrics Overview</h2>
                            <div id="tests-chart"></div>
                        </div>
                        <br />
                        <h2>Test Metrics Details</h2>
                        <div id="metrics-results"></div>
                    </div>
                    <div class="buttons section-footer">
                        <div class="button-row">
                            <a class="button" href="#summary" title="Go back to the simplified summary view.">Summary</a>
                        </div>
                        <div class="button-row export-buttons">
                            <button id="copy-full-json" title="Copy full result metrics as json string.">Copy JSON</button>
                            <a class="button" id="download-full-json" title="Download full result metrics as json string.">Download JSON</a>
                            <a class="button" id="download-classic-json" title="Download backwards-compatible result metrics as json string.">Download Classic JSON</a>
                            <a class="button" id="download-csv" title="Download all result metrics as CSV string.">Download CSV</a>
                            <button id="copy-csv" title="Copy all result metrics as CSV string.">Copy CSV</button>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </body>
</html>