Simplify the malware warning ui. Remove the 'more info'/'less info' button, instead directly show the content above the 'go back' button.

sample screenshot: https://docs0.google.com/document/edit?id=1Kk2wxsj8JjIjlC1WUPamDlEPWZH-iWUoECMRdyQ9t_4&hl=en&authkey=CJKfrM0D#

Patch from Ke Wang <kewang@google.com> 

BUG=60813
TEST=unit_tests. To see the UI change, start the browser and try load some sites in malware blacklist.

Review URL: http://codereview.chromium.org/5623007

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@69028 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 35 insertions, 138 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index b6aaaad..efbcb2a 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -7686,15 +7686,6 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_SAFE_BROWSING_MALWARE_DESCRIPTION5" desc="SafeBrowsing Malware HTML description, detailed information, click button to span.">
         We have already notified <ph name="HOST_NAME">&lt;strong&gt;$1<ex>evil.com</ex>&lt;/strong&gt;</ph> that we found malware on the site. For more about the problems found on <ph name="HOST_NAME2">$2<ex>www.malware.com</ex></ph>, visit the Google <ph name="DIAGNOSTIC_PAGE">$3<ex>diagnostic page</ex></ph>.
       </message>
-      <message name="IDS_SAFE_BROWSING_MALWARE_TOGGLE_BUTTON" desc="SafeBrowsing Malware, show more information button">
-        <ph name="CONTENT">$1</ph>
-      </message>
-      <message name="IDS_SAFE_BROWSING_MALWARE_MORE_INFO_BUTTON" desc="SafeBrowsing Malware, show more information button">
-        More information
-      </message>
-      <message name="IDS_SAFE_BROWSING_MALWARE_LESS_INFO_BUTTON" desc="SafeBrowsing Malware, show less information button">
-        Less information
-      </message>
       <message name="IDS_SAFE_BROWSING_MALWARE_BACK_BUTTON" desc="SafeBrowsing Malware, back button">
         Go back
       </message>
