Files.app: Update design of menus.

This CL updates design for following menus to comply with the latest MD.
- Add service menu
- Contextual menu
- Search dropdown
- Settings menu

BUG=464182
TEST=manually

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

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

4 files changed, 11 insertions, 22 deletions

diff --git a/ui/file_manager/file_manager/foreground/css/common.css b/ui/file_manager/file_manager/foreground/css/common.css
index 5db5a97..2cdfc33 100644
--- a/ui/file_manager/file_manager/foreground/css/common.css
+++ b/ui/file_manager/file_manager/foreground/css/common.css
@@ -125,7 +125,7 @@ cr-menu.chrome-menu {
   color: rgb(51, 51, 51);
   outline: none;
   overflow: hidden;
-  padding: 4px 0;
+  padding: 8px 0;
   transition: opacity 200ms ease-in;
   z-index: 600;  /* Must be below the overlay pane (1000). */
 }
@@ -147,7 +147,7 @@ cr-menu.chrome-menu > :not(hr) {
   background-repeat: no-repeat;
   line-height: 32px;
   outline: none;
-  padding: 0 12px;
+  padding: 0 8px;
 }
 
 html[dir='rtl'] cr-menu.chrome-menu > :not(hr) {
@@ -189,13 +189,12 @@ html[dir='rtl'] cr-menu.chrome-menu > .menuitem-button.right {
 }
 
 cr-menu.chrome-menu > cr-menu-item[disabled] {
-  color: rgb(219, 219, 219);
+  color: rgba(51, 51, 51, 0.20);
 }
 
 cr-menu.chrome-menu > cr-menu-item:not([disabled])[selected],
 cr-menu.chrome-menu > cr-menu-item:not([disabled]):active {
-  background-color: rgb(33, 150, 243);
-  color: white;
+  background-color: rgba(0, 0, 0, 0.08);
 }
 
 cr-menu.chrome-menu > hr {
@@ -218,11 +217,6 @@ cr-menu.chrome-menu > [checked]::before {
   display: none;
 }
 
-cr-menu[showShortcuts] >
-cr-menu-item[shortcutText][selected]:not([disabled])::after {
-  color: white;
-}
-
 /**
  * Ok/Cancel style buttons
  * Height: 31px (content:21px + border:5px * 2)
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index 7c68b46..a87c7e2 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -1797,7 +1797,7 @@ list.autocomplete-suggestions {
   flex: none;
   margin-top: 10px;
   overflow: hidden;
-  padding: 0;
+  padding: 8px 0;
   position: fixed;
   width: 260px !important; /* This overrides the value specified by script. */
   z-index: 550;
@@ -1806,17 +1806,17 @@ list.autocomplete-suggestions {
 list.autocomplete-suggestions > li {
   align-items: center;
   display: flex;
-  height: 40px;
+  height: 32px;
 }
 
 list.autocomplete-suggestions > li > div.detail-icon {
-  margin: 0 3px;
+  height: 32px;
+  width: 32px;
   flex: none;
 }
 
 list.autocomplete-suggestions > li > div.detail-text {
   flex: auto;
-  margin: 0 4px;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
@@ -1834,7 +1834,7 @@ list.autocomplete-suggestions > li > div[search-icon] {
 
 list.autocomplete-suggestions > [selected],
 list.autocomplete-suggestions > [lead] {
-  background-color: rgb(222, 243, 254);
+  background-color: rgba(0, 0, 0, 0.08);
 }
 
 #gear-menu {
diff --git a/ui/file_manager/file_manager/foreground/css/file_types.css b/ui/file_manager/file_manager/foreground/css/file_types.css
index 1ddfca7..3b14646 100644
--- a/ui/file_manager/file_manager/foreground/css/file_types.css
+++ b/ui/file_manager/file_manager/foreground/css/file_types.css
@@ -330,11 +330,6 @@ cr-menu-item.providers-menu-item .menu-icon {
   -webkit-filter: contrast(0) brightness(0.7143);
 }
 
-cr-menu-item.providers-menu-item[selected] .menu-icon {
-  /* Apply the rgb(255, 255, 255) mask. */
-  -webkit-filter: contrast(0) brightness(2);
-}
-
 cr-menu-item.providers-menu-item[command='#install-new-extension'] .menu-icon {
   background-image: -webkit-image-set(
       url(../images/files/ui/store.png) 1x,
diff --git a/ui/file_manager/file_manager/foreground/css/menu.css b/ui/file_manager/file_manager/foreground/css/menu.css
index b4776c6..74501da 100644
--- a/ui/file_manager/file_manager/foreground/css/menu.css
+++ b/ui/file_manager/file_manager/foreground/css/menu.css
@@ -32,7 +32,7 @@ cr-menu > [hidden] {
 
 cr-menu > [shortcutText]::after {
   -webkit-padding-start: 30px;
-  color: rgba(51, 51, 51, 0.5);
+  color: rgb(100, 100, 100);
   content: attr(shortcutText);
   float: right;
 }
@@ -44,7 +44,7 @@ html[dir='rtl'] cr-menu > [shortcutText]::after {
 /* Icon on the left of the item label for cr.ui.ProvidersMenuItem.
    TODO(mtomasz): Upstream to cr.ui.MenuItem. */
 cr-menu-item.providers-menu-item .menu-icon {
-  -webkit-margin-end: 12px;
+  -webkit-margin-end: 8px;
   background: no-repeat 0 center;
   display: inline-block;
   float: left;