MD Extensions: replace native dialog usages with cr-dialog.

Bug: 739920
Change-Id: I3a58618b410acd1ae66811af0a5688187279dbd5
Reviewed-on: https://chromium-review.googlesource.com/567233
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#486594}

chrome/browser/resources/md_extensions/load_error.html

+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 <link rel="import" href="chrome://extensions/code_section.html">
 
 <dom-module id="extensions-load-error">
   <template>
-    <style>
-      dialog {
-        @apply(--shadow-elevation-2dp);
-        border: none;
-        border-radius: 2px;
-        padding: 0;
-        width: 512px;
-      }
-
-      header {
-        -webkit-padding-end: 20px;
-        -webkit-padding-start: 24px;
-        align-items: center;
-        border-bottom: 1px solid var(--paper-grey-200);
-        color: #333;
-        display: flex;
-        font-size: 16px;
-        justify-content: space-between;
-        padding-bottom: 16px;
-        padding-top: 16px;
-      }
-
-      #close-button {
-        height: 20px;
-        padding: 0;
-        width: 20px;
-      }
-
-      #main {
-        -webkit-margin-end: 16px;
-        -webkit-margin-start: 24px;
+    <style include="cr-shared-style">
+      .body {
+        /* TODO(scottchen): make a shared font-size/line-height css file. */
         font-size: 13px;
         line-height: 20px;
-        max-width: 800px;
-        padding-bottom: 16px;
-        padding-top: 20px;
       }
 
       .description-row {
-        color: #333;
         display: flex;
       }
 
@@ -67,30 +34,10 @@
         padding: 8px 12px;
         text-transform: uppercase;
       }
-
-      #buttons-container {
-        display: flex;
-        justify-content: flex-end;
-        padding: 20px;
-      }
-
-      #dismiss {
-        color: #5a5a5a;
-      }
-
-      #retry {
-        -webkit-margin-start: 12px;
-        background-color: var(--google-blue-500);
-        color: white;
-      }
     </style>
-    <dialog>
-      <header>
-        <span>$i18n{loadErrorHeading}</span>
-        <paper-icon-button id="close-button" icon="close" on-tap="close">
-        </paper-icon-button>
-      </header>
-      <div id="main">
+    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
+      <div class="title">$i18n{loadErrorHeading}</div>
+      <div class="body">
         <div id="info">
           <div id="file" class="description-row">
             <span class="row-label">$i18n{loadErrorFileLabel}</span>
@@ -105,11 +52,11 @@
             could-not-display-code="$i18n{loadErrorCouldNotLoadManifest}">
         </extensions-code-section>
       </div>
-      <div id="buttons-container">
-        <paper-button id="dismiss" on-tap="close">
+      <div class="button-container">
+        <paper-button class="cancel-button" on-tap="close">
           $i18n{loadErrorCancel}
         </paper-button>
-        <paper-button id="retry" on-tap="onRetryTap_">
+        <paper-button class="action-button" on-tap="onRetryTap_">
           $i18n{loadErrorRetry}
         </paper-button>
       </div>

chrome/browser/resources/md_extensions/options_dialog.html

+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 
 <dom-module id="extensions-options-dialog">
   <template>
     <style>
-      dialog {
-        @apply(--shadow-elevation-2dp);
-        border: none;
-        border-radius: 2px;
-        padding: 0;
-      }
-      header {
-        align-items: center;
-        border-bottom: 1px solid var(--paper-grey-200);
-        color: var(--paper-grey-800);
-        display: flex;
-        justify-content: space-between;
-        padding: 12px 20px;
-      }
       #icon {
         -webkit-margin-end: 10px;
         height: 32px;
@@ -29,22 +15,26 @@
         align-items: center;
         display: flex;
       }
+
       extensionoptions {
-        display: inline-block;
-        height: 100%;
+        display: block;
+      }
+
+      dialog {
+        /* Initially as wide as possible. This will be adjusted by js-code. */
         width: 100%;
       }
     </style>
