[Offline pages][Internals] Update internal page download to not use dataurl

Data urls are disabled from top-level navigations as of Chrome 60. This will
display the JSON in a floating textarea instead.

Bug: 775599
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I6a66eaf19f005cbf75640db146ea4ca4acf26277
Reviewed-on: https://chromium-review.googlesource.com/724236
Commit-Queue: Cathy Li <chili@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Justin DeWitt <dewittj@chromium.org>
Cr-Commit-Position: refs/heads/master@{#513234}

chrome/browser/resources/offline_pages/offline_internals.css

@@ -47,6 +47,10 @@ li:nth-child(2n) {
   background-color: lavender;
 }
 
+dialog {
+  border: none;
+}
+
 #current-status {
   font-size: 15px;
 }
@@ -55,3 +59,10 @@ li:nth-child(2n) {
   font-family: monospace;
   white-space: pre-wrap;
 }
+
+#dump-box {
+  box-sizing: border-box;
+  display: block;
+  resize: none;
+  width: 100%;
+}

chrome/browser/resources/offline_pages/offline_internals.html

@@ -19,8 +19,15 @@
     <div>
       <span id="current-status"></span>
       <button id="refresh">Refresh page</button>
-      <button id="download">Dump</button>
+      <button id="dump">Dump</button>
     </div>
+    <dialog id="dump">
+      <textarea id="dump-box" name="json-box" rows="10" cols="40" readonly>
+      </textarea>
+      <button id="copy-to-clipboard">Copy</button>
+      <button id="close-dump">Close</button>
+      <span id="dump-info"></span>
+    </dialog>
 
     <h2>Event Logs</h2>
     <div>

chrome/browser/resources/offline_pages/offline_internals.js

@@ -173,13 +173,26 @@ cr.define('offlineInternals', function() {
    * Downloads all the stored page and request queue information into a file.
    * TODO(chili): Create a CSV writer that can abstract out the line joining.
    */
-  function download() {
+  function dumpAsJson() {
     var json = JSON.stringify(
         {offlinePages: offlinePages, savePageRequests: savePageRequests}, null,
         2);
 
-    window.open(
-        'data:application/json,' + encodeURIComponent(json), 'dump.json');
+    $('dump-box').value = json;
+    $('dump-info').textContent = '';
+    $('dump').showModal();
+    $('dump-box').select();
+  }
+
+  function closeDump() {
+    $('dump').close();
+    $('dump-box').value = '';
+  }
+
+  function copyDump() {
+    $('dump-box').select();
+    document.execCommand('copy');
+    $('dump-info').textContent = 'Copied to clipboard!';
   }
 
   /**
@@ -260,22 +273,19 @@ cr.define('offlineInternals', function() {
     }
 
     var incognito = loadTimeData.getBoolean('isIncognito');
-    $('delete-all-pages').disabled = incognito;
-    $('delete-selected-pages').disabled = incognito;
-    $('delete-all-requests').disabled = incognito;
-    $('delete-selected-requests').disabled = incognito;
-    $('log-model-on').disabled = incognito;
-    $('log-model-off').disabled = incognito;
-    $('log-request-on').disabled = incognito;
-    $('log-request-off').disabled = incognito;
-    $('refresh').disabled = incognito;
+    ['delete-all-pages', 'delete-selected-pages', 'delete-all-requests',
+     'delete-selected-requests', 'log-model-on', 'log-model-off',
+     'log-request-on', 'log-request-off', 'refresh']
+        .forEach(el => $(el).disabled = incognito);
 
     $('delete-all-pages').onclick = deleteAllPages;
     $('delete-selected-pages').onclick = deleteSelectedPages;
     $('delete-all-requests').onclick = deleteAllRequests;
     $('delete-selected-requests').onclick = deleteSelectedRequests;
     $('refresh').onclick = refreshAll;
-    $('download').onclick = download;
+    $('dump').onclick = dumpAsJson;
+    $('close-dump').onclick = closeDump;
+    $('copy-to-clipboard').onclick = copyDump;
     $('log-model-on').onclick = togglePageModelLog.bind(this, true);
     $('log-model-off').onclick = togglePageModelLog.bind(this, false);
     $('log-request-on').onclick = toggleRequestQueueLog.bind(this, true);