Update the malware interstitial to have the new layout

chrome/browser/resources/safe_browsing/safe_browsing_v3.js

Index: chrome/browser/resources/safe_browsing/safe_browsing_v3.js
diff --git a/chrome/browser/resources/safe_browsing/safe_browsing_v3.js b/chrome/browser/resources/safe_browsing/safe_browsing_v3.js
new file mode 100644
index 0000000000000000000000000000000000000000..186d1bc3cb4487107f5b0af6138b76c4eb13f377
--- /dev/null
+++ b/chrome/browser/resources/safe_browsing/safe_browsing_v3.js
@@ -0,0 +1,65 @@
+// Copyright 2014 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.
+
+// Must match the commands handled by SafeBrowsingBlockingPage::CommandReceived.
+var SB_CMD_BOX_CHECKED = 'boxchecked';
+var SB_CMD_DISPLAY_CHECK = 'displaycheckbox';
+var SB_CMD_DO_REPORT = 'doReport';
+var SB_CMD_DONT_REPORT = 'dontReport';
+var SB_CMD_EXPANDED_MORE = 'expandedSeeMore';

[Bernhard Bauer, 2014/06/09 15:43:00]

And this one is kExpandedSeeMore (without Command... <sigh>).

Basically, what I'd like is to make all these match the values. 

[felt, 2014/06/09 16:55:27]

Done.

I don't want to add Command to the end of them... it would be quite long. But I
like prefixing them all as SB_CMD_ so it's clear what the variable is about.

[Bernhard Bauer, 2014/06/09 17:17:10]

Yes, I like that (and I was just lamenting about the lack of consistency on the
C++ side).

Oh, I just realized that not all of them are actually commands! In that case, it
may be more confusing than helpful to prefix them with CMD_...

Could we do the following:
* Sort the strings in safe_browsing_blocking_page.cc first by type (command vs.
key in loadTimeData), then alphabetically
* Apply the same sort order here
* Remove the CMD_ prefix here from things that aren't commands

We could also leave out the non-commands here if we don't actually need them.

And sorry for not catching this earlier :-(

[felt, 2014/06/09 18:01:36]

I'm not sure what distinction you're drawing between command vs non-command.
They all tell the c++ to do something -- open another window, navigate the page,
or record an UMA statistic. What did you have in mind for the distinction?

[Bernhard Bauer, 2014/06/09 21:48:27]

No, kBoxChecked and kDisplayCheckBox are used as keys into loadTimeData, not as
commands.

[felt, 2014/06/10 05:21:02]

Separated them out.

+var SB_CMD_LEARN_MORE_2 = 'learnMore2';
+var SB_CMD_PROCEED = 'proceed';
+var SB_CMD_REPORT_ERROR = 'reportError';
+var SB_CMD_SHOW_DIAGNOSTIC = 'showDiagnostic';
+var SB_CMD_SHOW_PRIVACY = 'showPrivacy';
+var SB_CMD_TAKE_ME_BACK = 'takeMeBack';
+
+function applyMalwareStyle() {
+  // Dynamically add the second and third paragraphs.
+  var secondParagraph = document.createTextNode(
+      loadTimeData.getString('secondParagraph'));
+  $('second-paragraph').appendChild(secondParagraph);
+  if (!loadTimeData.getBoolean('phishing')) {
+    var thirdParagraph = document.createTextNode(
+        loadTimeData.getString('thirdParagraph'));
+    $('third-paragraph').appendChild(thirdParagraph);
+  }
+
+  // Add the link to the diagnostic page (malware) or reporting (phishing).
+  // TODO(felt): Put the link definition into the grd file once we have new
+  // wording.
+  var detailsText = document.createTextNode(
+      loadTimeData.getString('detailsText'));
+  var detailsLink = document.createElement('a');
+  detailsLink.setAttribute('href', '#');
+  detailsLink.setAttribute('id', 'help-link');
+  detailsLink.appendChild(detailsText);
+  $('explanation-paragraph').appendChild(detailsLink);
+
+  // Add the link to proceed.
+  if (loadTimeData.getBoolean('overridable')) {
+    var proceedText = document.createTextNode(
+        loadTimeData.getString('proceedText'));
+    var proceedLink = document.createElement('a');
+    proceedLink.setAttribute('href', '#');
+    proceedLink.setAttribute('id', 'proceed-link');
+    proceedLink.appendChild(proceedText);
+    $('final-paragraph').appendChild(proceedLink);
+  }
+
+  // Make the background red.
+  $('icon').classList.add('icon-malware');
+  $('body').classList.add('body-red');
+  $('primary-button').classList.add('button-red');
+  var links = document.getElementsByTagName('a');
+  for (var i = 0; i < links.length; i++)
+    links[i].classList.add('a-red');
+
+  // Remove the 'hidden' class from the paragraphs that we use.
+  $('second-paragraph').classList.toggle('hidden');
+  if (!loadTimeData.getBoolean('phishing'))
+    $('third-paragraph').classList.toggle('hidden');
+  $('explanation-paragraph').classList.toggle('hidden');
+  $('final-paragraph').classList.toggle('hidden');
+}