Use local pages for webrtc telemetry tests.

tools/perf/page_sets/webrtc_cases/datachannel_files/main.css

Index: tools/perf/page_sets/webrtc_cases/datachannel_files/main.css
diff --git a/tools/perf/page_sets/webrtc_cases/datachannel_files/main.css b/tools/perf/page_sets/webrtc_cases/datachannel_files/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..38dc99d2361f155a087d3e52e8147dec4207120e
--- /dev/null
+++ b/tools/perf/page_sets/webrtc_cases/datachannel_files/main.css
@@ -0,0 +1,258 @@
+/*
+ *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
+ *
+ *  Use of this source code is governed by a BSD-style license
+ *  that can be found in the LICENSE file in the root of the source
+ *  tree.
+ */
+.hidden {
+  display: none;
+}
+
+.highlight {
+  background-color: #eee;
+  font-size: 1.2em;
+  margin: 0 0 30px 0;
+  padding: 0.2em 1.5em;
+}
+.warning {
+  color: red;
+  font-weight: 400;
+}
+
+div#errorMsg p {
+  color: #F00;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 300;
+}
+
+a {
+color: #6fa8dc;
+font-weight: 300;
+text-decoration: none;
+}
+
+a:hover {
+color: #3d85c6;
+text-decoration: underline;
+}
+
+a#viewSource {
+display: block;
+margin: 1.3em 0 0 0;
+border-top: 1px solid #999;
+padding: 1em 0 0 0;
+}
+
+div#links a {
+display: block;
+line-height: 1.3em;
+margin: 0 0 1.5em 0;
+}
+
+div.outputSelector {
+margin: -1.3em 0 2em 0;
+}
+
+@media screen and (min-width: 1000px) {
+/* hack! to detect non-touch devices */
+  div#links a {
+		line-height: 0.8em;
+  }
+}
+
+h1 a {
+font-weight: 300;
+margin: 0 10px 0 0;
+white-space: nowrap;
+}
+
+audio {
+max-width: 100%;
+}
+
+body {
+font-family: 'Roboto', sans-serif;
+margin: 0;
+padding: 1em;
+word-break: break-word;
+}
+
+button {
+background-color: #d84a38;
+border: none;
+border-radius: 2px;
+color: white;
+font-family: 'Roboto', sans-serif;
+font-size: 0.8em;
+margin: 0 0 1em 0;
+padding: 0.5em 0.7em 0.6em 0.7em;
+}
+
+button:active {
+background-color: #cf402f;
+}
+
+button:hover {
+background-color: #cf402f;
+}
+
+button[disabled] {
+color: #ccc;
+}
+
+button[disabled]:hover {
+background-color: #d84a38;
+}
+
+canvas {
+  background-color: #ccc;
+  max-width: 100%;
+  width: 100%;
+}
+
+code {
+font-family: 'Roboto', sans-serif;
+font-weight: 400;
+}
+
+div#container {
+margin: 0 auto 0 auto;
+max-width: 40em;
+padding: 1em 1.5em 1.3em 1.5em;
+}
+
+div#links {
+	padding: 0.5em 0 0 0;
+}
+
+h1 {
+border-bottom: 1px solid #ccc;
+font-family: 'Roboto', sans-serif;
+font-weight: 500;
+margin: 0 0 0.8em 0;
+padding: 0 0 0.2em 0;
+}
+
+h2 {
+color: #444;
+font-size: 1em;
+font-weight: 500;
+line-height: 1.2em;
+margin: 0 0 0.8em 0;
+}
+
+h3 {
+border-top: 1px solid #eee;
+color: #666;
+font-weight: 500;
+margin: 20px 0 10px 0;
+padding: 10px 0 0 0;
+white-space: nowrap;
+}
+
+html {
+/* avoid annoying page width change
+when moving from the home page */
+overflow-y: scroll;
+}
+
+img {
+border: none;
+max-width: 100%;
+}
+
+input[type=radio] {
+position: relative;
+top: -1px;
+}
+
+p {
+color: #444;
+font-weight: 300;
+line-height: 1.6em;
+}
+
+p#data {
+border-top: 1px dotted #666;
+font-family: Courier New, monospace;
+line-height: 1.3em;
+max-height: 1000px;
+overflow-y: auto;
+padding: 1em 0 0 0;
+}
+
+p.borderBelow {
+border-bottom: 1px solid #aaa;
+padding: 0 0 20px 0;
+}
+
+section p:last-of-type {
+margin: 0;
+}
+
+section {
+  border-bottom: 1px solid #eee;
+  margin: 0 0 30px 0;
+  padding: 0 0 20px 0;
+}
+
+section:last-of-type {
+  border-bottom: none;
+  padding: 0 0 1em 0;
+}
+
+select {
+  margin: 0 1em 1em 0;
+  position: relative;
+  top: -1px;
+}
+
+h1 span {
+  white-space: nowrap;
+}
+
+strong {
+  font-weight: 500;
+}
+
+textarea {
+  font-family: 'Roboto', sans-serif;
+}
+
+video {
+  background: #222;
+  margin: 0 0 20px 0;
+  width: 100%;
+}
+
+@media screen and (max-width: 650px) {
+  .highlight {
+    font-size: 1em;
+    margin: 0 0 20px 0;
+    padding: 0.2em 1em;
+  }
+  h1 {
+    font-size: 24px;
+  }
+}
+
+@media screen and (max-width: 550px) {
+  button:active {
+    background-color: darkRed;
+  }
+  h1 {
+    font-size: 22px;
+  }
+}
+
+@media screen and (max-width: 450px) {
+  h1 {
+    font-size: 20px;
+  }
+}
+
+