Print Preview Componentization: Add advanced settings

Refactor cr-dialog styling from destination settings dialog and share
with advanced settings.

Bug: 773928, 812092
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I870d5831983af5fca56986314f06deb87dc9b242
Reviewed-on: https://chromium-review.googlesource.com/920775
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#537522}

chrome/browser/resources/print_preview/new/advanced_options_settings.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
+<link rel="import" href="../data/destination.html">
+<link rel="import" href="advanced_settings_dialog.html">
 <link rel="import" href="button_css.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="settings_behavior.html">
 <link rel="import" href="settings_section.html">
 
 <dom-module id="print-preview-advanced-options-settings">
@@ -15,11 +19,16 @@
     <print-preview-settings-section>
       <span slot="title">$i18n{advancedOptionsLabel}</span>
       <div slot="controls">
-        <button disabled$="[[disabled]]">
+        <button disabled$="[[disabled]]" on-click="onButtonClick_">
           $i18n{showAdvancedOptions}
         </button>
       </div>
     </print-preview-settings-section>
+    <template is="cr-lazy-render" id="advancedDialog">
+      <print-preview-advanced-dialog
+          settings="{{settings}}" destination="[[destination]]">
+      </print-preview-advanced-dialog>
+    </template>
   </template>
   <script src="advanced_options_settings.js"></script>
 </dom-module>

chrome/browser/resources/print_preview/new/advanced_options_settings.js

@@ -5,7 +5,22 @@
 Polymer({
   is: 'print-preview-advanced-options-settings',
 
+  behaviors: [SettingsBehavior],
+
   properties: {
     disabled: Boolean,
+
+    /** @type {!print_preview.Destination} */
+    destination: Object,
+  },
+
+  /** @private */
+  onButtonClick_: function() {
+    const dialog = this.$.advancedDialog.get();
+    // This async() call is a workaround to prevent a DCHECK - see
+    // https://crbug.com/804047.
+    this.async(() => {
+      dialog.show();
+    }, 1);
   },
 });

chrome/browser/resources/print_preview/new/advanced_settings_dialog.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="../data/destination.html">
+<link rel="import" href="settings_behavior.html">
+<link rel="import" href="button_css.html">
+<link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="search_dialog_css.html">
+
+<dom-module id="print-preview-advanced-dialog">
+  <style include="print-preview-shared search-dialog button"></style>
+  <template>
+    <dialog is="cr-dialog" id="dialog" on-close="onCloseOrCancel_">
+      <div slot="title">
+        <div>[[i18n('advancedSettingsDialogTitle', destination.displayName)]]
+        </div>
+        <print-preview-search-box id="searchBox"
+            label="$i18n{advancedSettingsSearchBoxPlaceholder}"
+            search-query="{{searchQuery_}}">
+        </print-preview-search-box>
+      </div>
+      <div slot="button-container">
+        <button on-click="onCancelButtonClick_">$i18n{cancel}</button>
+      </div>
+    </dialog>
+  </template>
+  <script src="advanced_settings_dialog.js"></script>
+</dom-module>

chrome/browser/resources/print_preview/new/advanced_settings_dialog.js

+// Copyright 2018 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.
+
+Polymer({
+  is: 'print-preview-advanced-dialog',
+
+  behaviors: [SettingsBehavior, I18nBehavior],
+
+  properties: {
+    /** @type {!print_preview.Destination} */
+    destination: Object,
+
+    /** @private {?RegExp} */
+    searchQuery_: {
+      type: Object,
+      value: null,
+    },
+  },
+
+  /** @private */
+  onCloseOrCancel_: function() {
+    if (this.searchQuery)
+      this.$.searchBox.setValue('');
+  },
+
+  /** @private */
+  onCancelButtonClick_: function() {
+    this.$.dialog.cancel();
+  },
+
+  show: function() {
+    this.$.dialog.showModal();
+  },
+
+  close: function() {
+    this.$.dialog.close();
+  },
+});

chrome/browser/resources/print_preview/new/app.html

@@ -116,7 +116,7 @@
             hidden$="[[!settings.otherOptions.available]]">
         </print-preview-other-options-settings>
         <print-preview-advanced-options-settings settings="{{settings}}"
-            disabled="[[controlsDisabled_]]"
+            destination="[[destination_]]" disabled="[[controlsDisabled_]]"
             hidden$="[[!settings.vendorItems.available]]">
         </print-preview-advanced-options-settings>
       </div>

chrome/browser/resources/print_preview/new/compiled_resources2.gyp