-    <dialog>
-      <header>
+
+    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
+      <div class="title">
         <div id="icon-and-name-wrapper">
           <img id="icon" src="[[data_.iconUrl]]"></img>
           <span>[[data_.name]]</span>
         </div>
-        <paper-icon-button id="close-button" icon="close" on-tap="close">
-        </paper-icon-button>
-      </header>
-      <div id="main"></div>
+      </div>
+      <div class="body" id="body">
+      </div>
     </dialog>
   </template>
   <script src="chrome://extensions/options_dialog.js"></script>

chrome/browser/resources/md_extensions/options_dialog.js

@@ -9,7 +9,8 @@ cr.define('extensions', function() {
   var MAX_WIDTH = 600;
   var MIN_HEIGHT = 300;
   var MIN_WIDTH = 300;
-  var HEADER_PADDING = 40;
+  var HEADER_EXTRA_SPACING = 50;  // 40 from x-button + 10 from img margin.
+  var DIALOG_PADDING = 32;        // Padding from cr-dialog's .body styling.
 
   var OptionsDialog = Polymer({
     is: 'extensions-options-dialog',
@@ -37,16 +38,20 @@ cr.define('extensions', function() {
       };
 
       var onSizeChanged = function(e) {
-        var minHeaderWidth = this.$['icon-and-name-wrapper'].offsetWidth +
-            this.$['close-button'].offsetWidth + HEADER_PADDING;
+        var minHeaderWidth = this.$$('#icon-and-name-wrapper img').offsetWidth +
+            this.$$('#icon-and-name-wrapper span').offsetWidth +
+            HEADER_EXTRA_SPACING;
         var minWidth = Math.max(minHeaderWidth, MIN_WIDTH);
-        this.$.main.style.height =
+        this.extensionOptions_.style.height =
             bounded(MIN_HEIGHT, MAX_HEIGHT, e.height) + 'px';
-        this.$.main.style.width = bounded(minWidth, MAX_WIDTH, e.width) + 'px';
+        this.extensionOptions_.style.width =
+            bounded(minWidth, MAX_WIDTH, e.width) + 'px';
+        this.$.dialog.style.width =
+            (bounded(minWidth, MAX_WIDTH, e.width) + DIALOG_PADDING) + 'px';
       }.bind(this);
 
       this.extensionOptions_.onpreferredsizechanged = onSizeChanged;
-      this.$.main.appendChild(this.extensionOptions_);
+      this.$.body.appendChild(this.extensionOptions_);
       this.$$('dialog').showModal();
       onSizeChanged({height: 0, width: 0});
     },

chrome/browser/resources/md_extensions/pack_dialog.html

+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
 
 <dom-module id="extensions-pack-dialog">
   <template>
-    <style>
-      dialog {
-        @apply(--shadow-elevation-2dp);
-        border: none;
-        border-radius: 2px;
-        padding: 0;
-        width: 512px;
-      }
-
-      header {
-        -webkit-padding-end: 20px;
-        -webkit-padding-start: 24px;
-        align-items: center;
-        border-bottom: 1px solid var(--paper-grey-200);
-        color: #333;
-        display: flex;
-        font-size: 16px;
-        justify-content: space-between;
-        padding-bottom: 16px;
-        padding-top: 16px;
-      }
-
-      #close-button {
-        height: 20px;
-        padding: 0;
-        width: 20px;
-      }
-
-      #main {
-        -webkit-margin-end: 16px;
-        -webkit-margin-start: 24px;
-        font-size: 13px;
-        max-width: 800px;
-        padding-bottom: 16px;
-        padding-top: 20px;
-      }
-
-      #description {
-        color: #333;
-      }
-
+    <style include="cr-shared-style">
       paper-button {
         align-items: center;
         border-radius: 2px;
@@ -61,6 +20,12 @@
         text-transform: uppercase;
       }
 
+      .body {
+        /* TODO(scottchen): make a shared font-size/line-height css file. */
+        font-size: 13px;
+        line-height: 20px;
+      }
+
       .file-input {
         display: flex;
         --paper-input-container-input: {
@@ -76,31 +41,12 @@
         -webkit-margin-start: 10px;
         color: var(--google-blue-500);
       }
-
-      #buttons-container {
-        display: flex;
-        justify-content: flex-end;
-        padding: 20px;
-      }
-
-      #dismiss {
-        color: #5a5a5a;
-      }
-
-      #confirm {
-        -webkit-margin-start: 12px;
-        background-color: var(--google-blue-500);
-        color: white;
-      }
     </style>
