Files.app: Re-design dialog footer.

BUG=402344
TEST=compared with the design spec manually.

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

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

ui/file_manager/file_manager/foreground/css/common.css

@@ -115,39 +115,6 @@ input.common[type='checkbox']::after {
   opacity: 0.7;
 }
 
-.buttonbar {
-  display: flex;
-  height: 31px;
-}
-
-.buttonbar button:active img {
-  opacity: 1.0;
-}
-
-.buttonbar button:hover img {
-  opacity: 0.72;
-}
-
-.buttonbar button[disabled] img {
-  opacity: 0.9;
-}
-
-.buttonbar button img {
-  display: inline-block;
-  margin: -3px 0 0;
-  opacity: 0.55;
-  vertical-align: middle;
-}
-
-.buttonbar button.menubutton span.disclosureindicator {
-  -webkit-transform: rotate(90deg);
-  float: right;
-  margin-left: 7px;
-  margin-top: 10px;
-  opacity: .8;
-  transition: none;
-}
-
 span.disclosureindicator {
   background-image: -webkit-image-set(
     url(../images/common/disclosure_arrow_dk_grey.png) 1x,

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -659,7 +659,98 @@ body.selecting #search-box {
   flex: none;
   flex-direction: row;
   outline: none;
-  padding: 10px;
+  padding: 8px 4px;
+}
+
+.dialog-footer .buttonbar {
+  display: flex;
+  height: 32px;
+}
+
+/* Copy style from paper-button for buttons on the footer. */
+.dialog-footer button {
+  -webkit-user-select: none;
+  background: transparent;
+  border: 0;
+  border-image: none;
+  border-radius: 3px;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin: 0 0.29em;
+  min-width: 5.14em;
+  outline: none;
+  text-align: center;
+  text-transform: uppercase;
+  z-index: 0;
+}
+
+.dialog-footer button:hover {
+  border-image: none;  /* Overrides the definition of common.css. */
+}
+
+.dialog-footer paper-button,
+.dialog-footer button {
+  height: 32px;
+  margin: 0 4px;
+  min-width: 92px;
+}
+
+.dialog-footer paper-button[disabled],
+.dialog-footer paper-button[disabled]:hover,
+.dialog-footer button[disabled],
+.dialog-footer button[disabled]:hover {
+  background-color: rgb(234, 234, 234);
+  color: rgb(168, 168, 168);
+}
+
+.dialog-footer .primary,
+.dialog-footer .primary:hover {
+  background-color: rgb(27, 168, 243);
+  color: white;
+}
+
+.dialog-footer .secondary,
+.dialog-footer .secondary:hover {
+  color: rgb(27, 168, 243);
+}
+
+.dialog-footer input {
+  color: red;
+  margin: 3px 0 !important;
+}
+
+.dialog-footer paper-input-decorator {
+  color: rgb(51, 51, 51);
+  padding: 4px 0;
+  width: 100%;
+}
+
+.dialog-footer paper-input-decorator /deep/ .unfocused-underline {
+  background-color: rgb(207, 207, 207);
+}
+
+.dialog-footer paper-input-decorator /deep/ .focused-underline {
+  background-color: rgb(27, 168, 243);
+}
+
+.dialog-footer select {
+  -webkit-appearance: none;
+  background: -webkit-image-set(
+     url(../images/common/disclosure_arrow_dk_grey_down.png) 1x,
+     url(../images/common/2x/disclosure_arrow_dk_grey_down.png) 2x) no-repeat
+     right transparent;
+  border: 0;
+  border-bottom: 1px solid rgb(207, 207, 207);
+  border-radius: 0;
+  color: rgb(51, 51, 51);
+  cursor: pointer;
+  margin: 0 32px 0 36px;
+  outline: none;
+  padding: 0 12px 0 0;
+}
+
+.dialog-footer select:hover {
+  border-image: none;
 }
 
 .progressable:not([progress]) .progress-bar,
@@ -731,14 +822,6 @@ html[dir='rtl'] .breadcrumbs .separator {
   -webkit-transform: scaleX(-1);
 }
 
-#filename-input-box input {
-  border: 1px solid #c8c8c8;
-  border-radius: 1px;
-  box-sizing: border-box;
-  height: 31px;  /* border-box */
-  margin-right: 30px;
-}
-
 .filelist-panel {
   display: flex;
   flex: auto;
@@ -1135,6 +1218,7 @@ li[renaming=''] .badge {
 }
 
 .dialog-footer > .right {
+  align-items: center;
   flex: none;
   justify-content: flex-end;
 }
@@ -1314,18 +1398,6 @@ li[renaming=''] .badge {
   flex: auto;
 }
 
-#filename-input-box input {
-  flex: auto;
-  padding: 1px 2px;
-}
-
-#filename-input-box .filename-label {
-  background-color: white;
-  color: #333;
-  flex: none;
-  padding-right: 4px;
-}
-
 body:not([type='saveas-file']) #filename-input-box {
   display: none;
 }

