PrintPreview: Modified print preview WebUI to match the design mocks.

(1) Added page range example text.
(2) Added radio button to page range textbox.
(3) Changed "All" checkbox to radio button.

BUG=none
TEST=Enable print preview. Press ctrl+p on any tab. In the print preview tab, new pages option is displayed.

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

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

5 files changed, 60 insertions, 10 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index fe81204..1b6e653 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -5553,7 +5553,7 @@ Keep your key file in a safe place. You will need it to create new versions of y
         Cancel
       </message>
       <message name="IDS_PRINT_PREVIEW_OPTION_ALL_PAGES" desc="Option to print all pages.">
-        all
+        All
       </message>
       <message name="IDS_PRINT_PREVIEW_OPTION_BW" desc="Option to print in black and white.">
         Black and white
@@ -5573,6 +5573,24 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_PRINT_PREVIEW_OPTION_TWO_SIDED" desc="Option to do two-sided (duplex) printing.">
         two-sided
       </message>
+      <message name="IDS_PRINT_PREVIEW_PAGES_LABEL" desc="Page range option label.">
+        Pages
+      </message>
+      <message name="IDS_PRINT_PREVIEW_LAYOUT_LABEL" desc="Layout option label.">
+        Layout
+      </message>
+      <message name="IDS_PRINT_PREVIEW_COPIES_LABEL" desc="Copies option label.">
+        Copies
+      </message>
+      <message name="IDS_PRINT_PREVIEW_EXAMPLE_PAGE_RANGE_TEXT" desc="Example page range text.">
+        e.g. 1-5, 8, 11-13
+      </message>
+      <message name="IDS_PRINT_PREVIEW_PAGE_RANGE_TEXT" desc="Aria-label page range text.">
+        page range text box
+      </message>
+      <message name="IDS_PRINT_PREVIEW_PAGE_RANGE_RADIO" desc="Aria-label page range radio.">
+        page range radio button
+      </message>
 
       <!-- Load State -->
       <message name="IDS_LOAD_STATE_WAITING_FOR_CACHE">
diff --git a/chrome/browser/resources/print_preview.css b/chrome/browser/resources/print_preview.css
index f56a3cb..b4c36ec 100644
--- a/chrome/browser/resources/print_preview.css
+++ b/chrome/browser/resources/print_preview.css
@@ -91,3 +91,8 @@ select {
   border-color: transparent;
   padding: 0;
 }
+
+#example-text-div {
+  -webkit-margin-start: 26px;
+  color: gray;
+}
diff --git a/chrome/browser/resources/print_preview.html b/chrome/browser/resources/print_preview.html
index 3018f41..04060c7 100644
--- a/chrome/browser/resources/print_preview.html
+++ b/chrome/browser/resources/print_preview.html
@@ -23,13 +23,23 @@
   </div>
 
   <section>
-    <h3>Pages</h3>
+    <h3 i18n-content="pagesLabel"></h3>
     <div>
-      <input id="pages" type="text"></input>
-      <label>
-        <input id="all-pages" type="checkbox">
-        <span i18n-content="optionAllPages"></span>
-      </label>
+      <div>
+        <div class="radio">
+          <label>
+            <input id="all-pages" type="radio" name="pages-group" checked>
+            <span i18n-content="optionAllPages"></span>
+          </label>
+        </div>
+        <div class="radio">
+          <input id="print-pages" type="radio" name="pages-group"
+              i18n-values="aria-label:pageRangeRadio">
+          <input id="pages" type="text"
+              i18n-values="aria-label:pageRangeTextBox">
+          <div id="example-text-div" i18n-content="examplePageRangeText"></div>
+        </div>
+      </div>
       <div>
         <label>
           <input id="two-sided" type="checkbox">
@@ -40,7 +50,7 @@
   </section>
 
   <section>
-    <h3>Copies</h3>
+    <h3 i18n-content="copiesLabel"></h3>
     <div>
       <input id="copies" type="text" value="1"></input>
       <div>
@@ -53,7 +63,7 @@
   </section>
 
   <section>
-    <h3>Layout</h3>
+    <h3 i18n-content="layoutLabel"></h3>
     <div>
       <select id="layout">
         <option value="0" i18n-content="optionPortrait"></option>
@@ -63,7 +73,7 @@
   </section>
 
   <section>
-    <h3>Color</h3>
+    <h3 i18n-content="optionColor"></h3>
     <div>
       <select id="color">
         <option value="0" i18n-content="optionBw"></option>
diff --git a/chrome/browser/resources/print_preview.js b/chrome/browser/resources/print_preview.js
index 722f553..de44880 100644
--- a/chrome/browser/resources/print_preview.js
+++ b/chrome/browser/resources/print_preview.js
@@ -19,6 +19,7 @@ function load() {
     window.close();
   });
 
+  $('pages').addEventListener('input', selectPageRange);
   chrome.send('getPrinters');
   chrome.send('getPreview');
 };
@@ -154,4 +155,8 @@ function createPDFPlugin(url, pagesCount) {
   pdfPlugin.onload('onPDFLoad()');
 }
 
+function selectPageRange() {
+  $('print-pages').checked = true;
+}
+
 window.addEventListener('DOMContentLoaded', load);
diff --git a/chrome/browser/ui/webui/print_preview_ui_html_source.cc b/chrome/browser/ui/webui/print_preview_ui_html_source.cc
index 9e37c64..c953e61 100644
--- a/chrome/browser/ui/webui/print_preview_ui_html_source.cc
+++ b/chrome/browser/ui/webui/print_preview_ui_html_source.cc
@@ -35,6 +35,12 @@ void SetLocalizedStrings(DictionaryValue* localized_strings) {
   localized_strings->SetString(std::string("cancelButton"),
       l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_CANCEL_BUTTON));
 
+  localized_strings->SetString(std::string("copiesLabel"),
+      l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_COPIES_LABEL));
+  localized_strings->SetString(std::string("examplePageRangeText"),
+      l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_EXAMPLE_PAGE_RANGE_TEXT));
+  localized_strings->SetString(std::string("layoutLabel"),
+      l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_LAYOUT_LABEL));
   localized_strings->SetString(std::string("optionAllPages"),
       l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_OPTION_ALL_PAGES));
   localized_strings->SetString(std::string("optionBw"),
@@ -49,6 +55,12 @@ void SetLocalizedStrings(DictionaryValue* localized_strings) {
       l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_OPTION_PORTRAIT));
   localized_strings->SetString(std::string("optionTwoSided"),
       l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_OPTION_TWO_SIDED));
+  localized_strings->SetString(std::string("pagesLabel"),
+      l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_PAGES_LABEL));
+  localized_strings->SetString(std::string("pageRangeTextBox"),
+      l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_PAGE_RANGE_TEXT));
+  localized_strings->SetString(std::string("pageRangeRadio"),
+      l10n_util::GetStringUTF8(IDS_PRINT_PREVIEW_PAGE_RANGE_RADIO));
 }
 
 }  // namespace