HiDPI assets for Chrome OS Files app

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

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 html.col-resize * {
   cursor: col-resize !important;
 }
 
 /* Outer frame of the dialog. */
 body {
@@ skipping 103 matching lines @@
 }
 
 .butter-bar .actions {
   -webkit-box-orient: horizontal;
   -webkit-box-pack: end;
   display: -webkit-box;
 }
 
 .butter-bar .actions a {
   background: center center no-repeat;
-  background-image: url('../images/close_bar.png');
+  background-image: -webkit-image-set(
+    url('../images/files/ui/close_bar.png') 1x,
+    url('../images/files/ui/2x/close_bar.png') 2x);
   display: inline-block;
   height: 12px;
   padding: 4px;
   width: 12px;
 }
 
 .butter-bar.error {
   background-color: rgba(221, 75, 57, 0.2);
   border: 1px solid rgba(221, 75, 57, 0.5);
   border-radius: 2px;
@@ skipping 136 matching lines @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .root-label {
   -webkit-padding-start: 38px;
   background-position: left center;
   background-repeat: no-repeat;
 }
 
-.root-label[type=downloads] {
-  background-image: url('../images/downloads_28x28.png');
-}
-
-.root-label[type=gdata] {
-  background-image: url('../images/gdrive_28x28.png');
-}
-
-.root-label[type=archive] {
-  background-image: url('../images/archive_28x28.png');
-}
-
-.root-label[type=removable] {
-  background-image: url('../images/device_usb_28x28.png');
-}
-
-.root-label[type=removable][subType=sd] {
-  background-image: url('../images/device_sd_28x28.png');
-}
-
-.root-label[type=removable][subType=optical] {
-  background-image: url('../images/device_optical_28x28.png');
-}
-
-/* TODO(kaznacheev): consider a better icon for subType=unknown.
-   Also find out if we need an icon for subType=mobile */
-.root-label[type=removable][subType=unknown] {
-  background-image: url('../images/device_hd_28x28.png');
-}
-
 div.root-eject {
   -webkit-transition: opacity 70ms linear;
-  background-image: url('../images/eject.png');
+  background-image: -webkit-image-set(
+    url('../images/files/ui/eject.png') 1x,
+    url('../images/files/ui/2x/eject.png') 2x);
   background-position: center center;
   background-repeat: no-repeat;
   cursor: pointer;
   height: 20px;
   margin-right: 6px;
   opacity: 0;
   width: 20px;
 }
 
 div.root-eject:hover {
@@ skipping 89 matching lines @@
 
 /* The final breadcrumb, representing the current directory. */
 .breadcrumb-last {
   color: black;
   cursor: default;
 }
 
 /* The > arrow between breadcrumbs. */
 
 .breadcrumbs .separator {
-  background-image: url('../images/breadcrumb-separator.png');
+  background-image: -webkit-image-set(
+    url('../images/files/ui/breadcrumb-separator.png') 1x,
+    url('../images/files/ui/2x/breadcrumb-separator.png') 2x);
   background-position: center center;
   background-repeat: no-repeat;
   height: 10px;
   overflow: hidden;
   width: 25px;
 }
 
 .dialog-header div[role=button] {
   -webkit-transition: border-color 130ms linear;
   background-color: transparent;
@@ skipping 15 matching lines @@
 .dialog-header div[role=button]:hover,
 .dialog-header div[role=button]:active {
   border-color: #ddd;
 }
 
 .dialog-header div[role=button][disabled] {
   background-color: #f1f1f1;
 }
 
 #search-box {
-  background: url('../images/icon_search.png') no-repeat scroll 4px 3.5px;
+  background: -webkit-image-set(
+    url('../images/files/ui/icon_search.png') 1x,
+    url('../images/files/ui/2x/icon_search.png') 2x);
+  background-position: 4px 3.5px;
+  background-repeat: no-repeat;
   display: -webkit-box;
   height: 25px;
   margin-right: 10px;
   padding-left: 22px;
 }
 
 #search-box,
 #filename-input-box input {
   border: 1px solid #BBB;
   border-radius: 2px;
 }
 
+button#detail-view {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/view_list_black.png') 1x,
+    url('../images/files/ui/2x/view_list_black.png') 2x);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+
+button#thumbnail-view {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/view_thumbs_black.png') 1x,
+    url('../images/files/ui/2x/view_thumbs_black.png') 2x);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
 /* When detail-view is not disabled (thus thumbnail view is disabled), push
    it up a little, to make it's right glowing border visible while focused.*/
 button#detail-view:not([disabled]) {
   z-index: 2;
 }
 
 .filelist-panel {
   -webkit-box-flex: 1;
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
 
 #list-container {
   -webkit-box-flex: 1;
   display: -webkit-box;
   position: relative;
 }
 
 .spinner {
-  background-image: url(../images/spinner.svg);
+  background-image: url(../images/files/ui/spinner.svg);

[dgozman, 2012/07/19 13:02:09]

Moving spinner to images/commons makes sense to me.

[Vladislav Kaznacheev, 2012/07/19 13:30:19]

Moved spinner.svg and spinner_white.svg to images/common.
On 2012/07/19 13:02:09, dgozman wrote:

   background-size: 100%;
   height: 22px;
   left: 50%;
   margin-left: -11px;
   margin-top: -11px;
   opacity: 0.5;
   position: absolute;
   top: 50%;
   width: 22px;
 }
 
 .downloads-warning {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-transition: height 70ms linear;
   background-color: #f0f0f0;
+  background-image: -webkit-image-set(
+    url('../images/files/ui/warning_icon_square.png') 1x,
+    url('../images/files/ui/2x/warning_icon_square.png') 2x);
+  background-position: 15px center;
+  background-repeat: no-repeat;
   color: #666;
   display: -webkit-box;
   font-size: 13px;
   height: 57px;
   overflow: hidden;
+  padding-left: 57px;  /* Make space for the icon. */
 }
 
 .downloads-warning[hidden] {
   height: 0;
 }
 
