Keep the view-source Line Wrap checkbox from getting restored

Prior to this CL, form restoration could erroneously check the checkbox
when the same page was re-opened, but the lines were not wrapped.
With this CL, the checkbox will no longer participate in form
restoration.

This CL also removes word-break:break-word, which is deprecated, and
replaces it with overflow-wrap:anywhere. Same effect.

Change-Id: I8cfd8014d31376d2fdb7415679666b042ee9dcbc
Cq-Do-Not-Cancel-Tryjobs: true
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2612464
Auto-Submit: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Mason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#842192}

third_party/blink/renderer/core/css/view-source.css

@@ -40,7 +40,8 @@ table {
 .line-wrap {
     width: 100%;
     white-space: pre-wrap !important;
-    word-break: break-word;
+    word-break: normal;
+    overflow-wrap: anywhere;
 }
 
 .line-wrap-control {

third_party/blink/renderer/core/html/html_view_source_document.cc

@@ -30,6 +30,7 @@
 #include "third_party/blink/renderer/core/dom/events/native_event_listener.h"
 #include "third_party/blink/renderer/core/dom/text.h"
 #include "third_party/blink/renderer/core/events/mouse_event.h"
+#include "third_party/blink/renderer/core/html/forms/html_form_element.h"
 #include "third_party/blink/renderer/core/html/forms/html_input_element.h"
 #include "third_party/blink/renderer/core/html/forms/html_label_element.h"
 #include "third_party/blink/renderer/core/html/html_anchor_element.h"
@@ -57,8 +58,7 @@ class ViewSourceEventListener : public NativeEventListener {
       : table_(table), checkbox_(checkbox) {}
 
   void Invoke(ExecutionContext*, Event* event) override {
-    DCHECK(DynamicTo<MouseEvent>(event));
-    DCHECK_EQ(event->type(), event_type_names::kClick);
+    DCHECK_EQ(event->type(), event_type_names::kChange);
     table_->setAttribute(html_names::kClassAttr,
                          checkbox_->checked() ? "line-wrap" : "");
   }
@@ -108,28 +108,32 @@ void HTMLViewSourceDocument::CreateContainingTable() {
   line_number_ = 0;
 
   // Create a checkbox to control line wrapping.
-  auto* label = MakeGarbageCollected<HTMLLabelElement>(*this);
-  label->setAttribute(html_names::kClassAttr, "line-wrap-control");
   auto* checkbox =
       MakeGarbageCollected<HTMLInputElement>(*this, CreateElementFlags());
   checkbox->setAttribute(html_names::kTypeAttr, "checkbox");
-  label->ParserAppendChild(checkbox);
+  checkbox->addEventListener(
+      event_type_names::kChange,
+      MakeGarbageCollected<ViewSourceEventListener>(table, checkbox),
+      /*use_capture=*/false);
+  auto* label = MakeGarbageCollected<HTMLLabelElement>(*this);
   label->ParserAppendChild(
       Text::Create(*this, WTF::AtomicString(Locale::DefaultLocale().QueryString(
                               IDS_VIEW_SOURCE_LINE_WRAP))));
+  label->setAttribute(html_names::kClassAttr, "line-wrap-control");
+  label->ParserAppendChild(checkbox);
+  // Add the checkbox to a form with autocomplete=off, to avoid form
+  // restoration from changing the value of the checkbox.
+  auto* form = MakeGarbageCollected<HTMLFormElement>(*this);
+  form->setAttribute(html_names::kAutocompleteAttr, "off");
+  form->ParserAppendChild(label);
   auto* tr = MakeGarbageCollected<HTMLTableRowElement>(*this);
   auto* td =
       MakeGarbageCollected<HTMLTableCellElement>(html_names::kTdTag, *this);
   td->setAttribute(html_names::kColspanAttr, "2");
   td->setAttribute(html_names::kClassAttr, "line-wrap-cell");
-  td->ParserAppendChild(label);
+  td->ParserAppendChild(form);
   tr->ParserAppendChild(td);
   tbody_->ParserAppendChild(tr);
-
-  auto* listener =
-      MakeGarbageCollected<ViewSourceEventListener>(table, checkbox);
-  checkbox->addEventListener(event_type_names::kClick, listener,
-                             /*use_capture=*/false);
 }
 
 void HTMLViewSourceDocument::AddSource(const String& source, HTMLToken& token) {

third_party/blink/renderer/core/html/html_view_source_document_test.cc

@@ -39,8 +39,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource1) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
       "class=\"line-content\"><br></td></tr><tr><td class=\"line-number\" "
       "value=\"2\"></td><td class=\"line-content\">      <span "
@@ -94,8 +96,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource2) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
       "class=\"line-content\"><br></td></tr><tr><td class=\"line-number\" "
       "value=\"2\"></td><td class=\"line-content\">      <span "
@@ -148,8 +152,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource3) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
       "class=\"line-content\"><br></td></tr><tr><td class=\"line-number\" "
       "value=\"2\"></td><td class=\"line-content\">      <span "
@@ -215,8 +221,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource4) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
       "class=\"line-content\"><br></td></tr><tr><td class=\"line-number\" "
       "value=\"2\"></td><td class=\"line-content\">      <span "
