Quick view: Reduce metadata box width when window is narrow

Reduce metadata box width from 320px to 250px when the window is narrow
(less than 720px).

Reduce quick view main content left/right padding when window is less
than 720px wide, from 32px to 4px.

Change audio art work to be 100% width and height so it resizes with
the window in the same way as video quick-view.

These three changes allows for a proper display of audio tag controls
when the window is narrow. See screenshot in the linked bug.

Change some CSS order, 0.2s to 200ms and -webkit prefix to comply with
presubmit.

in behaviour. Also checked with video, img and pdf quick views.

Test: Checked manually the visual with a window 480px wide, no change
Bug: 641629
Change-Id: I4af2c8ea83f9167c6c398c0002ee2df8ec6a5531
Reviewed-on: https://chromium-review.googlesource.com/c/1341439Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609172}

ui/file_manager/file_manager/foreground/elements/files_metadata_box.html

@@ -39,6 +39,15 @@
         margin-top: 31px;
         opacity: 0.24;
       }
+
+      @media only screen and (max-width: 720px) {
+        #box {
+          width: 240px;
+        }
+        .category {
+          margin: 12px 12px;
+        }
+      }
     </style>
     <div id="box">
       <div class="category" i18n-content="METADATA_BOX_GENERAL_INFO"></div>

ui/file_manager/file_manager/foreground/elements/files_metadata_entry.html

@@ -28,9 +28,9 @@
       }
 
       #key {
-        -webkit-margin-end: 16px;
         color: white;
         font-weight: 500;
+        margin-inline-end: 16px;
         overflow-wrap: break-word;
         vertical-align: bottom;
         width: 96px;
@@ -68,6 +68,22 @@
           width: 1.25em;
         }
       }
+
+      @media only screen and (max-width: 720px) {
+        #padding {
+          width: 12px;
+        }
+        #box {
+          width: 240px;
+        }
+        #key {
+          margin-inline-end: 8px;
+          width: 80px;
+        }
+        #value {
+          width: 140px;
+        }
+      }
     </style>
     <div id="box" hidden="[[!value]]">
       <div id="padding"></div>

ui/file_manager/file_manager/foreground/elements/files_quick_view.css

@@ -13,14 +13,14 @@ dialog {
   font-size: 100%;
   height: 100%;
   margin: 0;
+  opacity: 0;
   padding: 0;
   width: 100%;
-  opacity: 0;
 }
 
 dialog[open] {
   opacity: 1;
-  transition: opacity 0.2s;
+  transition: opacity 200ms;
 }
 
 dialog:focus {
@@ -48,9 +48,9 @@ paper-button:focus:not(:active) {
 }
 
 #audio-artwork {
-  height: 300px;
+  height: 100%;
   margin: 0 auto;
-  width: 300px;
+  width: 100%;
 }
 
 #mainPanel {
@@ -76,8 +76,8 @@ paper-button:focus:not(:active) {
 }
 
 :host-context(html[dir='rtl']) #contentPanel[metadata-box-active] {
-  margin-right: auto;
   margin-left: 320px;
+  margin-right: auto;
 }
 
 #metadata-button {
@@ -102,9 +102,9 @@ paper-button:focus:not(:active) {
   width: 100%;
 }
 
-#innerContentPanel[type="audio"],
-#innerContentPanel[type="image"],
-#innerContentPanel[type="video"] {
+#innerContentPanel[type='audio'],
+#innerContentPanel[type='image'],
+#innerContentPanel[type='video'] {
   align-self: center;
 }
 
@@ -176,8 +176,8 @@ iron-icon {
 }
 
 :host-context(html[dir='rtl']) #metadata-box {
-  right: auto;
   left: 0;
+  right: auto;
 }
 
 ::-webkit-scrollbar {
@@ -199,6 +199,16 @@ iron-icon {
   margin-top: 16px;
 }
 
+@media only screen and (max-width: 720px) {
+  #contentPanel[metadata-box-active] #innerContentPanel {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+  #contentPanel[metadata-box-active] {
+    margin-right: 250px;
+  }
+}
+
 /* Large generic thumbnails, used when a file does not have a thumbnail. */
 [generic-thumbnail] {
   background: -webkit-image-set(
@@ -209,7 +219,7 @@ iron-icon {
   height: 88px;
 }
 
-[generic-thumbnail=".folder"] {
+[generic-thumbnail='.folder'] {
   background-image: -webkit-image-set(
       url(../images/files/ui/quick_view/filetype_folder.png) 1x,
       url(../images/files/ui/quick_view/2x/filetype_folder.png) 2x);