Update the malware interstitial to have the new layout

chrome/browser/resources/safe_browsing/safe_browsing_v3.js

+// 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_BOX = 'displaycheckbox';
+var SB_CMD_DO_REPORT = 'doReport';
+var SB_CMD_DONT_REPORT = 'dontReport';
+var SB_CMD_EXPANDED_SEE_MORE = 'expandedSeeMore';
+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');

[edwardjung, 2014/06/09 18:37:29]

It'll be cleaner to just add a single class to the body, then target in the CSS,
rather than adding classes to individual elements.

So your CSS would be something like:

.malware {
…
}

.malware #icon {
 …
}

.malware #primary-button {
 …
}

then you might also have a body class for SSL, or whatever type of page you
want.

.ssl .icon {
…
}

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

Good idea, done.

+
+  // 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');
+}