-    <dialog>
-      <header>
-        <span>$i18n{packDialogTitle}</span>
-        <paper-icon-button id="close-button" icon="close" on-tap="close">
-        </paper-icon-button>
-      </header>
-      <div id="main">
-        <div id="description">$i18n{packDialogContent}</div>
+
+    <dialog is="cr-dialog" id="dialog" close-text="$i18n{close}">
+      <div class="title">$i18n{packDialogTitle}</div>
+      <div class="body">
+        <div>$i18n{packDialogContent}</div>
         <div class="file-input">
           <paper-input id="root-dir" label="$i18n{packDialogExtensionRoot}"
               always-float-label value="[[packDirectory_]]">
@@ -118,11 +64,11 @@
           </paper-button>
         </div>
       </div>
-      <div id="buttons-container">
-        <paper-button id="dismiss" on-tap="close">
+      <div class="button-container">
+        <paper-button class="cancel-button" on-tap="close">
           $i18n{packDialogCancel}
         </paper-button>
-        <paper-button id="confirm" on-tap="onConfirmTap_">
+        <paper-button class="action-button" on-tap="onConfirmTap_">
           $i18n{packDialogConfirm}
         </paper-button>
       </div>

chrome/browser/ui/webui/extensions/extensions_ui.cc

@@ -24,6 +24,7 @@
 #include "chrome/grit/generated_resources.h"
 #include "chrome/grit/theme_resources.h"
 #include "components/google/core/browser/google_util.h"
+#include "components/strings/grit/components_strings.h"
 #include "content/public/browser/navigation_handle.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_contents_observer.h"
@@ -106,6 +107,10 @@ content::WebUIDataSource* CreateMdExtensionsSource() {
 
   source->SetJsonPath("strings.js");
 
+  // Add common strings.
+  source->AddLocalizedString("close", IDS_CLOSE);
+
+  // Add extension-specific strings.
   source->AddLocalizedString("title",
                              IDS_MANAGE_EXTENSIONS_SETTING_WINDOWS_TITLE);
   source->AddLocalizedString("toolbarTitle", IDS_MD_EXTENSIONS_TOOLBAR_TITLE);

chrome/test/data/webui/extensions/extension_load_error_test.js

@@ -61,11 +61,11 @@ cr.define('extension_load_error_tests', function() {
         expectTrue(isDialogVisible());
 
         mockDelegate.testClickingCalls(
-            loadError.$$('#retry'), 'retryLoadUnpacked', [fakeGuid]);
+            loadError.$$('.action-button'), 'retryLoadUnpacked', [fakeGuid]);
         expectFalse(isDialogVisible());
 
         loadError.show();
-        MockInteractions.tap(loadError.$$('#dismiss'));
+        MockInteractions.tap(loadError.$$('.cancel-button'));
         expectFalse(isDialogVisible());
       });
 

chrome/test/data/webui/extensions/extension_options_dialog_test.js

