Initial restyle of the gallery.

This patch introduces very basic restyle, which makes the gallery usable with the new ui. It addes the header which is draggable. This is quite tricky, since the header has to be outside of the iframe. -webkit-app-region: drag has no effect within an iframe.

Along the way, a opacity animation has been added to thumbnails.

TEST=Run with --file-manager-new-ui, click on a photo to get to the gallery. Try to move.
BUG=233485

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

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@195436 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/file_manager/css/file_manager.css

@@ -1229,7 +1229,6 @@ body[new-ui] .preview-thumbnails {
   padding-left: 25px;
 }
 
-
 .preview-thumbnails > .thumbnail {
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   background-color: #f2f2f2;
@@ -1268,6 +1267,20 @@ body[new-ui] .preview-thumbnails > .thumbnail > .img-container {
   width: 35px;
 }
 
+body[new-ui] .preview-thumbnails > .thumbnail > .img-container >
+    img.not(.cached) {
+  -webkit-animation: fadeIn 500ms ease-in;
+}
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .preview-thumbnails > .popup {
   -webkit-transform: translate(0, 3px) scale(0.95);
   background-color: #f2f2f2;
@@ -2049,3 +2062,13 @@ body[new-ui] menuitem#thumbnail-view {
     url('../images/files/ui/new-ui/button_mosaic_view.png') 1x,
     url('../images/files/ui/new-ui/2x/button_mosaic_view.png') 2x);
 }
+
+body[new-ui] #iframe-drag-area {
+  -webkit-app-region: drag;
+  height: 45px;
+  left: 64px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 101;
+}

chrome/browser/resources/file_manager/css/gallery.css

@@ -36,6 +36,10 @@ body {
   z-index: 200;
 }
 
+body[new-ui] .tools .gallery > .close {
+  opacity: 0;
+}
+
 /* The close icon is in a nested div so that its opacity can be manipulated
    independently from its parent (which can be dimmed when the crop frame
    overlaps it) */
@@ -166,17 +170,14 @@ body {
 
 /* Toolbar */
 
+body[new-ui] .gallery > .header,
 .gallery > .toolbar {
   -webkit-box-align: stretch;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   -webkit-transition: opacity 300ms ease;
   background-color: rgba(18, 18, 18, 0.875);
-  border-top: 1px solid rgba(31, 31, 31, 0.875);
-  bottom: 0;
-  box-sizing: border-box;
   display: -webkit-box;
-  height: 55px;
   min-width: 800px;
   opacity: 0;
   padding: 0 8px;
@@ -185,6 +186,30 @@ body {
   width: 100%;
 }
 
+body[new-ui] .gallery > .header,
+body[new-ui] .gallery > .toolbar {
+  background-color: rgba(30, 30, 30, 0.8);
+}
+
+body[new-ui] .gallery > .header {
+  border-bottom: 1px solid rgba(50, 50, 50, 0.8);
+  height: 45px;
+  top: 0;
+}
+
+.gallery > .toolbar {
+  border-top: 1px solid rgba(31, 31, 31, 0.7);
+  bottom: 0;
+  height: 55px;
+}
+
+body[new-ui] .gallery > .toolbar {
+  border-top: 1px solid rgba(50, 50, 50, 0.8);
+  bottom: 0;
+  height: 55px;
+}
+
+body[new-ui] .gallery[tools]:not([slideshow]) > .header,
 .gallery[tools]:not([slideshow]) > .toolbar {
   opacity: 1;
   pointer-events: auto;
@@ -507,6 +532,10 @@ body {
   position: absolute;
 }
 
+body[new-ui] .gallery .image-wrapper > img:not(.cached) {
+  -webkit-animation: fadeIn 500ms ease-in;
+}
+
 /* Editor buttons */
 
 .gallery .edit-bar-spacer {

chrome/browser/resources/file_manager/js/file_manager.js

@@ -1900,6 +1900,8 @@ DialogType.isModal = function(type) {
     this.dialogDom_.appendChild(this.filePopup_);
     this.filePopup_.focus();
     this.document_.body.setAttribute('overlay-visible', '');
+    if (util.platform.newUI())
+      this.document_.querySelector('#iframe-drag-area').hidden = false;
   };
 
   /**
@@ -1908,6 +1910,8 @@ DialogType.isModal = function(type) {
   FileManager.prototype.closeFilePopup_ = function() {
     if (this.filePopup_) {
       this.document_.body.removeAttribute('overlay-visible');
+      if (util.platform.newUI())
+        this.document_.querySelector('#iframe-drag-area').hidden = true;
       // The window resize would not be processed properly while the relevant
       // divs had 'display:none', force resize after the layout fired.
       setTimeout(this.onResize_.bind(this), 0);

chrome/browser/resources/file_manager/js/photo/gallery.js

@@ -249,6 +249,7 @@ Gallery.prototype.initDom_ = function() {
   util.createChild(closeButton);
   closeButton.addEventListener('click', this.onClose_.bind(this));
 
+  this.header_ = util.createChild(this.container_, 'header tool dimmable');
   this.toolbar_ = util.createChild(this.container_, 'toolbar tool dimmable');
 
   this.filenameSpacer_ = util.createChild(this.toolbar_, 'filename-spacer');
@@ -310,6 +311,9 @@ Gallery.prototype.initDom_ = function() {
   this.selectionModel_.addEventListener('change', this.onSelection_.bind(this));
 
   this.slideMode_.addEventListener('useraction', this.onUserAction_.bind(this));
+
+  if (util.platform.newUI())
+    document.body.setAttribute('new-ui', '');
 };
 
 /**

chrome/browser/resources/file_manager/js/photo/ribbon.js

@@ -300,8 +300,12 @@ Ribbon.prototype.renderThumbnail_ = function(index) {
   var url = item.getUrl();
 
   var cached = this.renderCache_[url];
-  if (cached)
+  if (cached) {
+    var img = cached.querySelector('img');
+    if (img)
+      img.classList.add('cached');
     return cached;
+  }
 
   var thumbnail = this.ownerDocument.createElement('div');
   thumbnail.className = 'ribbon-image';

chrome/browser/resources/file_manager/main_new_ui.html

@@ -333,5 +333,6 @@
     </div>
     <div id="drag-container"></div>
     <iframe id="command-dispatcher" hidden></iframe>
+    <div class="overlay-pane" id="iframe-drag-area" hidden></div>
   </body>
 </html>