Print Preview UI changes:

- show 'More options' section only if there are more than 6 sections
  avaialble
- add ARIA labels for the color, copies, margins, layout and paper
  settings
- group Paper size section with other collapsible sections
- adjust Advanced options button size to fit the text

BUG=397741

Review URL: https://codereview.chromium.org/556363003

Cr-Commit-Position: refs/heads/master@{#294287}

chrome/browser/resources/print_preview/print_preview.html

@@ -58,9 +58,9 @@
         <include src="settings/destination_settings.html"/>
         <include src="settings/page_settings.html"/>
         <include src="settings/copies_settings.html"/>
-        <include src="settings/media_size_settings.html"/>
         <include src="settings/layout_settings.html"/>
         <include src="settings/color_settings.html"/>
+        <include src="settings/media_size_settings.html"/>
         <include src="settings/margin_settings.html"/>
         <include src="settings/other_options_settings.html"/>
         <include src="settings/advanced_options_settings.html"/>

chrome/browser/resources/print_preview/settings/advanced_options_settings.css

@@ -3,6 +3,7 @@
  * found in the LICENSE file. */
 
 #advanced-options-settings .advanced-options-settings-button {
-  height: 28px;
   margin: 10px 0;
+  min-height: 28px;
+  width: 100%;
 }

chrome/browser/resources/print_preview/settings/color_settings.html

@@ -2,9 +2,9 @@
      class="color-settings two-column"
      aria-live="polite"
      hidden>
-  <h1 i18n-content="optionColor"></h1>
+  <h1 id="color-label" i18n-content="optionColor"></h1>
   <div class="right-column">
-    <select class="color-settings-select">
+    <select class="color-settings-select" aria-labelledby="color-label">
       <option i18n-content="optionBw" value="bw" selected></option>
       <option i18n-content="optionColor" value="color"></option>
     </select>

chrome/browser/resources/print_preview/settings/copies_settings.html

 <div id="copies-settings" class="two-column" hidden>
-  <h1 i18n-content="copiesLabel"></h1>
+  <h1 id="copies-label" i18n-content="copiesLabel"></h1>
   <div class="right-column">
     <div id="copies-settings-box">
-      <input class="copies" type="text" value="1" maxlength="3">
+      <input class="copies" type="text" value="1" maxlength="3"
+             aria-labelledby="copies-label">
       <button class="increment" i18n-values="title:incrementTitle;">+</button>
       <button class="decrement" i18n-values="title:decrementTitle;">–</button>
       <div class="collate-container checkbox" aria-live="polite" hidden><label>
-        <input class="collate" type="checkbox" checked>
-        <span i18n-content="optionCollate"></span>
+        <input class="collate" type="checkbox" checked
+               aria-labelledby="copies-collate-label">
+        <span id="copies-collate-label" i18n-content="optionCollate"></span>
       </label></div>
     </div>
     <span class="hint" i18n-content="copiesInstruction" aria-live="polite">

chrome/browser/resources/print_preview/settings/layout_settings.html

 <div id="layout-settings" class="two-column layout-settings" hidden>
-  <h1 i18n-content="layoutLabel"></h1>
+  <h1 id="layout-label" i18n-content="layoutLabel"></h1>
   <div class="right-column">
-    <select class="layout-settings-select">
+    <select class="layout-settings-select" aria-labelledby="layout-label">
       <option i18n-content="optionPortrait" value="portrait" selected></option>
       <option i18n-content="optionLandscape" value="landscape"></option>
     </select>

chrome/browser/resources/print_preview/settings/margin_settings.html

 <div id="margin-settings" class="two-column margin-settings" hidden>
-  <h1 i18n-content="marginsLabel"></h1>
+  <h1 id="margin-label" i18n-content="marginsLabel"></h1>
   <div class="right-column">
-    <select class="margin-settings-select">
+    <select class="margin-settings-select" aria-labelledby="margin-label">
       <!-- The order of these options must match the natural order of their
       values, which come from print_preview.ticket_items.MarginsType.Value. -->
       <option i18n-content="defaultMargins" value="0" selected></option>

chrome/browser/resources/print_preview/settings/media_size_settings.html

 <div id="media-size-settings" class="two-column media-size-settings" hidden>
-  <h1 i18n-content="mediaSizeLabel"></h1>
+  <h1 id="media-size-label" i18n-content="mediaSizeLabel"></h1>
   <div class="right-column">
-    <select class="media-size-settings-select"></select>
+    <select class="media-size-settings-select"
+            aria-labelledby="media-size-label">
+    </select>
   </div>
 </div>

chrome/browser/resources/print_preview/settings/more_settings.html

-<div id="more-settings" class="more-settings" hidden>
+<div id="more-settings" class="more-settings collapsible" hidden>
   <div class="more-settings-icon more-settings-icon-plus"></div>
   <button class="link-button more-settings-label"></button>
 </div>

chrome/browser/resources/print_preview/settings/more_settings.js

@@ -74,9 +74,18 @@ cr.define('print_preview', function() {
       iconEl.classList.toggle('more-settings-icon-plus', !all);
       iconEl.classList.toggle('more-settings-icon-minus', all);
 
-      var hasSectionsToToggle = this.settingsSections_.some(function(section) {
-        return section.hasCollapsibleContent();
-      });
+      var availableSections = this.settingsSections_.reduce(
+          function(count, section) {
+            return count + (section.isAvailable() ? 1 : 0);
+          }, 0);
+
+      // Magic 6 is chosen as the number of sections when it still feels like
+      // manageable and not too crowded.
+      var hasSectionsToToggle =
+          availableSections > 6 &&
+          this.settingsSections_.some(function(section) {
+            return section.hasCollapsibleContent();
+          });
 
       if (hasSectionsToToggle)
         fadeInElement(this.getElement());

chrome/test/data/webui/print_preview.js

@@ -431,19 +431,9 @@ TEST_F('PrintPreviewWebUITest', 'SourceIsPDFCapabilities', function() {
   capsSetEvent.settingsInfo = getCddTemplate("FooDevice");
   this.nativeLayer_.dispatchEvent(capsSetEvent);
 
-  var moreSettingsDiv = $('more-settings');
   var otherOptionsDiv = $('other-options-settings');
 
-  // Check that options are collapsed (section is visible, because duplex is
-  // available).
   checkSectionVisible(otherOptionsDiv, true);
-  checkElementDisplayed(
-      otherOptionsDiv.querySelector('.fit-to-page-container'), false);
-  checkSectionVisible($('media-size-settings'), false);
-  // Expand it.
-  checkSectionVisible(moreSettingsDiv, true);
-  moreSettingsDiv.click();
-
   checkElementDisplayed(
       otherOptionsDiv.querySelector('.fit-to-page-container'), true);
   expectTrue(
@@ -475,15 +465,9 @@ TEST_F('PrintPreviewWebUITest', 'PrintScalingDisabledForPlugin', function() {
   cr.dispatchSimpleEvent(
       this.nativeLayer_, print_preview.NativeLayer.EventType.DISABLE_SCALING);
 
-  var moreSettingsDiv = $('more-settings');
   var otherOptionsDiv = $('other-options-settings');
 
-  // Check that options are collapsed (section is visible, because duplex is
-  // available).
   checkSectionVisible(otherOptionsDiv, true);
-  // Expand it.
-  checkSectionVisible(moreSettingsDiv, true);
-  moreSettingsDiv.click();
 
   checkElementDisplayed(
       otherOptionsDiv.querySelector('.fit-to-page-container'), true);