Add border, transparent indicators to images in file property view

Summary: Fixes T3950. This centers the images, adds a thin blue border, and a transparent background.

Test Plan: Tested a file in Files, Diffusion, and Macro.

Reviewers: epriestley, btrahan

Reviewed By: epriestley

CC: Korvin, epriestley, aran

Maniphest Tasks: T3950

Differential Revision: https://secure.phabricator.com/D7305

src/__celerity_resource_map__.php

@@ -3869,7 +3869,7 @@ celerity_register_resource_map(array(
   ),
   'phui-property-list-view-css' =>
   array(
-    'uri' => '/res/6c937c64/rsrc/css/phui/phui-property-list-view.css',
+    'uri' => '/res/7c39fbe1/rsrc/css/phui/phui-property-list-view.css',
     'type' => 'css',
     'requires' =>
     array(
@@ -4257,7 +4257,7 @@ celerity_register_resource_map(array(
 ), array(
   'packages' =>
   array(
-    '7ad8c5a4' =>
+    'b2f506ea' =>
     array(
       'name' => 'core.pkg.css',
       'symbols' =>
@@ -4306,7 +4306,7 @@ celerity_register_resource_map(array(
         41 => 'phabricator-tag-view-css',
         42 => 'phui-list-view-css',
       ),
-      'uri' => '/res/pkg/7ad8c5a4/core.pkg.css',
+      'uri' => '/res/pkg/b2f506ea/core.pkg.css',
       'type' => 'css',
     ),
     '8fafb027' =>
@@ -4498,15 +4498,15 @@ celerity_register_resource_map(array(
   ),
   'reverse' =>
   array(
-    'aphront-dialog-view-css' => '7ad8c5a4',
-    'aphront-error-view-css' => '7ad8c5a4',
-    'aphront-list-filter-view-css' => '7ad8c5a4',
-    'aphront-pager-view-css' => '7ad8c5a4',
-    'aphront-panel-view-css' => '7ad8c5a4',
-    'aphront-table-view-css' => '7ad8c5a4',
-    'aphront-tokenizer-control-css' => '7ad8c5a4',
-    'aphront-tooltip-css' => '7ad8c5a4',
-    'aphront-typeahead-control-css' => '7ad8c5a4',
+    'aphront-dialog-view-css' => 'b2f506ea',
+    'aphront-error-view-css' => 'b2f506ea',
+    'aphront-list-filter-view-css' => 'b2f506ea',
+    'aphront-pager-view-css' => 'b2f506ea',
+    'aphront-panel-view-css' => 'b2f506ea',
+    'aphront-table-view-css' => 'b2f506ea',
+    'aphront-tokenizer-control-css' => 'b2f506ea',
+    'aphront-tooltip-css' => 'b2f506ea',
+    'aphront-typeahead-control-css' => 'b2f506ea',
     'differential-changeset-view-css' => '4dc2311c',
     'differential-core-view-css' => '4dc2311c',
     'differential-inline-comment-editor' => '5e9e5c4e',
@@ -4520,7 +4520,7 @@ celerity_register_resource_map(array(
     'differential-table-of-contents-css' => '4dc2311c',
     'diffusion-commit-view-css' => 'c8ce2d88',
     'diffusion-icons-css' => 'c8ce2d88',
-    'global-drag-and-drop-css' => '7ad8c5a4',
+    'global-drag-and-drop-css' => 'b2f506ea',
     'inline-comment-summary-css' => '4dc2311c',
     'javelin-aphlict' => '8fafb027',
     'javelin-behavior' => '9564fa17',
@@ -4595,56 +4595,56 @@ celerity_register_resource_map(array(
     'javelin-util' => '9564fa17',
     'javelin-vector' => '9564fa17',
     'javelin-workflow' => '9564fa17',
-    'lightbox-attachment-css' => '7ad8c5a4',
+    'lightbox-attachment-css' => 'b2f506ea',
     'maniphest-task-summary-css' => '49898640',
-    'phabricator-action-list-view-css' => '7ad8c5a4',
-    'phabricator-application-launch-view-css' => '7ad8c5a4',
+    'phabricator-action-list-view-css' => 'b2f506ea',
+    'phabricator-application-launch-view-css' => 'b2f506ea',
     'phabricator-busy' => '8fafb027',
     'phabricator-content-source-view-css' => '4dc2311c',
-    'phabricator-core-css' => '7ad8c5a4',
-    'phabricator-crumbs-view-css' => '7ad8c5a4',
+    'phabricator-core-css' => 'b2f506ea',
+    'phabricator-crumbs-view-css' => 'b2f506ea',
     'phabricator-drag-and-drop-file-upload' => '5e9e5c4e',
     'phabricator-dropdown-menu' => '8fafb027',
     'phabricator-file-upload' => '8fafb027',
-    'phabricator-filetree-view-css' => '7ad8c5a4',
-    'phabricator-flag-css' => '7ad8c5a4',
+    'phabricator-filetree-view-css' => 'b2f506ea',
+    'phabricator-flag-css' => 'b2f506ea',
     'phabricator-hovercard' => '8fafb027',
-    'phabricator-jump-nav' => '7ad8c5a4',
+    'phabricator-jump-nav' => 'b2f506ea',
     'phabricator-keyboard-shortcut' => '8fafb027',
     'phabricator-keyboard-shortcut-manager' => '8fafb027',
-    'phabricator-main-menu-view' => '7ad8c5a4',
+    'phabricator-main-menu-view' => 'b2f506ea',
     'phabricator-menu-item' => '8fafb027',
-    'phabricator-nav-view-css' => '7ad8c5a4',
+    'phabricator-nav-view-css' => 'b2f506ea',
     'phabricator-notification' => '8fafb027',
-    'phabricator-notification-css' => '7ad8c5a4',
-    'phabricator-notification-menu-css' => '7ad8c5a4',
+    'phabricator-notification-css' => 'b2f506ea',
+    'phabricator-notification-menu-css' => 'b2f506ea',
     'phabricator-object-selector-css' => '4dc2311c',
     'phabricator-phtize' => '8fafb027',
     'phabricator-prefab' => '8fafb027',
     'phabricator-project-tag-css' => '49898640',
-    'phabricator-remarkup-css' => '7ad8c5a4',
+    'phabricator-remarkup-css' => 'b2f506ea',
     'phabricator-shaped-request' => '5e9e5c4e',
-    'phabricator-side-menu-view-css' => '7ad8c5a4',
-    'phabricator-standard-page-view' => '7ad8c5a4',
-    'phabricator-tag-view-css' => '7ad8c5a4',
+    'phabricator-side-menu-view-css' => 'b2f506ea',
+    'phabricator-standard-page-view' => 'b2f506ea',
+    'phabricator-tag-view-css' => 'b2f506ea',
     'phabricator-textareautils' => '8fafb027',
     'phabricator-tooltip' => '8fafb027',
-    'phabricator-transaction-view-css' => '7ad8c5a4',
-    'phabricator-zindex-css' => '7ad8c5a4',
-    'phui-button-css' => '7ad8c5a4',
-    'phui-form-css' => '7ad8c5a4',
-    'phui-form-view-css' => '7ad8c5a4',
-    'phui-header-view-css' => '7ad8c5a4',
-    'phui-icon-view-css' => '7ad8c5a4',
-    'phui-list-view-css' => '7ad8c5a4',
-    'phui-object-item-list-view-css' => '7ad8c5a4',
-    'phui-property-list-view-css' => '7ad8c5a4',
-    'phui-spacing-css' => '7ad8c5a4',
-    'sprite-apps-large-css' => '7ad8c5a4',
-    'sprite-gradient-css' => '7ad8c5a4',
-    'sprite-icons-css' => '7ad8c5a4',
-    'sprite-menu-css' => '7ad8c5a4',
-    'sprite-status-css' => '7ad8c5a4',
-    'syntax-highlighting-css' => '7ad8c5a4',
+    'phabricator-transaction-view-css' => 'b2f506ea',
+    'phabricator-zindex-css' => 'b2f506ea',
+    'phui-button-css' => 'b2f506ea',
+    'phui-form-css' => 'b2f506ea',
+    'phui-form-view-css' => 'b2f506ea',
+    'phui-header-view-css' => 'b2f506ea',
+    'phui-icon-view-css' => 'b2f506ea',
+    'phui-list-view-css' => 'b2f506ea',
+    'phui-object-item-list-view-css' => 'b2f506ea',
+    'phui-property-list-view-css' => 'b2f506ea',
+    'phui-spacing-css' => 'b2f506ea',
+    'sprite-apps-large-css' => 'b2f506ea',
+    'sprite-gradient-css' => 'b2f506ea',
+    'sprite-icons-css' => 'b2f506ea',
+    'sprite-menu-css' => 'b2f506ea',
+    'sprite-status-css' => 'b2f506ea',
+    'syntax-highlighting-css' => 'b2f506ea',
   ),
 ));

src/applications/diffusion/controller/DiffusionBrowseFileController.php

@@ -824,15 +824,16 @@ final class DiffusionBrowseFileController extends DiffusionBrowseController {
   private function buildImageCorpus($file_uri) {
     $properties = new PHUIPropertyListView();
 
-    $properties->addProperty(
-      pht('Image'),
+    $properties->addImageContent(
       phutil_tag(
         'img',
         array(
           'src' => $file_uri,
         )));
 
-    return $properties;
+    return id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Image'))
+      ->addPropertyList($properties);
   }
 
   private function buildBinaryCorpus($file_uri, $data) {

webroot/rsrc/css/phui/phui-property-list-view.css

@@ -152,3 +152,13 @@
   width: auto;
   margin: -12px 0 12px 0;
 }
+
+.phui-property-list-image-content img {
+  margin: 20px auto;
+  background: url('/rsrc/image/checker_light.png');
+  border: 1px solid {$lightblueborder};
+}
+
+.device-desktop .phui-property-list-image-content img:hover {
+  background: url('/rsrc/image/checker_dark.png');
+}