Misc polish on about:net-internals.

- Focus the user comments field after warning that it is empty.
- Focus the user comments field when switching to #export
- Focus the filter box when switching to #events
- Remove some clutter and tweak some styles

BUG=234386

Review URL: https://codereview.chromium.org/14492002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@196506 0039d316-1c4b-4281-b951-d872f2087c98

23 files changed, 106 insertions, 133 deletions

diff --git a/chrome/browser/resources/net_internals/bandwidth_view.html b/chrome/browser/resources/net_internals/bandwidth_view.html
index 426602b..5d1ed1a 100644
--- a/chrome/browser/resources/net_internals/bandwidth_view.html
+++ b/chrome/browser/resources/net_internals/bandwidth_view.html
@@ -1,5 +1,4 @@
 <!-- Bandwidth info -->
 <div id=bandwidth-view-tab-content class=content-box>
-  <h4> Bandwidth Usage</h4>
   <div id=bandwidth-usage-table></div>
 </div>
diff --git a/chrome/browser/resources/net_internals/capture_view.html b/chrome/browser/resources/net_internals/capture_view.html
index d8cc2c9..63eea5d 100644
--- a/chrome/browser/resources/net_internals/capture_view.html
+++ b/chrome/browser/resources/net_internals/capture_view.html
@@ -1,35 +1,26 @@
 <div id=capture-view-tab-content class=content-box>
-  <h2>Capture options</h2>
-
-  <p>
-  <input id=capture-view-limit-checkbox type=checkbox>
-  <label for='capture-view-limit-checkbox'>
-    Discard old data under memory pressure.
-    <i>(If you capture all events for a long time, it is possible to exhaust memory and crash. Throwing out older data avoids this problem.)</i>
-  </label>
-  </p>
-
-  <p>
-  <input id=capture-view-byte-logging-checkbox type=checkbox>
-  <label for='capture-view-byte-logging-checkbox'>
-    Include the actual bytes sent/received.
-    <i>(This will result in huge log files, and can expose sensitive data)</i>
-  </label>
-  </p>
-
-  <ul>
-    <li>
-    <b>TIP</b>: <a href="#" id=capture-view-tip-anchor>logging from the command line</a>.
-
-    <div style="display:none; margin-top: 10px" id=capture-view-tip-div>
-      Another way to capture network events is by using the command line flag:
-      <blockquote>
-        --log-net-log=<i>FILENAME</i> [ --net-log-level=<i>NUMBER</i> ]
-      </blockquote>
-      This will stream the network events directly to a file of your choosing. If you additionally want it to log the network bytes, then pass --net-log-level=0.
+  <div>
+    <input id=capture-view-limit-checkbox type=checkbox>
+    <label for='capture-view-limit-checkbox'>
+      Discard old data under memory pressure.
+    </label>
+    <span id=capture-view-limit-help-hover class=mouse-over-help-hover>(?)</span>
+    <!-- Inline filter help -->
+    <div id=capture-view-limit-help class=mouse-over-help>
+      If you capture all events for a long time, it is possible to exhaust memory
+      and crash. Throwing out older data avoids this problem.
     </div>
+  </div>
 
-    </li>
-  </ul>
+  <div>
+    <input id=capture-view-byte-logging-checkbox type=checkbox>
+    <label for='capture-view-byte-logging-checkbox'>
+      Include the actual bytes sent/received.
+    </label>
+    <span id=capture-view-byte-logging-help-hover class=mouse-over-help-hover>(?)</span>
+    <div id=capture-view-byte-logging-help class=mouse-over-help>
+      This will result in huge log files, and can expose sensitive data.
+    </div>
+  </div>
 
 </div>