@@ -132,6 +132,9 @@
     {
       'target_name': 'advanced_options_settings',
       'dependencies': [
+        '../data/compiled_resources2.gyp:destination',
+        'advanced_settings_dialog',
+        'settings_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -188,6 +191,7 @@
         '../data/compiled_resources2.gyp:destination_store',
         '../data/compiled_resources2.gyp:user_info',
         'destination_list',
+        'print_preview_search_box',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -198,7 +202,6 @@
         '../compiled_resources2.gyp:native_layer',
         '../data/compiled_resources2.gyp:destination',
         'destination_list_item',
-        'print_preview_search_box',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -210,6 +213,17 @@
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'advanced_settings_dialog',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/cr_dialog/compiled_resources2.gyp:cr_dialog',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '../data/compiled_resources2.gyp:destination',
+        'print_preview_search_box',
+        'settings_behavior',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
     {
       'target_name': 'print_preview_search_box',
       'dependencies': [

chrome/browser/resources/print_preview/new/destination_dialog.html

@@ -11,40 +11,16 @@
 <link rel="import" href="destination_list.html">
 <link rel="import" href="print_preview_search_box.html">
 <link rel="import" href="print_preview_shared_css.html">
+<link rel="import" href="search_dialog_css.html">
 <link rel="import" href="select_css.html">
 
 <dom-module id="print-preview-destination-dialog">
   <template>
-    <style include="print-preview-shared button action-link select cr-hidden-style">
-      :host #dialog::backdrop {
-        background-color: rgba(255, 255, 255, 0.75);
-      }
-
+    <style include="print-preview-shared button action-link select cr-hidden-style search-dialog">
       :host #dialog {
-        --cr-dialog-close-image: {
-          background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
-        }
-        --cr-dialog-close-image-active: {
-          background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
-        }
-        --cr-dialog-close-image-hover: {
-          background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
-        }
-        --cr-icon-ripple-size: 0;
-        --cr-icon-size: 14px;
-        --cr-dialog-body: {
-          box-sizing: border-box;
-          padding-top: 0;
-        }
-        --cr-dialog-wrapper: {
-          max-height: calc(100vh - 40px);
-        }
-        box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
-          0 2px 6px rgba(0, 0, 0, 0.15);
         width: 640px;
       }
 
-      :host #searchBox,
       :host .user-info {
         font-size: calc(13/15 * 1em);
         margin-top: 14px;
@@ -58,10 +34,6 @@
         width: auto
       }
 
-      :host #lists {
-        height: 100vh;
-      }
-
       :host #dialog .cloudprint-promo {
         align-items: center;
         background-color: #f5f5f5;
@@ -107,9 +79,8 @@
           url(chrome://theme/IDR_CLOSE_DIALOG_P@2x) 2x);
       }
     </style>
-    <dialog is="cr-dialog" id="dialog" on-cancel="onCloseOrCancel_"
-        on-close="onCloseOrCancel_">
-      <div slot="title" id="titleBox">
+    <dialog is="cr-dialog" id="dialog" on-close="onCloseOrCancel_">
+      <div slot="title">
         <div>$i18n{destinationSearchTitle}</div>
         <div class="user-info" hidden$="[[!userInfo.loggedIn]]">
           <label class="account-select-label" id="accountSelectLabel">
@@ -130,7 +101,7 @@
             label="$i18n{searchBoxPlaceholder}" search-query="{{searchQuery_}}">
         </print-preview-search-box>
       </div>
-      <div slot="body" scrollable id="lists">
+      <div slot="body" scrollable>
         <print-preview-destination-list
             destinations="[[recentDestinationList_]]"
             search-query="[[searchQuery_]]"
@@ -144,7 +115,7 @@
             on-destination-selected="onDestinationSelected_">
         </print-preview-destination-list>
       </div>
-      <div slot="button-container" id="buttons">
+      <div slot="button-container">
         <button class="cancel-button" on-tap="onCancelButtonTap_">
           $i18n{cancel}
         </button>

chrome/browser/resources/print_preview/new/search_dialog_css.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="button_css.html">
+<link rel="import" href="print_preview_search_box.html">
+<link rel="import" href="print_preview_shared_css.html">
+
+<dom-module id="search-dialog">
+  <template>
+    <style include="print-preview-shared button">
+      #dialog::backdrop {
+        background-color: rgba(255, 255, 255, 0.75);
+      }
+
+      #dialog {
+        --cr-dialog-close-image: {
+          background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
+        }
+        --cr-dialog-close-image-active: {
+          background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
+        }
+        --cr-dialog-close-image-hover: {
+          background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
+        }
+        --cr-icon-ripple-size: 0;
+        --cr-icon-size: 14px;
+        --cr-dialog-body: {
+          box-sizing: border-box;
+          padding-top: 0;
+        }
+        --cr-dialog-wrapper: {
+          max-height: calc(100vh - 40px);
+        }
+        box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2),
+          0 2px 6px rgba(0, 0, 0, 0.15);
+      }
+
+      #searchBox {
+        font-size: calc(13/15 * 1em);
+        margin-top: 14px;
+      }
+
+      #body {
+        height: 100vh;
+      }
+    </style>
+  </template>
+</dom-module>

chrome/browser/resources/print_preview/print_preview_resources.grd

@@ -236,6 +236,12 @@
       <structure name="IDR_PRINT_PREVIEW_NEW_ADVANCED_OPTIONS_SETTINGS_JS"
                  file="new/advanced_options_settings.js"
                  type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_ADVANCED_SETTINGS_DIALOG_HTML"
+                 file="new/advanced_settings_dialog.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_ADVANCED_SETTINGS_DIALOG_JS"
+                 file="new/advanced_settings_dialog.js"
+                 type="chrome_html" />
       <structure name="IDR_PRINT_PREVIEW_NEW_NUMBER_SETTINGS_SECTION_HTML"
                  file="new/number_settings_section.html"
                  type="chrome_html" />
@@ -291,6 +297,9 @@
       <structure name="IDR_PRINT_PREVIEW_NEW_THROBBER_CSS_HTML"
                  file="new/throbber_css.html"
                  type="chrome_html"/>
+      <structure name="IDR_PRINT_PREVIEW_NEW_SEARCH_DIALOG_CSS_HTML"
+                 file="new/search_dialog_css.html"
+                 type="chrome_html"/>
       <structure name="IDR_PRINT_PREVIEW_NEW_STRINGS_HTML"
                  file="new/strings.html"
                  type="chrome_html" />