Gallery: Make the minimum window size larger.

The previous minimum size does not fit the controls and the trach icon was
cropped.

BUG=None
TEST=manually

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

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

ui/file_manager/gallery/css/gallery.css

@@ -152,7 +152,7 @@ input[type='checkbox']:checked {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: start;
   background-color: rgba(30, 30, 30, 0.8);
-  display: -webkit-box;
+  display: flex;
   left: 0;
   opacity: 0;
   padding: 0 10px;
@@ -180,7 +180,7 @@ input[type='checkbox']:checked {
   border-top: 1px solid rgba(50, 50, 50, 0.8);
   bottom: 0;
   height: 55px;
-  min-width: 800px;
+  overflow: hidden;
 }
 
 .gallery[tools]:not([slideshow]) > .header,
@@ -283,10 +283,12 @@ input[type='checkbox']:checked {
 /* Filename */
 
 .gallery .filename-spacer {
+  flex: 0 1 auto;
   height: 100%;
+  min-width: 140px;
   overflow: hidden;
   position: relative;
-  width: 270px;
+  width: 210px;
 }
 
 .gallery .filename-spacer > * {
@@ -398,6 +400,7 @@ input[type='checkbox']:checked {
 }
 
 /* Bubble */
+
 .gallery .toolbar .bubble {
   bottom: 65px;
   font-size: 85%;
@@ -410,31 +413,31 @@ input[type='checkbox']:checked {
   display: none;
 }
 
+/* Middle spacer */
+
+.gallery .middle-spacer {
+  align-items: center;
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+}
+
 /* Toolbar buttons */
 
 .gallery .button-spacer {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
+  display: flex;
+  flex: none;
+  width: 210px; /* 42px button x 5 */
 }
 
 /* Thumbnails */
 
 .gallery .ribbon-spacer {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
-  display: -webkit-box;
-  height: 100%;
-  left: 280px;
-  position: absolute;
-  right: 280px;
+  height: 55px;
+  margin-bottom: -55px;
 }
 
 .gallery .toolbar .ribbon {
-  -webkit-box-flex: 0;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: start;
-  display: -webkit-box;
   height: 100%;
   overflow: hidden;
   transition: opacity 180ms linear, visibility 0 linear;
@@ -448,12 +451,9 @@ input[type='checkbox']:checked {
 }
 
 .gallery .ribbon-image {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
   border: 2px solid rgba(255, 255, 255, 0);  /* transparent white */
   cursor: pointer;
-  display: -webkit-box;
+  display: inline-block;
   height: 47px;
   margin: 2px;
   overflow: hidden;
@@ -517,10 +517,10 @@ input[type='checkbox']:checked {
   height: 100%;
   left: 280px;
   opacity: 0;
-  position: absolute;
   right: 280px;
   transition: opacity 180ms linear, visibility 0 linear 180ms;
   visibility: hidden;
+  margin-bottom: -55px;
 }
 
 .gallery .toolbar .edit-main {
@@ -543,10 +543,6 @@ input[type='checkbox']:checked {
 .gallery .toolbar button,
 .gallery .header button[disabled],
 .gallery .toolbar button[disabled] {
-  -webkit-box-align: center;
-  -webkit-box-flex: 0;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: end;
   background-color: rgba(0, 0, 0, 0);
   background-position: center;
   background-repeat: no-repeat;
@@ -554,7 +550,8 @@ input[type='checkbox']:checked {
   box-shadow: none;
   color: white;
   cursor: pointer;
-  display: -webkit-box;
+  display: inline-block;
+  flex: none;
   opacity: 0.99;  /* Workaround for http://crosbug.com/21065 */
   padding: 1px;  /* Instead of a border. */
   position: relative;
@@ -714,95 +711,95 @@ input[type='checkbox']:checked {
   display: none;
 }
 
-.gallery[mode='slide'] > .toolbar > button.mode {
+.gallery[mode='slide'] > .toolbar button.mode {
   background-image: -webkit-image-set(
       url(../images/100/icon_mosaic.png) 1x,
       url(../images/200/icon_mosaic.png) 2x);
 }
 
-.gallery[mode='slide'] > .toolbar > button.mode:active {
+.gallery[mode='slide'] > .toolbar button.mode:active {
   background-image: -webkit-image-set(
       url(../images/100/icon_mosaic_selected.png) 1x,
       url(../images/200/icon_mosaic_selected.png) 2x);
 }
 
-.gallery[mode='mosaic'] > .toolbar > button.mode {
+.gallery[mode='mosaic'] > .toolbar button.mode {
   background-image: -webkit-image-set(
       url(../images/100/icon_1up.png) 1x,
       url(../images/200/icon_1up.png) 2x);
 }
 
-.gallery[mode='mosaic'] > .toolbar > button.mode:active {
+.gallery[mode='mosaic'] > .toolbar button.mode:active {
   background-image: -webkit-image-set(
       url(../images/100/icon_1up_selected.png) 1x,
       url(../images/200/icon_1up_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.slideshow {
+.gallery > .toolbar button.slideshow {
   background-image: -webkit-image-set(
       url(../images/100/icon_slideshow.png) 1x,
       url(../images/200/icon_slideshow.png) 2x);
 }
 
-.gallery > .toolbar > button.slideshow:active,
-.gallery > .toolbar > button.slideshow[pressed] {
+.gallery > .toolbar button.slideshow:active,
+.gallery > .toolbar button.slideshow[pressed] {
   background-image: -webkit-image-set(
       url(../images/100/icon_slideshow_selected.png) 1x,
       url(../images/200/icon_slideshow_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.delete {
+.gallery > .toolbar button.delete {
   background-image: -webkit-image-set(
       url(../images/100/icon_delete.png) 1x,
       url(../images/200/icon_delete.png) 2x);
 }
 
-.gallery > .toolbar > button.delete:active {
+.gallery > .toolbar button.delete:active {
   background-image: -webkit-image-set(
       url(../images/100/icon_delete_selected.png) 1x,
       url(../images/200/icon_delete_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.edit {
+.gallery > .toolbar button.edit {
   background-image: -webkit-image-set(
       url(../images/100/icon_edit.png) 1x,
       url(../images/200/icon_edit.png) 2x);
 }
 
-.gallery > .toolbar > button.edit:active,
-.gallery > .toolbar > button.edit[pressed] {
+.gallery > .toolbar button.edit:active,
+.gallery > .toolbar button.edit[pressed] {
   background-image: -webkit-image-set(
       url(../images/100/icon_edit_selected.png) 1x,
       url(../images/200/icon_edit_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.print {
+.gallery > .toolbar button.print {
   background-image: -webkit-image-set(
       url(../images/100/icon_print.png) 1x,
       url(../images/200/icon_print.png) 2x);
 }
 
-.gallery > .toolbar > button.print:active,
-.gallery > .toolbar > button.print[pressed] {
+.gallery > .toolbar button.print:active,
+.gallery > .toolbar button.print[pressed] {
   background-image: -webkit-image-set(
       url(../images/100/icon_print_selected.png) 1x,
       url(../images/200/icon_print_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.share {
+.gallery > .toolbar button.share {
   background-image: -webkit-image-set(
       url(../images/100/icon_share.png) 1x,
       url(../images/200/icon_share.png) 2x);
 }
 
-.gallery > .toolbar > button.share:active,
-.gallery > .toolbar > button.share[pressed] {
+.gallery > .toolbar button.share:active,
+.gallery > .toolbar button.share[pressed] {
   background-image: -webkit-image-set(
       url(../images/100/icon_share_selected.png) 1x,
       url(../images/200/icon_share_selected.png) 2x);
 }
 
-.gallery > .toolbar > button.share[disabled] {
+.gallery > .toolbar button.share[disabled] {
   display: none;
 }
 

ui/file_manager/gallery/gallery.html

@@ -70,6 +70,24 @@
   </if>
 </head>
 <body>
-  <div class="gallery"></div>
+  <div class="gallery">
+    <div id="content" class="content"></div>
+    <div id="header" class="header tool dimmable"></div>
+    <div id="toolbar" class="toolbar tool dimmable">
+      <div class="filename-spacer"></div>
+      <div class="middle-spacer">
+        <div class="ribbon-spacer"></div>
+        <div class="edit-bar-spacer"></div>
+      </div>
+      <div class="button-spacer">
+        <button class="button mode"></button>
+        <button class="button slideshow"></button>
+        <button class="button edit"></button>
+        <button class="button print"></button>
+        <button class="delete"></button>
+        <button class="share"></button>
+      </div>
+    </div>
+  </div>
 </body>
 </html>

ui/file_manager/gallery/js/background.js

@@ -131,7 +131,7 @@ function launch(selectedEntriesPromise) {
           {
             id: 'gallery',
             innerBounds: {
-              minWidth: 800,
+              minWidth: 820,
               minHeight: 300
             },
             frame: 'none'

ui/file_manager/gallery/js/gallery.js

@@ -268,11 +268,11 @@ Gallery.prototype.initDom_ = function() {
   cr.ui.dialogs.BaseDialog.OK_LABEL = str('GALLERY_OK_LABEL');
   cr.ui.dialogs.BaseDialog.CANCEL_LABEL = str('GALLERY_CANCEL_LABEL');
 
-  var content = util.createChild(this.container_, 'content');
+  var content = document.querySelector('#content');
   content.addEventListener('click', this.onContentClick_.bind(this));
 
-  this.header_ = util.createChild(this.container_, 'header tool dimmable');
-  this.toolbar_ = util.createChild(this.container_, 'toolbar tool dimmable');
+  this.header_ = document.querySelector('#header');
+  this.toolbar_ = document.querySelector('#toolbar');
 
   var preventDefault = function(event) { event.preventDefault(); };
 
@@ -297,7 +297,7 @@ Gallery.prototype.initDom_ = function() {
   closeButton.addEventListener('click', this.onClose_.bind(this));
   closeButton.addEventListener('mousedown', preventDefault);
 
-  this.filenameSpacer_ = util.createChild(this.toolbar_, 'filename-spacer');
+  this.filenameSpacer_ = this.toolbar_.querySelector('.filename-spacer');
   this.filenameEdit_ = util.createChild(this.filenameSpacer_,
                                         'namebox', 'input');
 
@@ -311,13 +311,14 @@ Gallery.prototype.initDom_ = function() {
   this.filenameEdit_.addEventListener('keydown',
       this.onFilenameEditKeydown_.bind(this));
 
-  util.createChild(this.toolbar_, 'button-spacer');
+  var middleSpacer = this.filenameSpacer_ =
+      this.toolbar_.querySelector('.middle-spacer');
+  var buttonSpacer = this.toolbar_.querySelector('button-spacer');
 
   this.prompt_ = new ImageEditor.Prompt(this.container_, str);
 
-  this.modeButton_ = util.createChild(this.toolbar_, 'button mode', 'button');
-  this.modeButton_.addEventListener('click',
-      this.toggleMode_.bind(this, null));
+  this.modeButton_ = this.toolbar_.querySelector('button.mode');
+  this.modeButton_.addEventListener('click', this.toggleMode_.bind(this, null));
 
   this.mosaicMode_ = new MosaicMode(content,
                                     this.dataModel_,
@@ -342,10 +343,10 @@ Gallery.prototype.initDom_ = function() {
     cr.dispatchSimpleEvent(this, 'image-saved');
   }.bind(this));
 
-  var deleteButton = this.createToolbarButton_('delete', 'GALLERY_DELETE');
+  var deleteButton = this.initToolbarButton_('delete', 'GALLERY_DELETE');
   deleteButton.addEventListener('click', this.delete_.bind(this));
 
-  this.shareButton_ = this.createToolbarButton_('share', 'GALLERY_SHARE');
+  this.shareButton_ = this.initToolbarButton_('share', 'GALLERY_SHARE');
   this.shareButton_.setAttribute('disabled', '');
   this.shareButton_.addEventListener('click', this.toggleShare_.bind(this));
 
@@ -361,15 +362,15 @@ Gallery.prototype.initDom_ = function() {
 };
 
 /**
- * Creates toolbar button.
+ * Initializes a toolbar button.
  *
  * @param {string} className Class to add.
  * @param {string} title Button title.
  * @return {!HTMLElement} Newly created button.
  * @private
  */
-Gallery.prototype.createToolbarButton_ = function(className, title) {
-  var button = util.createChild(this.toolbar_, className, 'button');
+Gallery.prototype.initToolbarButton_ = function(className, title) {
+  var button = this.toolbar_.querySelector('button.' + className);
   button.title = str(title);
   return button;
 };

ui/file_manager/gallery/js/slide_mode.js

@@ -166,7 +166,7 @@ SlideMode.prototype.initDom_ = function() {
       this.advanceManually.bind(this, 1));
   util.createChild(this.arrowRight_);
 
-  this.ribbonSpacer_ = util.createChild(this.toolbar_, 'ribbon-spacer');
+  this.ribbonSpacer_ = this.toolbar_.querySelector('.ribbon-spacer');
   this.ribbon_ = new Ribbon(
       this.document_, this.dataModel_, this.selectionModel_);
   this.ribbonSpacer_.appendChild(this.ribbon_);
@@ -179,8 +179,7 @@ SlideMode.prototype.initDom_ = function() {
 
   util.createChild(this.container_, 'spinner');
 
-  var slideShowButton = util.createChild(this.toolbar_,
-      'button slideshow', 'button');
+  var slideShowButton = this.toolbar_.querySelector('button.slideshow');
   slideShowButton.title = this.displayStringFunction_('GALLERY_SLIDESHOW');
   slideShowButton.addEventListener('click',
       this.startSlideshow.bind(this, SlideMode.SLIDESHOW_INTERVAL_FIRST));
@@ -194,17 +193,17 @@ SlideMode.prototype.initDom_ = function() {
 
   // Editor.
 
-  this.editButton_ = util.createChild(this.toolbar_, 'button edit', 'button');
+  this.editButton_ = this.toolbar_.querySelector('button.edit');
   this.editButton_.title = this.displayStringFunction_('GALLERY_EDIT');
   this.editButton_.setAttribute('disabled', '');  // Disabled by default.
   this.editButton_.addEventListener('click', this.toggleEditor.bind(this));
 
-  this.printButton_ = util.createChild(this.toolbar_, 'button print', 'button');
+  this.printButton_ = this.toolbar_.querySelector('button.print');
   this.printButton_.title = this.displayStringFunction_('GALLERY_PRINT');
   this.printButton_.setAttribute('disabled', '');  // Disabled by default.
   this.printButton_.addEventListener('click', this.print_.bind(this));
 
-  this.editBarSpacer_ = util.createChild(this.toolbar_, 'edit-bar-spacer');
+  this.editBarSpacer_ = this.toolbar_.querySelector('.edit-bar-spacer');
   this.editBarMain_ = util.createChild(this.editBarSpacer_, 'edit-main');
 
   this.editBarMode_ = util.createChild(this.container_, 'edit-modal');