[DevTools] Detect encoding to use for html previews

Bug: 899128
Change-Id: I6275ce55fec18dcba45c8cbb085a1eea45b5fba6
Reviewed-on: https://chromium-review.googlesource.com/c/1310564
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#605433}

third_party/WebKit/LayoutTests/http/tests/devtools/network/html-preview-encoding-expected.txt

+Verifies that html resources are previewed with the encoding set in their content-type header
+
+Running: testUTF8
+fetchScript: fetch('/devtools/network/resources/content-type-utf8.php')
+iframe.src: data:text/html;charset=utf-8,utf8%20character:%20%E2%80%A6
+
+Running: testISO
+fetchScript: fetch('/devtools/network/resources/content-type-iso.php')
+iframe.src: data:text/html;charset=iso-8859-1,iso-8859-1%20character:%20%C3%82%C2%A9
+
+Running: testNoCharset
+fetchScript: fetch('/devtools/network/resources/content-type-none.php')
+iframe.src: data:text/html,no%20encoding
+

third_party/WebKit/LayoutTests/http/tests/devtools/network/html-preview-encoding.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(
+    'Verifies that html resources are previewed with the encoding set in their content-type header');
+  await TestRunner.loadModule('network_test_runner');
+  await TestRunner.showPanel('network');
+
+  async function runEncodingTest(url, nextTestCallback) {
+    const fetchScript = `fetch('${url}')`;
+    TestRunner.addResult('fetchScript: ' + fetchScript);
+    TestRunner.evaluateInPage(fetchScript);
+
+    const request = await TestRunner.networkManager.once(SDK.NetworkManager.Events.RequestFinished);
+
+    const previewView = new Network.RequestPreviewView(request);
+    previewView.wasShown();
+    const htmlPreviewView = await previewView._contentViewPromise;
+    htmlPreviewView.wasShown();
+    const iframe = htmlPreviewView.contentElement.firstChild;
+    TestRunner.addResult('iframe.src: ' + iframe.src);
+
+    nextTestCallback();
+  }
+
+  TestRunner.runTestSuite([
+      function testUTF8(next) {
+        runEncodingTest('/devtools/network/resources/content-type-utf8.php', next);
+      },
+      function testISO(next) {
+        runEncodingTest('/devtools/network/resources/content-type-iso.php', next);
+      },
+      function testNoCharset(next) {
+        runEncodingTest('/devtools/network/resources/content-type-none.php', next);
+      },
+    ]);
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/network/resources/content-type-iso.php

+<?php
+  header("content-type: text/html; charset=iso-8859-1;q=0.5");
+  echo("iso-8859-1 character: ©");
+?>

third_party/WebKit/LayoutTests/http/tests/devtools/network/resources/content-type-none.php

+<?php
+  header_remove("Content-type");
+  echo("no encoding");
+?>

third_party/WebKit/LayoutTests/http/tests/devtools/network/resources/content-type-utf8.php

+<?php
+  header("Content-Type: text/html; charset=utf-8");
+  echo("utf8 character: …");
+?>

third_party/blink/renderer/devtools/front_end/network/RequestPreviewView.js

@@ -71,7 +71,7 @@ Network.RequestPreviewView = class extends Network.RequestResponseView {
       return jsonView;
 
     const dataURL = Common.ContentProvider.contentAsDataURL(
-        contentData.content, this.request.mimeType, contentData.encoded, contentData.encoded ? 'utf-8' : null);
+        contentData.content, this.request.mimeType, contentData.encoded, this.request.charset());
     return dataURL ? new Network.RequestHTMLView(dataURL) : null;
   }
 

third_party/blink/renderer/devtools/front_end/sdk/NetworkRequest.js

@@ -1245,6 +1245,24 @@ SDK.NetworkRequest = class extends Common.Object {
     this._backendRequestId = requestId;
     this._requestId = requestId;
   }
+
+  /**
+   * @return {?string}
+   */
+  charset() {
+    const contentTypeHeader = this.responseHeaderValue('content-type');
+    if (!contentTypeHeader)
+      return null;
+
+    const responseCharsets = contentTypeHeader.replace(/ /g, '')
+                                 .split(';')
+                                 .filter(parameter => parameter.toLowerCase().startsWith('charset='))
+                                 .map(parameter => parameter.slice('charset='.length));
+    if (responseCharsets.length)
+      return responseCharsets[0];
+
+    return null;
+  }
 };
 
 /** @enum {symbol} */