diff --git a/chrome/browser/resources/net_internals/capture_view.js b/chrome/browser/resources/net_internals/capture_view.js
index c039c8d..1e6b510 100644
--- a/chrome/browser/resources/net_internals/capture_view.js
+++ b/chrome/browser/resources/net_internals/capture_view.js
@@ -25,9 +25,6 @@ var CaptureView = (function() {
 
     $(CaptureView.LIMIT_CHECKBOX_ID).onclick = this.onChangeLimit_.bind(this);
 
-    $(CaptureView.TIP_ANCHOR_ID).onclick =
-        this.toggleCommandLineTip_.bind(this, CaptureView.TIP_DIV_ID);
-
     if (byteLoggingCheckbox.checked) {
       // The code to display a warning on ExportView relies on bytelogging
       // being off by default. If this ever changes, the code will need to
@@ -35,6 +32,12 @@ var CaptureView = (function() {
       throw 'Not expecting byte logging to be enabled!';
     }
 
+    new MouseOverHelp(CaptureView.LIMIT_HELP_ID,
+                      CaptureView.LIMIT_HELP_HOVER_ID);
+
+    new MouseOverHelp(CaptureView.BYTE_LOGGING_HELP_ID,
+                      CaptureView.BYTE_LOGGING_HELP_HOVER_ID);
+
     this.onChangeLimit_();
   }
 
@@ -46,8 +49,11 @@ var CaptureView = (function() {
   CaptureView.MAIN_BOX_ID = 'capture-view-tab-content';
   CaptureView.BYTE_LOGGING_CHECKBOX_ID = 'capture-view-byte-logging-checkbox';
   CaptureView.LIMIT_CHECKBOX_ID = 'capture-view-limit-checkbox';
-  CaptureView.TIP_ANCHOR_ID = 'capture-view-tip-anchor';
-  CaptureView.TIP_DIV_ID = 'capture-view-tip-div';
+  CaptureView.LIMIT_HELP_ID = 'capture-view-limit-help';
+  CaptureView.LIMIT_HELP_HOVER_ID = 'capture-view-limit-help-hover';
+  CaptureView.BYTE_LOGGING_HELP_ID = 'capture-view-byte-logging-help';
+  CaptureView.BYTE_LOGGING_HELP_HOVER_ID =
+      'capture-view-byte-logging-help-hover';
 
   cr.addSingletonGetter(CaptureView);
 
@@ -56,16 +62,6 @@ var CaptureView = (function() {
     __proto__: superClass.prototype,
 
     /**
-     * Toggles the visilibity on the command-line tip.
-     */
-    toggleCommandLineTip_: function(divId) {
-      var n = $(divId);
-      var isVisible = n.style.display != 'none';
-      setNodeDisplay(n, !isVisible);
-      return false;  // Prevent default handling of the click.
-    },
-
-    /**
      * Called when a log file is loaded, after clearing the old log entries and
      * loading the new ones.  Returns false to indicate the view should
      * be hidden.
diff --git a/chrome/browser/resources/net_internals/chromeos_view.html b/chrome/browser/resources/net_internals/chromeos_view.html
index c3cd1b2f..8d221ed 100644
--- a/chrome/browser/resources/net_internals/chromeos_view.html
+++ b/chrome/browser/resources/net_internals/chromeos_view.html
@@ -1,5 +1,5 @@
 <div id="chromeos-view-tab-content" class=content-box>
-  <h3>Import ONC file</h3>
+  <h4 style='margin-top:0'>Import ONC file</h4>
   <div id="chromeos-view-import-div">
     <input type="file" id="chromeos-view-import-onc">
   </div>
@@ -12,7 +12,7 @@
   <div id="chromeos-view-parse-status" hidden>
   </div>
   <div id="chromeos-view-store-debug-logs-div">
-    <h3>Store Logs</h3>
+    <h4>Store Logs</h4>
     <input type="button"
            id="chromeos-view-store-debug-logs"
            value="Store Debug Logs">
@@ -21,7 +21,7 @@
     </label>
   </div>
   <div id="chromeos-view-network-debugging-div">
-    <h3>Network Debugging</h3>
+    <h4>Network Debugging</h4>
     <dl>
       <dt>Select interface for debugging</dt>
       <dd>
diff --git a/chrome/browser/resources/net_internals/dns_view.html b/chrome/browser/resources/net_internals/dns_view.html
index b8cd550..7010bc4 100644
--- a/chrome/browser/resources/net_internals/dns_view.html
+++ b/chrome/browser/resources/net_internals/dns_view.html
@@ -1,7 +1,6 @@
 <!-- Host resolver info -->
 <div id=dns-view-tab-content class=content-box>
-  <h4>Host resolver</h4>
-  <ul>
+  <ul style='margin-top: 0'>
     <li><a href='#events&q=type:HOST_RESOLVER_IMPL_REQUEST,HOST_RESOLVER_IMPL_JOB%20is:active'>View pending lookups</a></li>
     <li>Default address family: <span id=dns-view-default-family></span>
       <span id=dns-view-ipv6-disabled class=warning-text style="display: none;">
diff --git a/chrome/browser/resources/net_internals/events_view.html b/chrome/browser/resources/net_internals/events_view.html
index 8089ec3..5f2b454 100644
--- a/chrome/browser/resources/net_internals/events_view.html
+++ b/chrome/browser/resources/net_internals/events_view.html
@@ -5,7 +5,7 @@
   <table width=100%>
     <tr>
       <td width=1%>
-        Filter <span id=events-view-filter-help-hover class=mouse-over-help-hover>(?)</span>:
+        <span id=events-view-filter-help-hover class=mouse-over-help-hover>(?)</span>
       </td>
       <td width=98%><input type="search" incremental id=events-view-filter-input></td>
       <td width=1% id=events-view-filter-count>(1 of 34)</td>
diff --git a/chrome/browser/resources/net_internals/events_view.js b/chrome/browser/resources/net_internals/events_view.js
index 78c7361d..5c58ad1 100644
--- a/chrome/browser/resources/net_internals/events_view.js
+++ b/chrome/browser/resources/net_internals/events_view.js
@@ -128,6 +128,9 @@ var EventsView = (function() {
     show: function(isVisible) {
       superClass.prototype.show.call(this, isVisible);
       this.splitterView_.show(isVisible);
+
+      if (isVisible)
+        this.filterInput_.focus();
     },
 
     getFilterText_: function() {
diff --git a/chrome/browser/resources/net_internals/export_view.html b/chrome/browser/resources/net_internals/export_view.html
index abfba90..1a3b8dc 100644
--- a/chrome/browser/resources/net_internals/export_view.html
+++ b/chrome/browser/resources/net_internals/export_view.html
@@ -22,33 +22,29 @@
 </style>
 
 <div id=export-view-tab-content class=content-box>
+  <div>
+    <input id=export-view-privacy-stripping-checkbox type=checkbox checked=yes>
+    <label for=export-view-privacy-stripping-checkbox>
+      Strip private information (cookies and credentials).
+    </label>
+    <div id=export-view-privacy-warning style="display:none">
+      <b>WARNING</b>: Events were captured while full byte logging was enabled.
+      This means the dump may contain private information.
+    </div>
 
-  <h2>Dump data</h2>
-  <div style="margin: 8px">
-    <p><input id=export-view-privacy-stripping-checkbox type=checkbox checked=yes>
-       <label id=export-view-privacy-stripping-checkbox>
-         Strip private information (cookies and credentials).
-       </label>
-       <div id=export-view-privacy-warning style="display:none">
-         <b>WARNING</b>: Events were captured while full byte logging was enabled.
-         This means the dump may contain private information.
-       </div>
-    </p>
-    <textarea cols=50 rows=5 placeholder="Explain what went wrong here. (These notes will be included in the dump file. Be sure to mention the specific URLs, so investigators know what to look for!)" id=export-view-user-comments></textarea>
-    <div>
-      <button id=export-view-save-log-file>Dump to file</button>
+    <div style='margin-top:10px; margin-bottom: 5px'>
+      <textarea cols=50 rows=5 placeholder="Explain what went wrong here. (These notes will be included in the dump file. Be sure to mention the specific URLs, so investigators know what to look for!)" id=export-view-user-comments></textarea>
     </div>
+    <button id=export-view-save-log-file>Save to file</button>
+
     <pre id=export-view-save-status-text></pre>
 
-    <ul>
-      <li><b>IMPORTANT</b>: First reproduce the problem while in recording mode.</li>
-    </ul>
-    <p>
-      For more information see: 
+    <div style='margin-top: 10px; margin-left: 10px;'>
       <a href="https://sites.google.com/a/chromium.org/dev/for-testers/providing-network-details" target="_blank">
-        Providing network details for bug reports
+        How to provide data for bug reports
       </a>
-    </p>
+    </div>
+
   </div>
 
   <a style="display: none" id=export-view-download-anchor download="net-internals-log.json"></a>
diff --git a/chrome/browser/resources/net_internals/export_view.js b/chrome/browser/resources/net_internals/export_view.js
index 6354024..b5c1add 100644
--- a/chrome/browser/resources/net_internals/export_view.js
+++ b/chrome/browser/resources/net_internals/export_view.js
@@ -77,6 +77,15 @@ var ExportView = (function() {
       return true;
     },
 
+    show: function(isVisible) {
+      superClass.prototype.show.call(this, isVisible);
+
+      // Focus the text area if it is empty.
+      if (isVisible && this.userCommentsTextArea_.value == '') {
+        this.userCommentsTextArea_.focus();
+      }
+    },
+
     /**
      * Sets the save to file status text, displayed below the save to file
      * button, to |text|.  Also enables or disables the save button based on the
@@ -173,6 +182,7 @@ var ExportView = (function() {
         this.userCommentsTextArea_.className =
             'export-view-explanation-warning';
         alert('Please fill in the text field!');
+        this.userCommentsTextArea_.focus();
         return undefined;
       }
 
diff --git a/chrome/browser/resources/net_internals/hsts_view.html b/chrome/browser/resources/net_internals/hsts_view.html
index baa12b0..c47d502 100644
--- a/chrome/browser/resources/net_internals/hsts_view.html
+++ b/chrome/browser/resources/net_internals/hsts_view.html
@@ -6,10 +6,10 @@
   
 <!-- HSTS tab -->
 <div id=hsts-view-tab-content class=content-box>
-  <p>
+  <div class=deindent-header>
     HSTS is HTTPS Strict Transport Security: a way for sites to elect to
     always use HTTPS. See <a href="http://dev.chromium.org/sts" target=_blank>
-    http://dev.chromium.org/sts</a>.</p>
+    http://dev.chromium.org/sts</a>.</div>
 
     <!-- This UI allows a user to query and update the browser's list of
          HSTS domains. -->
diff --git a/chrome/browser/resources/net_internals/http_cache_view.html b/chrome/browser/resources/net_internals/http_cache_view.html
index 8450648..e2c4513 100644
--- a/chrome/browser/resources/net_internals/http_cache_view.html
+++ b/chrome/browser/resources/net_internals/http_cache_view.html
@@ -1,6 +1,5 @@
 <div id=http-cache-view-tab-content class=content-box>
   <div class="hide-when-not-capturing">
-    <h4>Entries</h4>
     <a href="chrome://view-http-cache" target=_blank>Explore cache entries</a>
   </div>
 
diff --git a/chrome/browser/resources/net_internals/http_pipeline_view.html b/chrome/browser/resources/net_internals/http_pipeline_view.html
index 872a572..e06d9f7 100644
--- a/chrome/browser/resources/net_internals/http_pipeline_view.html
+++ b/chrome/browser/resources/net_internals/http_pipeline_view.html
@@ -1,6 +1,5 @@
 <div id=http-pipeline-view-tab-content class=content-box>
-  <h4>HTTP Pipelining Status</h4>
-  <ul>
+  <ul style='margin-top:0'>
     <li>HTTP Pipelining Enabled: <span id=http-pipeline-view-enabled-span>????</span></li>
   </ul>
 
diff --git a/chrome/browser/resources/net_internals/import_view.html b/chrome/browser/resources/net_internals/import_view.html
index 9e0e5d0..2a7f8a5 100644
--- a/chrome/browser/resources/net_internals/import_view.html
+++ b/chrome/browser/resources/net_internals/import_view.html
@@ -33,6 +33,11 @@
 </style>
 
 <div id=import-view-tab-content class=content-box>
+  <div>
+    <div style='margin-bottom:20px'><b>TIP</b>: Drag-and-drop files into this window.</div>
+    <input type=file value="Load log from file" id=import-view-load-log-file></input>
+    <pre id=import-view-load-status-text></pre>
+  </div>
 
   <div id=import-view-loaded-div style="display: none">
     <h2>Data Loaded</h2>
@@ -59,12 +64,4 @@
     </tr>
     </table>
   </div>
-  <div>
-    <h2>Load data</h2>
-    <p><input type=file value="Load log from file" id=import-view-load-log-file></p>
-    <ul>
-      <li><b>TIP</b>: Try drag-and-drop into this window!</li>
-    </ul>
-    <pre id=import-view-load-status-text></pre>
-  </div>
 </div>
diff --git a/chrome/browser/resources/net_internals/logs_view.css b/chrome/browser/resources/net_internals/logs_view.css
index 7f8948c..4a1d375 100644
--- a/chrome/browser/resources/net_internals/logs_view.css
+++ b/chrome/browser/resources/net_internals/logs_view.css
@@ -43,7 +43,3 @@
 #logs-view-log-table-header-row th {
   text-align: left;
 }
-
-#logs-view-tab-content {
-  padding: 5px;
-}
diff --git a/chrome/browser/resources/net_internals/logs_view.html b/chrome/browser/resources/net_internals/logs_view.html
index a97cd0b..fdae5e2 100644
--- a/chrome/browser/resources/net_internals/logs_view.html
+++ b/chrome/browser/resources/net_internals/logs_view.html
@@ -1,7 +1,6 @@
 <!-- ============================ Logs View ============================ -->
 
 <div id=logs-view-tab-content style="display: none;" class=content-box>
-  <h4>Network Log Data</h4>
   <button id=logs-view-global-show-btn class=logs-view-global-button>Show all...</button>
   <button id=logs-view-global-hide-btn class=logs-view-global-button>Hide all...</button>
   <button id=logs-view-refresh-btn class=logs-view-global-button>Refresh logs...</button>
diff --git a/chrome/browser/resources/net_internals/main.css b/chrome/browser/resources/net_internals/main.css
index 75ef746..305226a 100644
--- a/chrome/browser/resources/net_internals/main.css
+++ b/chrome/browser/resources/net_internals/main.css
@@ -6,7 +6,6 @@
 /* Only common styles should be declared here. */
 
 * {
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -17,10 +16,10 @@ ul {
 /* This class is used to create the splitter widget in
    ResizbleVerticalSplitView */
 .vertical-splitter {
+  -webkit-user-select: none;
   border-left: 1px solid #afafaf;
   cursor: ew-resize;
   position: absolute;
-  user-select: none;
   width: 10px;
 }
 
@@ -44,11 +43,21 @@ ul {
 
 /*
  * This class should be given to top-level content boxes (like the view's main
- * DIV). It gives them a consistent margin, and makes them scrollable.
+ * DIV). It gives them a consistent padding, and makes them scrollable.
  */
 .content-box {
   overflow: auto;
-  padding: 10px;
+  padding: 20px 10px 10px 20px;
+}
+
+.deindent-header,
+.content-box h1,
+.content-box h2,
+.content-box h3,
+.content-box h4,
+.content-box h5,
+.content-box h6 {
+  margin-left: -10px;
 }
 
 /*
@@ -114,5 +123,4 @@ table.styled-table,
 .mouse-over-help-hover {
   color: blue;
   cursor: help;
-  font-weight: bold;
 }
diff --git a/chrome/browser/resources/net_internals/prerender_view.html b/chrome/browser/resources/net_internals/prerender_view.html
index 4cdd72bc..eaa4a72 100644
--- a/chrome/browser/resources/net_internals/prerender_view.html
+++ b/chrome/browser/resources/net_internals/prerender_view.html
@@ -1,18 +1,13 @@
 <div id=prerender-view-tab-content class=content-box>
-  <h4>Prerender</h4>
-  <ul>
+  <ul style='margin-top:0'>
     <li>Prerender Enabled: <span id=prerender-view-enabled-span></span></li>
     <li>Prerender Omnibox Enabled: 
         <span id=prerender-view-omnibox-enabled-span></span></li>
   </ul>
-  <p>
-    Active Prerender Pages
-    <div id=prerender-view-active-div>
-    </div>
-  </p>
-  <p>
-    Prerender History
-    <div id=prerender-view-history-div>
-    </div>
-  </p>
+  <h4>Active Prerender Pages</h4>
+  <div id=prerender-view-active-div>
+  </div>
+  <h4>Prerender History</h4>
+  <div id=prerender-view-history-div>
+  </div>
 </div>
diff --git a/chrome/browser/resources/net_internals/proxy_view.html b/chrome/browser/resources/net_internals/proxy_view.html
index cff121b..cfe1335 100644
--- a/chrome/browser/resources/net_internals/proxy_view.html
+++ b/chrome/browser/resources/net_internals/proxy_view.html
@@ -19,26 +19,13 @@
 </style>
 
 <div id=proxy-view-tab-content class=content-box>
-  <h4>
-    Current proxy settings
-    <input type=button value="Re-apply settings" id=proxy-view-reload-settings class="hide-when-not-capturing">
-  </h4>
+ <input type=button value="Re-apply settings" id=proxy-view-reload-settings class="hide-when-not-capturing">
 
-  <table><tr>
-
-  <td valign=top>
-  <h3>Effective settings</h3>
+  <h4>Effective proxy settings</h4>
   <pre id=proxy-view-effective-settings></pre>
-  </td>
-
-  <td style='width: 30px'>&nbsp;</td>
 
-  <td valign=top>
-  <h3>Original settings</h3>
+  <h4>Original proxy settings</h4>
   <pre id=proxy-view-original-settings></pre>
-  </td>
-
-  </tr></table>
 
   <div id=proxy-view-socks-hints>
     Note that some traffic such as DNS prefetching will NOT go through the proxy
diff --git a/chrome/browser/resources/net_internals/quic_view.html b/chrome/browser/resources/net_internals/quic_view.html
index c212f22..3ef4ac2 100644
--- a/chrome/browser/resources/net_internals/quic_view.html
+++ b/chrome/browser/resources/net_internals/quic_view.html
@@ -1,6 +1,5 @@
 <div id=quic-view-tab-content class=content-box>
-  <h4>QUIC Status</h4>
-  <ul>
+  <ul style='margin-top:0'>
     <li>QUIC Enabled: <span id=quic-view-enabled-span>????</span></li>
     <li>Use SPDY over QUIC: <span id=quic-view-use-spdy-over-quic-span>????</span></li>
     <li>Origin Port To Force QUIC On: <span id=quic-view-force-port-span>????</span></li>
diff --git a/chrome/browser/resources/net_internals/service_providers_view.html b/chrome/browser/resources/net_internals/service_providers_view.html
index 2346972..72e9449 100644
--- a/chrome/browser/resources/net_internals/service_providers_view.html
+++ b/chrome/browser/resources/net_internals/service_providers_view.html
@@ -1,6 +1,6 @@
 <!-- Only shown on Windows -->
 <div id=service-providers-view-tab-content style="display: none;" class=content-box>
-  <h4>Layered Service Providers</h4>
+  <h4 style='margin-top:0'>Layered Service Providers</h4>
   <table class="styled-table">
     <thead>
       <tr>
diff --git a/chrome/browser/resources/net_internals/sockets_view.html b/chrome/browser/resources/net_internals/sockets_view.html
index 6553cc0..b7ffce2 100644
--- a/chrome/browser/resources/net_internals/sockets_view.html
+++ b/chrome/browser/resources/net_internals/sockets_view.html
@@ -1,6 +1,5 @@
 <div id=sockets-view-tab-content class=content-box>
-  <h4>Socket pools</h4>
-  <ul>
+  <ul style='margin-top:0'>
     <li class="hide-when-not-capturing">
       <input type=button value="Close idle sockets" id=sockets-view-close-idle-button>
     </li>
diff --git a/chrome/browser/resources/net_internals/spdy_view.html b/chrome/browser/resources/net_internals/spdy_view.html
index 74201e8..b3a8290f 100644
--- a/chrome/browser/resources/net_internals/spdy_view.html
+++ b/chrome/browser/resources/net_internals/spdy_view.html
@@ -1,6 +1,5 @@
 <div id=spdy-view-tab-content class=content-box>
-  <h4>SPDY Status</h4>
-  <ul>
+  <ul style='margin-top:0'>
     <li>SPDY Enabled: <span id=spdy-view-enabled-span>????</span></li>
     <li>Use Alternate Protocol: <span id=spdy-view-alternate-protocol-span>????</span></li>
     <li>Force SPDY Always: <span id=spdy-view-force-always-span>????</span></li>
diff --git a/chrome/browser/resources/net_internals/test_view.html b/chrome/browser/resources/net_internals/test_view.html
index 933dd26..9fd833f 100644
--- a/chrome/browser/resources/net_internals/test_view.html
+++ b/chrome/browser/resources/net_internals/test_view.html
@@ -1,7 +1,9 @@
 <!-- Connection tests -->
 <div id="test-view-tab-content" class="content-box">
-  <p>Input a URL which failed to load, and then click the button to run some
-     tests for why it failed.</p>
+  <div style='margin-bottom: 20px'>
+    Input a URL which failed to load, and then click the button to run some
+    tests for why it failed.
+  </div>
   <form id="test-view-connection-tests-form">
     URL: <input id="test-view-url-input" type="text">
     <input id="test-view-connection-tests-submit" type="submit"