ui/file_manager/file_manager/main.html

@@ -454,13 +454,16 @@
     <div class="dialog-footer progressable" tabindex="-1"
          visibleif="saveas-file open-file open-multi-file folder upload-folder">
       <div class="left">
-        <button id="new-folder-button" i18n-content="NEW_FOLDER_BUTTON_LABEL"
+        <!-- TODO(fukino): Turn this button into paper-button when the CommandButton supports paper-button. -->
+        <button id="new-folder-button" class="primary"
+                i18n-content="NEW_FOLDER_BUTTON_LABEL"
                 visibleif="saveas-file folder" command="#new-folder"
-                tabindex="4">
+                tabindex="4" disabled>
         </button>
         <div id="filename-input-box" visibleif="saveas-file">
-          <div class="filename-label" i18n-content="FILENAME_LABEL"></div>
-          <input class="entry-name" type="text" spellcheck="false" tabindex="1">
+          <paper-input-decorator i18n-values="label:FILENAME_LABEL">
+            <input is="core-input" class="entry-name" type="text" spellcheck="false" tabindex="1">
+          </paper-input-decorator>
         </div>
         <div class="preparing-label" i18n-content="PREPARING_LABEL"></div>
         <div class="progress-bar" visibleif="saveas-file">
@@ -469,8 +472,8 @@
       </div>
       <div class="right buttonbar">
         <select class="file-type" hidden></select>
-        <button class="ok" disabled tabindex="2"></button>
-        <button class="cancel" i18n-content="CANCEL_LABEL" tabindex="3"></button>
+        <paper-button class="cancel secondary" i18n-content="CANCEL_LABEL" tabindex="3"></paper-button>
+        <paper-button class="ok primary" disabled tabindex="2"></paper-button>
       </div>
     </div>
     <div id="drag-container"></div>

ui/file_manager/integration_tests/file_manager/file_dialog.js

@@ -76,12 +76,12 @@ function openFileDialog(volumeName, expectedSet) {
         expectedSet,
         function(windowId) {
           return remoteCall.waitForElement(windowId,
-                                           '.button-panel button.cancel').
+                                           '.button-panel paper-button.cancel').
               then(function() {
                 return remoteCall.callRemoteTestUtil(
                     'fakeEvent',
                     windowId,
-                    ['.button-panel button.cancel', 'click']);
+                    ['.button-panel paper-button.cancel', 'click']);
               });
         });
   }).then(function(result) {
@@ -109,12 +109,13 @@ function openFileDialog(volumeName, expectedSet) {
         volumeName,
         expectedSet,
         function(windowId) {
-          return remoteCall.waitForElement(windowId, '.button-panel button.ok').
+          return remoteCall.waitForElement(windowId,
+                                           '.button-panel paper-button.ok').
               then(function() {
                 return remoteCall.callRemoteTestUtil(
                     'fakeEvent',
                     windowId,
-                    ['.button-panel button.ok', 'click']);
+                    ['.button-panel paper-button.ok', 'click']);
               });
         });
   }).then(function(result) {