Skip to content

Commit 82f0a78

Browse files
scottjehlscottjehl
authored
Merge pull request #1560 from WPO-Foundation/design-cleanups
Design cleanups issues.
2 parents 8e3067a + d818037 commit 82f0a78

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+3604
-2341
lines changed

‎www/about.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,15 @@
1414
<meta name="keywords" content="Performance, Optimization, Pagetest, Page Design, performance site web, internet performance, website performance, web applications testing, web application performance, Internet Tools, Web Development, Open Source, http viewer, debugger, http sniffer, ssl, monitor, http header, http header viewer">
1515
<meta name="description" content="Speed up the performance of your web pages with an automated analysis">
1616
<meta name="author" content="Patrick Meenan">
17-
<style type="text/css">
18-
#logo {float:right;}
19-
</style>
17+
2018
<?php $gaTemplate = 'About'; include ('head.inc'); ?>
2119
</head>
2220
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
2321
<?php
2422
$tab = 'About';
2523
include 'header.inc';
2624
?>
25+
<div class="about">
2726
<h1>About WebPageTest</h1>
2827
<div class="box">
2928
<p>Building high quality web experiences for users is at the core of all our efforts. With WebPageTest,
@@ -52,6 +51,7 @@
5251
<a href="mailto:info@webpagetest.org">contact us</a>. If you are considering sending advertising opportunities,
5352
SEO/SEM solicitations, link sharing, etc....don't. We won't respond and will mark it as spam.</p>
5453
</div>
54+
</div>
5555
<?php include('footer.inc'); ?>
5656
</div>
5757
</body>

‎www/breakdown.php‎

