Skip to content

Commit

Permalink
Merge pull request #1560 from WPO-Foundation/design-cleanups
Browse files Browse the repository at this point in the history 
Design cleanups issues.
  • Loading branch information
@scottjehl
scottjehl committed Oct 12, 2021
2 parents 8e3067a + d818037 commit 82f0a78
Show file tree
Hide file tree
Showing 63 changed files with 3,604 additions and 2,341 deletions.
6 changes: 3 additions & 3 deletions www/about.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,15 @@
<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">
<meta name="description" content="Speed up the performance of your web pages with an automated analysis">
<meta name="author" content="Patrick Meenan">
<style type="text/css">
#logo {float:right;}
</style>

<?php $gaTemplate = 'About'; include ('head.inc'); ?>
</head>
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
<?php
$tab = 'About';
include 'header.inc';
?>
<div class="about">
<h1>About WebPageTest</h1>
<div class="box">
<p>Building high quality web experiences for users is at the core of all our efforts. With WebPageTest,
Expand Down Expand Up @@ -52,6 +51,7 @@
<a href="mailto:info@webpagetest.org">contact us</a>. If you are considering sending advertising opportunities,
SEO/SEM solicitations, link sharing, etc....don't. We won't respond and will mark it as spam.</p>
</div>
</div>
<?php include('footer.inc'); ?>
</div>
</body>
Expand Down
61 changes: 2 additions & 59 deletions www/breakdown.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,63 +29,6 @@
<head>
<title>WebPageTest Content Breakdown<?php echo $testLabel; ?></title>
<?php $gaTemplate = 'Content Breakdown'; include ('head.inc'); ?>
<style type="text/css">
div.tableRequests table {
max-width: 300px;
vertical-align:top;
}

div.tableBytes table {
max-width: 300px;
vertical-align:top;
}

div.tableRequests td {
max-width: 250px;
text-align: left;
}

div.tableBytes td {
max-width: 250px;
text-align: left;
}

td {
text-align:center;
vertical-align:middle;
padding:1em;
}

div.bar {
height:20px;
margin-top:auto;
margin-bottom:auto;
}

table.legend td {
white-space:nowrap;
text-align:left;
vertical-align:top;
padding:0;
}

h1 {
text-align: center;
font-size: 2.5em;
}

h3 {
text-align: center;
}

.breakdownFramePies td {
padding: 0;
}

