[quickview] Add an active toogle state for the info-button in files-ng

Toogle (toggle :)) the info-button between being in an active state when
the metadata-box is active and not in an active state when the
metadata-box is not active. Also style the active state of the info
button for files-ng.

Change-Id: Ic54e3ce093551b6d517513149326eb3fc7f45c7e
Bug: 992824
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2066409Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Commit-Queue: Rachel Sugrono <rsugrono@google.com>
Cr-Commit-Position: refs/heads/master@{#743445}

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

@@ -253,6 +253,10 @@ iron-icon {
   display: none;
 }
 
+:host([files-ng]) #info-button[toogle] {
+  background-color: rgba(255, 255, 255, 12%);
+}
+
 :host([files-ng]) #info-button > .icon {
   -webkit-mask-image: url(../images/files/ui/info.svg);
 }

ui/file_manager/file_manager/foreground/elements/files_quick_view.js

@@ -193,6 +193,11 @@ const FilesQuickView = Polymer({
 
     if (this.hasAttribute('files-ng')) {
       this.metadataBoxActive = !this.metadataBoxActive;
+      if (this.metadataBoxActive) {
+        event.target.setAttribute('toogle', '');
+      } else {
+        event.target.removeAttribute('toogle');
+      }
     }
   },