-.downloads-warning img {
-  display: -webkit-box;
-  padding: 15px;
-}
-
-.downloads-warning div {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
-}
-
 /* The cr.ui.Grid representing the detailed file list. */
 .thumbnail-grid {
   overflow-y: auto;
   width: 100%;
 }
 
 /* Common styles for the grid view and draggable thumbnails. */
 .thumbnail-item {
   padding: 0;
   position: relative;
@@ skipping 40 matching lines @@
    dialogs have three nicely aligned columns of thumbnails. */
 .thumbnail-grid .thumbnail-item {
   border: 2px solid transparent;  /* Selection will make the border visible. */
   height: 182px;
   margin-left: 8px;
   margin-top: 7px;
   width: 242px;
 }
 
 .thumbnail-grid .thumbnail-frame {
-  background-image: url(../images/hashed_bg.gif);
+  background-image: -webkit-image-set(
+    url(../images/files/ui/hashed_bg.gif) 1x,
+    url(../images/files/ui/2x/hashed_bg.gif) 2x);
   border: 1px solid rgb(217, 217, 217);
 }
 
 .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame,
 .thumbnail-grid .thumbnail-item:hover .thumbnail-frame {
   border-color: white;
 }
 
 .thumbnail-grid .img-container {
   height: 100%;
@@ skipping 186 matching lines @@
   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
   background-color: #F2F2F2;
   border: 1px solid #fff;
   height: 45px;
   margin: 0 0 0 -39px;  /* Show 7 pixels of the overlapped image */
   position: relative;
   width: 45px;
 }
 
 .preview-thumbnails > .thumbnail > .img-container {
+  background-size: 45px 45px;
   height: 45px;
   overflow: hidden;
   width: 45px;
 }
 
 .preview-thumbnails > .popup {
   -webkit-transform: translate(0, 3px) scale(0.95);
   background-color: #F2F2F2;
   border: 2px solid #fff;
   box-shadow: 0 0 0 1px #F0F0F0,
@@ skipping 40 matching lines @@
 /* Container for a table header. */
 .table-header {
   -webkit-box-sizing: border-box;
   background-color: #f5f5f5;
   border-bottom: 1px #d2d2d2 solid;
   height: 27px;
 }
 
 .table-header-sort-image-desc::after {
   -webkit-padding-start: 13px;
-  background-image: url(../images/sort_desc.png);
+  background-image: -webkit-image-set(
+    url(../images/files/ui/sort_desc.png) 1x,
+    url(../images/files/ui/2x/sort_desc.png) 2x);
   background-position: center center;
   background-repeat: no-repeat;
   color: #888;
   content: '\00a0';
   position: relative;
   top: 1px;
 }
 
 .table-header-sort-image-asc::after {
   -webkit-padding-start: 13px;
-  background-image: url(../images/sort_asc.png);
+  background-image: -webkit-image-set(
+    url(../images/files/ui/sort_asc.png) 1x,
+    url(../images/files/ui/2x/sort_asc.png) 2x);
   background-position: center center;
   background-repeat: no-repeat;
   color: #888;
   content: '\00a0';
   position: relative;
   top: -1px;
 }
 
 
 .preview-container .table-header {
@@ skipping 56 matching lines @@
 
 #list-container li.table-row,
 #default-actions-list li {
   border: none;
   border-top: 1px solid transparent;
   line-height: 39px;
   padding-bottom: 1px;
   padding-top: 1px;
 }
 
-/* The icon in the name column. */
+/* The icon in the name column. See file_types.css for specific icons. */
 .detail-icon {
-  background-image: url(../images/filetype_generic.png);
-  background-position: center;
-  background-repeat: no-repeat;
   height: 24px;
   width: 24px;
 }
 
-/* Icon for files in the detail list. */
-.detail-icon[iconType='archive'] {
-  background-image: url(../images/filetype_archive.png);
-}
-
-.detail-icon[iconType='audio'] {
-  background-image: url(../images/filetype_audio.png);
-}
-
-.detail-icon[iconType='device'] {
-  background-image: url(../images/filetype_device.png);
-}
-
-.detail-icon[iconType='excel'] {
-  background-image: url(../images/filetype_excel.png);
-}
-
-.detail-icon[iconType='folder'] {
-  background-image: url(../images/filetype_folder.png);
-}
-
-.detail-icon[iconType='html'] {
-  background-image: url(../images/filetype_html.png);
-}
-
-.detail-icon[iconType='image'] {
-  background-image: url(../images/filetype_image.png);
-}
-
-.detail-icon[iconType='pdf'] {
-  background-image: url(../images/filetype_pdf.png);
-}
-
-.detail-icon[iconType='ppt'] {
-  background-image: url(../images/filetype_ppt.png);
-}
-
-.detail-icon[iconType='video'] {
-  background-image: url(../images/filetype_video.png);
-}
-
-.detail-icon[iconType='word'] {
-  background-image: url(../images/filetype_word.png);
-}
-
-.detail-icon[iconType='gdoc'] {
-  background-image: url(../images/filetype_gdoc.png);
-}
-
-.detail-icon[iconType='gsheet'] {
-  background-image: url(../images/filetype_gsheet.png);
-}
-
-.detail-icon[iconType='gslides'] {
-  background-image: url(../images/filetype_gslides.png);
-}
-
-.detail-icon[iconType='gdraw'] {
-  background-image: url(../images/filetype_gdraw.png);
-}
-
-.detail-icon[iconType='gtable'] {
-  background-image: url(../images/filetype_gtable.png);
-}
-
 .metadata-item {
   -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
   -webkit-padding-start: 8px;
   display: -webkit-box;
 }
 
 .metadata-label {
   -webkit-margin-end: 6px;
 }
@@ skipping 156 matching lines @@
   height: 112px;
   margin: 4px;
   width: 112px;
 }
 
 menu.file-context-menu {
   z-index: 4;
 }
 
 input.common.pin[type='checkbox']:checked::after {
-  background-image: url('../images/pin.png');
+  background-image: -webkit-image-set(
+    url('../images/files/ui/pin.png') 1x,
+    url('../images/files/ui/2x/pin.png') 2x);
   background-position: 4px 0;
 }
 
 div.offline {
   -webkit-box-pack: center;
   display: -webkit-box;
 }
 
 div.offline > * {
   -webkit-box-align: center;
@@ skipping 86 matching lines @@
 body[ash] .dialog-title,
 body[type='full-page'] [invisibleif='full-page'],
 body:not([type='full-page']) [visibleif='full-page'],
 body:not([type='saveas-file']) [visibleif='saveas-file'],
 body:not([type='saveas-file']):not([type='full-page'])
     [visibleif='saveas-file full-page'] {
   display: none;
 }
 
 #gdata-settings {
+  background-image: url('../images/files/ui/settings.svg');
+  background-position: 20px center;
+  background-repeat: no-repeat;
   overflow: hidden;
   text-align: left;
   width: 54px;
 }
 
-#gdata-settings img {
-  margin-left: 12px;
-}
-
 #gdata-settings span.disclosureindicator {
   float: none;
-  margin-left: 1px;
+  margin-left: 42px;
 }
 
 /* To animate the #gdata-settings element to invisibility we set every property
   that affects its horizontal size to 0. */
 .dialog-container:not([gdata]) #gdata-settings {
   border-color: transparent;  /* Changing only the color to preserve layout. */
   border-left-width: 0;
   border-right-width: 0;
   margin: 0;
   min-width: 0;
@@ skipping 129 matching lines @@
   width: 50%;
 }
 
 #list-container .table-header-inner {
   height: 100%;
 }
 
 #list-container .table-header-cell:hover {
   background-color: #f2f2f2;
 }