@@ -46,11 +46,11 @@ cr.define('extension_options_dialog_tests', function() {
             assert(optionsDialog.$$('#icon-and-name-wrapper span')).
                 textContent.trim());
 
-        var mainDiv = optionsDialog.$.main;
+        var optionEle = optionsDialog.$$('extensionoptions');
 
         // To start, the options page should be set to the min width/height.
-        expectEquals(MIN_HEIGHT, mainDiv.style.height);
-        expectEquals(MIN_WIDTH, mainDiv.style.width);
+        expectEquals(MIN_HEIGHT, optionEle.style.height);
+        expectEquals(MIN_WIDTH, optionEle.style.width);
 
         var mockOptions = optionsDialog.extensionOptions_;
         expectEquals(data.id, mockOptions.extension);
@@ -58,19 +58,19 @@ cr.define('extension_options_dialog_tests', function() {
         // Setting the preferred size to something below the min width/height
         // shouldn't change the actual width/height.
         mockOptions.onpreferredsizechanged({height: 100, width: 100});
-        expectEquals(MIN_HEIGHT, mainDiv.style.height);
-        expectEquals(MIN_WIDTH, mainDiv.style.width);
+        expectEquals(MIN_HEIGHT, optionEle.style.height);
+        expectEquals(MIN_WIDTH, optionEle.style.width);
 
         // Setting the preferred size to between the min and max dimensions
         // should change the dimensions.
         mockOptions.onpreferredsizechanged({height: 500, width: 400});
-        expectEquals('500px', mainDiv.style.height);
-        expectEquals('400px', mainDiv.style.width);
+        expectEquals('500px', optionEle.style.height);
+        expectEquals('400px', optionEle.style.width);
 
         // Max values should pin the dialog.
         mockOptions.onpreferredsizechanged({height: 900, width: 400});
-        expectEquals(MAX_HEIGHT, mainDiv.style.height);
-        expectEquals('400px', mainDiv.style.width);
+        expectEquals(MAX_HEIGHT, optionEle.style.height);
+        expectEquals('400px', optionEle.style.width);
 
         mockOptions.onclose();
         expectFalse(isDialogVisible());
@@ -88,15 +88,15 @@ cr.define('extension_options_dialog_tests', function() {
                 textContent.trim());
         // The width of the dialog should be set to match the width of the
         // header, which is greater than the default min width.
-        expectTrue(mainDiv.style.width > MIN_WIDTH, mainDiv.style.height);
-        expectEquals(MIN_HEIGHT, mainDiv.style.height);
+        expectTrue(optionsDialog.$.dialog.style.width > MIN_WIDTH);
+        expectEquals(MIN_HEIGHT, optionEle.style.height);
 
         // Going back to an extension with a shorter name should resize the
         // dialog.
         optionsDialog.close();
         optionsDialog.show(data);
-        expectEquals(MIN_HEIGHT, mainDiv.style.height);
-        expectEquals(MIN_WIDTH, mainDiv.style.width);
+        expectEquals(MIN_HEIGHT, optionEle.style.height);
+        expectEquals(MIN_WIDTH, optionEle.style.width);
       });
     });
   }

chrome/test/data/webui/extensions/extension_pack_dialog_test.js

@@ -88,7 +88,7 @@ cr.define('extension_pack_dialog_tests', function() {
         mockDelegate.keyPromise.resolve(kKeyPath);
 
         return Promise.all(promises).then(function() {
-          MockInteractions.tap(packDialog.$$('#confirm'));
+          MockInteractions.tap(packDialog.$$('.action-button'));
           expectEquals(kRootPath, mockDelegate.rootPath);
           expectEquals(kKeyPath, mockDelegate.keyPath);
           expectFalse(isDialogVisible());

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

@@ -62,11 +62,6 @@
         padding: 16px;
       }
 
-      :host ::content .button-container .cancel-button {
-        -webkit-margin-end: 8px;
-        color: var(--paper-grey-600);
-      }
-
       :host ::content .footer {
         border-bottom-left-radius: inherit;
         border-bottom-right-radius: inherit;

ui/webui/resources/cr_elements/shared_style_css.html

@@ -36,6 +36,8 @@
         --paper-button-flat-keyboard-focus: {
           background: rgba(0, 0, 0, .12);
         };
+        -webkit-margin-end: 8px;
+        color: var(--paper-grey-600);
       }
 
       .action-button,