Make CSS agnostic to underlying profile image size

Summary: Ref T7707. My analysis there was a bit confused and this isn't really all that important, but seems cleaner and desirable to be agnostic to the underlying image size.

Test Plan: Tested Safari, Firefox and Chrome with a variety of profile image sizes.

Reviewers: chad, btrahan

Reviewed By: btrahan

Subscribers: epriestley

Maniphest Tasks: T7707

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

src/applications/auth/view/PhabricatorAuthAccountView.php

@@ -95,13 +95,22 @@ final class PhabricatorAuthAccountView extends AphrontView {
     $image_uri = $image_file->getURIForTransform($xform);
     list($x, $y) = $xform->getTransformedDimensions($image_file);
 
+    $profile_image = phutil_tag(
+      'div',
+      array(
+        'class' => 'auth-account-view-profile-image',
+        'style' => 'background-image: url('.$image_uri.');',
+      ));
+
     return phutil_tag(
       'div',
       array(
         'class' => 'auth-account-view',
-        'style' => 'background-image: url('.$image_uri.');',
       ),
-      $content);
+      array(
+        $profile_image,
+        $content,
+      ));
   }
 
 }

webroot/rsrc/css/application/auth/auth.css

@@ -26,12 +26,21 @@
 .auth-account-view {
   background-color: #fff;
   border: 1px solid {$lightblueborder};
-  background-repeat: no-repeat;
-  background-position: 4px 4px;
-  background-size: 50px 50px;
-  padding: 4px 4px 4px 62px;
-  min-height: 50px;
   border-radius: 2px;
+  min-height: 50px;
+  position: relative;
+  padding: 4px 4px 4px 64px;
+}
+
+.auth-account-view-profile-image {
+  width: 50px;
+  height: 50px;
+  top: 4px;
+  left: 4px;
+
+  background-repeat: no-repeat;
+  background-size: 100%;
+  position: absolute;
 }
 
 .auth-account-view-name {

webroot/rsrc/css/application/conpherence/message-pane.css

@@ -162,7 +162,7 @@
 .conpherence-message-pane .conpherence-transaction-view {
   padding: 2px 0px;
   margin: 4px 12px;
-  background-size: 35px;
+  background-size: 100%;
   min-height: auto;
 }
 

webroot/rsrc/css/application/conpherence/notification.css

@@ -26,7 +26,7 @@
   position: absolute;
   width: 30px;
   height: 30px;
-  background-size: 30px;
+  background-size: 100%;
 }
 
 .phabricator-notification .conpherence-menu-item-view

webroot/rsrc/css/phui/phui-header-view.css

@@ -90,7 +90,7 @@ body.device-phone .phui-header-view {
 .phui-header-image {
   display: inline-block;
   background-repeat: no-repeat;
-  background-size: 50px;
+  background-size: 100%;
   border: 2px solid white;
   width: 50px;
   height: 50px;

webroot/rsrc/css/phui/phui-object-item-list-view.css

@@ -599,7 +599,7 @@ ul.phui-object-item-icons {
 .phui-object-item-image {
   width: 40px;
   height: 40px;
-  background-size: 40px;
+  background-size: 100%;
   margin: 6px;
   position: absolute;
   background-color: {$lightbluebackground};

webroot/rsrc/css/phui/phui-timeline-view.css

@@ -92,7 +92,7 @@
 
 .phui-timeline-image {
   background-repeat: no-repeat;
-  background-size: 50px;
+  background-size: 100%;
   position: absolute;
   border-radius: 3px;
 }