<?php
include __DIR__ . "/css/accordion.css";
?>
</style>
</head>
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
<?php
Expand Down Expand Up @@ -114,7 +57,7 @@
echo "</table>\n<br>\n";
}
?>
<h1>Content breakdown by MIME type (First View)</h1>
<h2>Content breakdown by MIME type (First View)</h2>
<?php
if ($isMultistep) {
$accordionHelper = new AccordionHtmlHelper($firstViewResults);
Expand All @@ -128,7 +71,7 @@
?>
<?php if ($repeatViewResults) { ?>
<br><hr><br>
<h1>Content breakdown by MIME type (Repeat View)</h1>
<h2>Content breakdown by MIME type (Repeat View)</h2>
<?php
if ($isMultistep) {
$accordionHelper = new AccordionHtmlHelper($repeatViewResults);
Expand Down
121 changes: 35 additions & 86 deletions www/breakdownTimeline.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,44 +17,7 @@
<head>
<title>WebPageTest Content Breakdown<?php echo $testLabel; ?></title>
<?php $gaTemplate = 'Content Breakdown'; include ('head.inc'); ?>
<style type="text/css">
div.table table {
max-width: 300px;
vertical-align:top;
}

div.table td {
max-width: 250px;
}

td {
text-align:left;
vertical-align:top;
padding:1em;
}

div.bar {
height:20px;
margin-top:auto;
margin-bottom:auto;
}

div.table {
margin-left: auto;
margin-right: auto;
}

td.legend {
white-space:nowrap;
text-align:left;
vertical-align:top;
padding:0;
}

th.header {
font-weight: normal;
}
</style>

</head>
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
<?php
Expand Down Expand Up @@ -131,56 +94,42 @@
}
?>

<table align="center">
<tr>
<th class="header" colspan="2">
<h2>Main-thread processing breakdown</h2>
Where the browser's main thread was busy, not including idle time waiting for resources <?php
<h2>Main-thread processing breakdown</h2>
<p>Where the browser's main thread was busy, not including idle time waiting for resources <?php
echo " (<a href=\"/timeline/" . VER_TIMELINE . "timeline.php?test=$id&run=$run&cached=$cached\" title=\"View Chrome Dev Tools Timeline\">view timeline</a>)";
?>.
</th>
</tr>
<tr>
<td>
<div id="pieGroups" style="width:450px; height:300px;"></div>
</td>
<td>
<div id="pieEvents" style="width:450px; height:300px;"></div>
</td>
</tr>
<tr>
<td>
<div class="table" id="tableGroups" style="width: 200px;"></div>
</td>
<td>
<div class="table" id="tableEvents" style="width: 400px;"></div>
</td>
</tr>
<tr>
<th class="header" colspan="2">
<h2>Main-thread time breakdown</h2>
All of the main-thread activity including idle (waiting for resources usually) <?php
?>.</p>

<div class="breakdownFrame">
<div class="breakdownFrame_item">
<div id="pieGroups" ></div>
<div class="table visualization_table" id="tableGroups" ></div>
</div>
<div class="breakdownFrame_item">
<div id="pieEvents" ></div>
<div class="table visualization_table" id="tableEvents"></div>
</div>
</div>

<h2>Main-thread time breakdown</h2>
<p>All of the main-thread activity including idle (waiting for resources usually) <?php
echo " (<a href=\"/timeline/" . VER_TIMELINE . "timeline.php?test=$id&run=$run&cached=$cached\" title=\"View Chrome Dev Tools Timeline\">view timeline</a>)";
?>.
</th>
</tr>
<tr>
<td>
<div id="pieGroupsIdle" style="width:450px; height:300px;"></div>
</td>
<td>
<div id="pieEventsIdle" style="width:450px; height:300px;"></div>
</td>
</tr>
<tr>
<td>
<div class="table" id="tableGroupsIdle" style="width: 200px;"></div>
</td>
<td>
<div class="table" id="tableEventsIdle" style="width: 400px;"></div>
</td>
</tr>
</table>
?>.</p>


<div class="breakdownFrame">
<div class="breakdownFrame_item">
<div id="pieGroupsIdle" ></div>
<div class="table visualization_table" id="tableGroupsIdle"></div>
</div>
<div class="breakdownFrame_item">
<div id="pieEventsIdle"></div>
<div class="table visualization_table" id="tableEventsIdle"></div>
</div>
</div>




</div>
<?php include('footer.inc'); ?>

Expand Down
2 changes: 1 addition & 1 deletion www/common.inc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ if (!$privateInstall) {

// constants
define('VER_WEBPAGETEST', '21.07'); // webpagetest version
define('VER_CSS', 150); // version of the sitewide css file
define('VER_CSS', 153.1); // version of the sitewide css file
define('VER_JS', 40); // version of the sitewide javascript file
define('VER_JS_TEST', 47); // version of the javascript specific to the test pages
define('VER_JS_RUNNING', 1); // version of the javascript specific to the test running status page
Expand Down
62 changes: 0 additions & 62 deletions www/css/accordion.css
View file

This file was deleted.

23 changes: 8 additions & 15 deletions www/customWaterfall.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,26 +24,17 @@
<head>
<title>WebPageTest Custom Waterfall<?php echo $testLabel; ?></title>
<?php $gaTemplate = 'Custom Waterfall'; include ('head.inc'); ?>
<style>
div.bar {
height:20px;
margin-top:auto;
margin-bottom:auto;
}

<?php include "waterfall.css";?>
</style>
</head>
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
<body id="custom-waterfall" <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
<?php
$tab = null;
include 'header.inc';
?>
<div class="customwaterfall_hed">
<h1>Generate a Custom Waterfall</h1>
<details open class="box customwaterfall_settings">
<summary id="customwaterfall_settings_title" class="customwaterfall_settings_hed"><span><i class="icon_plus"></i> <span>Waterfall Settings</span></span></summary>
<form aria-labelledby="customwaterfall_settings_title" name="urlEntry" action="javascript:UpdateWaterfall();" method="GET">
<details open class="box details_panel">
<summary class="details_panel_hed"><span><i class="icon_plus"></i> <span>Waterfall Settings</span></span></summary>
<form class="details_panel_content" name="urlEntry" action="javascript:UpdateWaterfall();" method="GET">
<fieldset>
<legend>Chart Type</legend>
<label><input type="radio" name="type" value="waterfall" checked>Waterfall</label>
Expand Down Expand Up @@ -84,7 +75,7 @@
$extension = 'php';
if( FRIENDLY_URLS )
$extension = 'png';
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\">";
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>";
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>";

?>
Expand All @@ -108,7 +99,9 @@
});

$("input[name=coloring], input[type=checkbox]").click( UpdateWaterfall );
$("input[type=text]").on( "input", UpdateWaterfall );
$("input[type=text]:not(#requests)").on( "input", UpdateWaterfall );
$("input#requests").on( "change", UpdateWaterfall );


// reset the wait cursor when the image loads
$('#waterfallImage').load(function(){
Expand Down
9 changes: 0 additions & 9 deletions www/custom_browsers.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,15 +77,6 @@
<meta name="description" content="Speed up the performance of your web pages with an automated analysis">
<meta name="author" content="Patrick Meenan">
<?php include ('head.inc'); ?>
<style type="text/css">
.browsers td {
text-align: left !important;
padding-right: 20px !important;
}
.browsers {
margin-left: 0 !important;
}
</style>
</head>
<body <?php if ($COMPACT_MODE) {echo 'class="compact"';} ?>>
<div class="page">
Expand Down

0 comments on commit 82f0a78

Please sign in to comment.