Change chrome://net-export/ UI flow.

components/net_log/resources/net_export.css

Index: components/net_log/resources/net_export.css
diff --git a/components/net_log/resources/net_export.css b/components/net_log/resources/net_export.css
index 8d7783039a8e5e8b6a871a912c41547ac6925dbf..744005504a8d331a86c116e27fe1bed6a6c94a37 100644
--- a/components/net_log/resources/net_export.css
+++ b/components/net_log/resources/net_export.css
@@ -5,6 +5,8 @@
 
 body {
   font-size: 80%;
+  margin: 1em;

[xunjieli, 2017/05/02 17:10:01]

Should we make the left-margin and right-margin auto?
On desktop, the view is at left corner of the screen. Maybe we can center it?

Screenshot:
https://drive.google.com/file/d/0Bw0C8-TgzJfsXzBaTFA2cDUwQnc/view?usp=sharing

[eroman, 2017/05/02 20:07:58]

Done

+  max-width: 60em;
 }
 
 button {
@@ -16,10 +18,11 @@ button {
   width: 200px;
 }
 
-button:disabled > .export-view-logging-enabled,
-button:enabled > .export-view-logging-disabled
-{
-  display: none;
+h2 {
+  color: #546E7A;
+  font-weight: normal;
+  font-size: 170%;
+  margin-bottom: 1.5em;
 }
 
 .radio-button-div {
@@ -29,14 +32,20 @@ button:enabled > .export-view-logging-disabled
 .warning {
   color: red;
   font-size: 90%;
-  font-weight: normal;
 }
 
-#net-export-main {
-  margin: 8px;
+.section-container {
+  margin-top: 2em;
+}
+
+#export-view-file-path-logging,
+#export-view-file-path-stopped {
+  font-family: monospace;
 }
 
-#export-view-file-path-text {
-  white-space: pre-wrap;
-  word-wrap: break-word;
+.outline-box {
+  margin-top: 2em;
+  border: 1px solid #ababab;
+  padding: 0.5em;
+  line-height: 1.5em;
 }