Lines changed: 2 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -29,63 +29,6 @@
2929
<head>
3030
<title>WebPageTest Content Breakdown<?php echo $testLabel; ?></title>
3131
<?php $gaTemplate = 'Content Breakdown'; include ('head.inc'); ?>
32-
<style type="text/css">
33-
div.tableRequests table {
34-
max-width: 300px;
35-
vertical-align:top;
36-
}
37-
38-
div.tableBytes table {
39-
max-width: 300px;
40-
vertical-align:top;
41-
}
42-
43-
div.tableRequests td {
44-
max-width: 250px;
45-
text-align: left;
46-
}
47-
48-
div.tableBytes td {
49-
max-width: 250px;
50-
text-align: left;
51-
}
52-
53-
td {
54-
text-align:center;
55-
vertical-align:middle;
56-
padding:1em;
57-
}
58-
59-
div.bar {
60-
height:20px;
61-
margin-top:auto;
62-
margin-bottom:auto;
63-
}
64-
65-
table.legend td {
66-
white-space:nowrap;
67-
text-align:left;
68-
vertical-align:top;
69-
padding:0;
70-
}
71-
72-
h1 {
73-
text-align: center;
74-
font-size: 2.5em;
75-
}
76-
77-
h3 {
78-
text-align: center;
79-
}
80-
81-
.breakdownFramePies td {
82-
padding: 0;
83-
}
84-
85-
<?php
86-
include __DIR__ . "/css/accordion.css";
87-
?>
88-
</style>
8932
</head>
9033
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
9134
<?php
@@ -114,7 +57,7 @@
11457
echo "</table>\n<br>\n";
11558
}
11659
?>
117-
<h1>Content breakdown by MIME type (First View)</h1>
60+
<h2>Content breakdown by MIME type (First View)</h2>
11861
<?php
11962
if ($isMultistep) {
12063
$accordionHelper = new AccordionHtmlHelper($firstViewResults);
@@ -128,7 +71,7 @@
12871
?>
12972
<?php if ($repeatViewResults) { ?>
13073
<br><hr><br>
131-
<h1>Content breakdown by MIME type (Repeat View)</h1>
74+
<h2>Content breakdown by MIME type (Repeat View)</h2>
13275
<?php
13376
if ($isMultistep) {
13477
$accordionHelper = new AccordionHtmlHelper($repeatViewResults);

‎www/breakdownTimeline.php‎

Lines changed: 35 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -17,44 +17,7 @@
1717
<head>
1818
<title>WebPageTest Content Breakdown<?php echo $testLabel; ?></title>
1919
<?php $gaTemplate = 'Content Breakdown'; include ('head.inc'); ?>
20-
<style type="text/css">
21-
div.table table {
22-
max-width: 300px;
23-
vertical-align:top;
24-
}
25-
26-
div.table td {
27-
max-width: 250px;
28-
}
29-
30-
td {
31-
text-align:left;
32-
vertical-align:top;
33-
padding:1em;
34-
}
35-
36-
div.bar {
37-
height:20px;
38-
margin-top:auto;
39-
margin-bottom:auto;
40-
}
41-
42-
div.table {
43-
margin-left: auto;
44-
margin-right: auto;
45-
}
46-
47-
td.legend {
48-
white-space:nowrap;
49-
text-align:left;
50-
vertical-align:top;
51-
padding:0;
52-
}
53-
54-
th.header {
55-
font-weight: normal;
56-
}
57-
</style>
20+
5821
</head>
5922
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
6023
<?php
@@ -131,56 +94,42 @@
13194
}
13295
?>
13396

134-
<table align="center">
135-
<tr>
136-
<th class="header" colspan="2">
137-
<h2>Main-thread processing breakdown</h2>
138-
Where the browser's main thread was busy, not including idle time waiting for resources <?php
97+
<h2>Main-thread processing breakdown</h2>
98+
<p>Where the browser's main thread was busy, not including idle time waiting for resources <?php
13999
echo " (<a href=\"/timeline/" . VER_TIMELINE . "timeline.php?test=$id&run=$run&cached=$cached\" title=\"View Chrome Dev Tools Timeline\">view timeline</a>)";
140-
?>.
141-
</th>
142-
</tr>
143-
<tr>
144-
<td>
145-
<div id="pieGroups" style="width:450px; height:300px;"></div>
146-
</td>
147-
<td>
148-
<div id="pieEvents" style="width:450px; height:300px;"></div>
149-
</td>
150-
</tr>
151-
<tr>
152-
<td>
153-
<div class="table" id="tableGroups" style="width: 200px;"></div>
154-
</td>
155-
<td>
156-
<div class="table" id="tableEvents" style="width: 400px;"></div>
157-
</td>
158-
</tr>
159-
<tr>
160-
<th class="header" colspan="2">
161-
<h2>Main-thread time breakdown</h2>
162-
All of the main-thread activity including idle (waiting for resources usually) <?php
100+
?>.</p>
101+
102+
<div class="breakdownFrame">
103+
<div class="breakdownFrame_item">
104+
<div id="pieGroups" ></div>
105+
<div class="table visualization_table" id="tableGroups" ></div>
106+
</div>
107+
<div class="breakdownFrame_item">
108+
<div id="pieEvents" ></div>
109+
<div class="table visualization_table" id="tableEvents"></div>
110+
</div>
111+
</div>
112+
113+
<h2>Main-thread time breakdown</h2>
114+
<p>All of the main-thread activity including idle (waiting for resources usually) <?php
163115
echo " (<a href=\"/timeline/" . VER_TIMELINE . "timeline.php?test=$id&run=$run&cached=$cached\" title=\"View Chrome Dev Tools Timeline\">view timeline</a>)";
164-
?>.
165-
</th>
166-
</tr>
167-
<tr>
168-
<td>
169-
<div id="pieGroupsIdle" style="width:450px; height:300px;"></div>
170-
</td>
171-
<td>
172-
<div id="pieEventsIdle" style="width:450px; height:300px;"></div>
173-
</td>
174-
</tr>
175-
<tr>
176-
<td>
177-
<div class="table" id="tableGroupsIdle" style="width: 200px;"></div>
178-
</td>
179-
<td>
180-
<div class="table" id="tableEventsIdle" style="width: 400px;"></div>
181-
</td>
182-
</tr>
183-
</table>
116+
?>.</p>
117+
118+
119+
<div class="breakdownFrame">
120+
<div class="breakdownFrame_item">
121+
<div id="pieGroupsIdle" ></div>
122+
<div class="table visualization_table" id="tableGroupsIdle"></div>
123+
</div>
124+
<div class="breakdownFrame_item">
125+
<div id="pieEventsIdle"></div>
126+
<div class="table visualization_table" id="tableEventsIdle"></div>
127+
</div>
128+
</div>
129+
130+
131+
132+
184133
</div>
185134
<?php include('footer.inc'); ?>
186135

‎www/common.inc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ if (!$privateInstall) {
149149

150150
// constants
151151
define('VER_WEBPAGETEST', '21.07'); // webpagetest version
152-
define('VER_CSS', 150); // version of the sitewide css file
152+
define('VER_CSS', 153.1); // version of the sitewide css file
153153
define('VER_JS', 40); // version of the sitewide javascript file
154154
define('VER_JS_TEST', 47); // version of the javascript specific to the test pages
155155
define('VER_JS_RUNNING', 1); // version of the javascript specific to the test running status page

‎www/css/accordion.css‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎www/customWaterfall.php‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,26 +24,17 @@
2424
<head>
2525
<title>WebPageTest Custom Waterfall<?php echo $testLabel; ?></title>
2626
<?php $gaTemplate = 'Custom Waterfall'; include ('head.inc'); ?>
27-
<style>
28-
div.bar {
29-
height:20px;
30-
margin-top:auto;
31-
margin-bottom:auto;
32-
}
33-
34-
<?php include "waterfall.css";?>
35-
</style>
3627
</head>
37-
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
28+
<body id="custom-waterfall" <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
3829
<?php
3930
$tab = null;
4031
include 'header.inc';
4132
?>
4233
<div class="customwaterfall_hed">
4334
<h1>Generate a Custom Waterfall</h1>
44-
<details open class="box customwaterfall_settings">
45-
<summary id="customwaterfall_settings_title" class="customwaterfall_settings_hed"><span><i class="icon_plus"></i> <span>Waterfall Settings</span></span></summary>
46-
<form aria-labelledby="customwaterfall_settings_title" name="urlEntry" action="javascript:UpdateWaterfall();" method="GET">
35+
<details open class="box details_panel">
36+
<summary class="details_panel_hed"><span><i class="icon_plus"></i> <span>Waterfall Settings</span></span></summary>
37+
<form class="details_panel_content" name="urlEntry" action="javascript:UpdateWaterfall();" method="GET">
4738
<fieldset>
4839
<legend>Chart Type</legend>
4940
<label><input type="radio" name="type" value="waterfall" checked>Waterfall</label>
@@ -84,7 +75,7 @@
8475
$extension = 'php';
8576
if( FRIENDLY_URLS )
8677
$extension = 'png';
87-
echo "<img id=\"waterfallImage\" style=\"display: block; margin-left: auto; margin-right: auto;\" alt=\"Waterfall\" src=\"/waterfall.$extension?test=$id&run=$run&cached=$cached&step=$step&cpu=1&bw=1&ut=1&mime=1&js=1&wait=1\">";
78+
echo "<div class=\"waterfall-container\"><img id=\"waterfallImage\" style=\"display: block; margin-left: auto; margin-right: auto;\" alt=\"Waterfall\" src=\"/waterfall.$extension?test=$id&run=$run&cached=$cached&step=$step&cpu=1&bw=1&ut=1&mime=1&js=1&wait=1\"></div>";
8879
echo "<p class=\"customwaterfall_download\"><a class=\"pill\" download href=\"/waterfall.$extension?test=$id&run=$run&cached=$cached&step=$step&cpu=1&bw=1&ut=1&mime=1&js=1&wait=1\">Download Waterfall Image</a></p>";
8980

9081
?>
@@ -108,7 +99,9 @@
10899
});
109100

110101
$("input[name=coloring], input[type=checkbox]").click( UpdateWaterfall );
111-
$("input[type=text]").on( "input", UpdateWaterfall );
102+
$("input[type=text]:not(#requests)").on( "input", UpdateWaterfall );
103+
$("input#requests").on( "change", UpdateWaterfall );
104+
112105

113106
// reset the wait cursor when the image loads
114107
$('#waterfallImage').load(function(){

‎www/custom_browsers.php‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,6 @@
7777
<meta name="description" content="Speed up the performance of your web pages with an automated analysis">
7878
<meta name="author" content="Patrick Meenan">
7979
<?php include ('head.inc'); ?>
80-
<style type="text/css">
81-
.browsers td {
82-
text-align: left !important;
83-
padding-right: 20px !important;
84-
}
85-
.browsers {
86-
margin-left: 0 !important;
87-
}
88-
</style>
8980
</head>
9081
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
9182
<div class="page">

0 commit comments

Comments
 (0)