@@ -285,8 +293,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource5) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
       "class=\"line-content\"><br></td></tr><tr><td class=\"line-number\" "
       "value=\"2\"></td><td class=\"line-content\"><br></td></tr><tr><td "
@@ -319,8 +329,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource6) {
   std::string expected_beginning(
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\">"
       "</td><td class=\"line-content\">      ");
   std::string expected_ending(
@@ -337,8 +349,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource7) {
   EXPECT_EQ(GetDocument().documentElement()->outerHTML(),
             "<html><head></head><body><div "
             "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-            "colspan=\"2\" class=\"line-wrap-cell\"><label "
-            "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+            "colspan=\"2\" class=\"line-wrap-cell\"><form "
+            "autocomplete=\"off\"><label "
+            "class=\"line-wrap-control\"><input "
+            "type=\"checkbox\"></label></form>"
             "</td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
             "class=\"line-content\">1234567<span "
             "class=\"html-end-of-file\"></span></td></tr></tbody></table></"
@@ -361,8 +375,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource8) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label></td></tr>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form></td></tr>"
       "<tr><td class=\"line-number\" value=\"1\"></td><td "
       "class=\"line-content\"><br></td></tr><tr><td class=\"line-number\" "
       "value=\"2\"></td><td class=\"line-content\">      <span "
@@ -430,8 +446,10 @@ TEST_F(HTMLViewSourceDocumentTest, ViewSource9) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
       "class=\"line-content\"><br></td></tr><tr><td class=\"line-number\" "
       "value=\"2\"></td><td class=\"line-content\">      <span "
@@ -463,9 +481,11 @@ TEST_F(HTMLViewSourceDocumentTest, IncompleteToken) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\">"
-      "</label></td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
+      "</td></tr><tr><td class=\"line-number\" value=\"1\"></td><td "
       "class=\"line-content\"><br></td></tr><tr><td class=\"line-number\" "
       "value=\"2\"></td><td class=\"line-content\">      Incomplete token "
       "test</td></tr><tr><td class=\"line-number\" value=\"3\"></td><td "
@@ -487,8 +507,10 @@ TEST_F(HTMLViewSourceDocumentTest, UnfinishedTextarea) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\"></td>"
       "<td class=\"line-content\"><span "
       "class=\"html-tag\">&lt;textarea&gt;</span>foobar in "
@@ -505,8 +527,10 @@ TEST_F(HTMLViewSourceDocumentTest, UnfinishedScript) {
       GetDocument().documentElement()->outerHTML(),
       "<html><head></head><body><div "
       "class=\"line-gutter-backdrop\"></div><table><tbody><tr><td "
-      "colspan=\"2\" class=\"line-wrap-cell\"><label "
-      "class=\"line-wrap-control\"><input type=\"checkbox\"></label>"
+      "colspan=\"2\" class=\"line-wrap-cell\"><form "
+      "autocomplete=\"off\"><label "
+      "class=\"line-wrap-control\"><input "
+      "type=\"checkbox\"></label></form>"
       "</td></tr><tr><td class=\"line-number\" value=\"1\"></td>"
       "<td class=\"line-content\"><span "
       "class=\"html-tag\">&lt;script&gt;</span>foobar in "