diff --git a/chrome/browser/resources/safe_browsing_malware_block.html b/chrome/browser/resources/safe_browsing_malware_block.html
index 8bd95a0..0dd7952 100644
--- a/chrome/browser/resources/safe_browsing_malware_block.html
+++ b/chrome/browser/resources/safe_browsing_malware_block.html
@@ -44,7 +44,7 @@ html[dir='rtl'] .box {
   color:#660000;
 }
 .main {
-  margin:0px 90px 0px;
+  margin:0px 90px 10px;
 }
 .submission {
   margin:15px 5px 15px 0px;
@@ -69,113 +69,44 @@ input {
   margin-right:5px;
 }
 
-.nicebutton {
+
+.green {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c260), color-stop(44%,#71b44c), color-stop(100%,#549d2c));
+  border: 1px solid #4c7336;
+  border-bottom: 1px solid #44692f;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 0 0 #a0d186, 0px 1px 2px rgba(0,0,0,0.2);
   color: #fff;
-  font-size: 11pt;
+  font-family: arial, helvetica, sans-serif;
+  font-size: 14px;
   font-weight: bold;
-  padding: 7px 20px;
-  border-radius: 5px;
-  outline-width: 0;
-  border: 1px solid #4C7336;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
-     inset 0px 1px 0px rgba(255, 255, 255, 0.5);
-  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.2);
-}
-
-#back {
-  border: 1px solid #4C7336;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #81C05C),
-    color-stop(1.0, #59A02F));
-}
-
-#more {
-  border: 1px solid #23517B;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #5E91C1),
-    color-stop(1.0, #2E689E));
-}
-
-#less {
-  border: 1px solid #23517B;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #5E91C1),
-    color-stop(1.0, #2E689E));
-}
-
-#back:hover {
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #8CCE62),
-    color-stop(1.0, #59A02F));
-}
-
-#back:active {
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #59A02F),
-    color-stop(1.0, #8CCE62));
-}
-
-#back:focus {
-  border: 1px solid #000;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #8CCE62),
-    color-stop(1.0, #59A02F));
+  line-height: 1;
+  padding: 6px 16px 7px 16px;
+  text-align: center;
+  text-shadow: 0 -1px 0 #4865e4;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
 }
 
-#more:hover{
-  border: 1px solid #23517B;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #68A1D6),
-    color-stop(1.0, #2E689E));
+.green:hover, .green:focus {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bc968), color-stop(44%,#7bbc57), color-stop(100%,#4f9727)); /* webkit */
+  border: 1px solid #456a2f;
+  border-bottom: 1px solid #456a2f;
+  -webkit-box-shadow: inset 0 1px 0 0 #a0d186, 0px 1px 2px rgba(0,0,0,0.3);;
 }
 
-#less:hover{
-  border: 1px solid #23517B;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #68A1D6),
-    color-stop(1.0, #2E689E));
+.green:active {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c260), color-stop(44%,#71b44c), color-stop(100%,#549d2c)); /* webkit */
+  border: 1px solid #3e612a;
+  border-top:1px solid #4c7336;
+  border-bottom:1px solid #547b3f;
+  -webkit-box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 
-#more:active{
-  border: 1px solid #23517B;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #2E689E),
-    color-stop(1.0, #68A1D6));
-}
-
-#less:active {
-  border: 1px solid #23517B;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #2E689E),
-    color-stop(1.0, #68A1D6));
-}
-
-#more:focus {
-  border: 1px solid #000;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #68A1D6),
-    color-stop(1.0, #2E689E));
-}
-
-#less:focus {
+.green:focus {
   border: 1px solid #000;
-  background-image: -webkit-gradient(linear,
-    left top, left bottom,
-    color-stop(0.3, #68A1D6),
-    color-stop(1.0, #2E689E));
 }
-
 </style>
 
 <script>
@@ -183,27 +114,8 @@ input {
     window.domAutomationController.setAutomationId(1);
     window.domAutomationController.send(cmd);
   }
-
-  function agreed(form) {
-    form.continue_button.disabled = !form.continue_button.disabled;
-  }
-
-  function toggle() {
-    var moreButton = document.getElementById('more')
-    var lessButton = document.getElementById('less')
-    var content = document.getElementById('detailinfo')
-    if (content.style.display == 'none'){
-      content.style.display = 'block'
-      moreButton.style.display = 'none'
-      lessButton.style.display = 'inline'
-    } else {
-      content.style.display = 'none'
-      moreButton.style.display = 'inline'
-      lessButton.style.display = 'none'
-    }
-
-  }
 </script>
+
 </head>
 <body oncontextmenu="return false;">
 <div class="background"><img src="../security/resources/ssl_roadblock_background.png" width="100%" height="100%" alt="background" onmousedown="return false;"/></div>
@@ -212,20 +124,18 @@ input {
     <div class="box">
       <div class="icon"><img src="shared/images/phishing_icon.png" alt="Malware Icon" onmousedown="return false;"/></div>
       <div class="title" i18n-content="headLine"></div>
-      <div class="main" i18n-values=".innerHTML:description1" style="margin-bottom:15px"></div>
+      <div class="main" i18n-values=".innerHTML:description1"></div>
       <div class="main" i18n-values=".innerHTML:description2"></div>
+      <div class="main" i18n-values=".innerHTML:description5" id="detailinfo" style="display:block"></div>
 
       <div class="main">
         <form class="submission">
-          <input type="button" class="nicebutton" id="back" i18n-values="value:back_button" onclick="sendCommand('takeMeBack')">
-          <input type="button" class="nicebutton" id="more" i18n-values="value:more_info_button" onclick="toggle()">
-          <input type="button" class="nicebutton" id="less" i18n-values="value:less_info_button" style="display:none" onclick="toggle()">
-          <br />
+          <input type="button" class="green" id="back" i18n-values="value:back_button" onclick="sendCommand('takeMeBack')">
+          <br>
         </form>
-        <span i18n-values=".innerHTML:description5" id="detailinfo" style="display:none"></span>
       </div>
 
-      <div class="main" i18n-values=".innerHTML:description3" style="margin-top:10px"></div>
+      <div class="main" i18n-values=".innerHTML:description3"></div>
 
     </div>
   </td>
diff --git a/chrome/browser/safe_browsing/safe_browsing_blocking_page.cc b/chrome/browser/safe_browsing/safe_browsing_blocking_page.cc
index 7ec0303..245aea7 100644
--- a/chrome/browser/safe_browsing/safe_browsing_blocking_page.cc
+++ b/chrome/browser/safe_browsing/safe_browsing_blocking_page.cc
@@ -303,10 +303,6 @@ void SafeBrowsingBlockingPage::PopulateMalwareStringDictionary(
 
   strings->SetString("back_button",
       l10n_util::GetStringUTF16(IDS_SAFE_BROWSING_MALWARE_BACK_BUTTON));
-  strings->SetString("more_info_button",
-      l10n_util::GetStringUTF16(IDS_SAFE_BROWSING_MALWARE_MORE_INFO_BUTTON));
-  strings->SetString("less_info_button",
-      l10n_util::GetStringUTF16(IDS_SAFE_BROWSING_MALWARE_LESS_INFO_BUTTON));
   strings->SetString("proceed_link",
       l10n_util::GetStringUTF16(IDS_SAFE_BROWSING_MALWARE_PROCEED_LINK));
   strings->SetString("textdirection", base::i18n::IsRTL() ? "rtl" : "ltr");