Move Macro image height/width to CSS

Summary: This makes macros and memes grow to 100% of their container //at most//, instead of showing a scrollbar. This is useful for overly large macros, smaller spaces like Feed and Conpherences, and Inline Comments. Fixes T7528

Test Plan: Tested a very large macro, a very large meme, and a very very tiny macro. It looks like memes get cached though, unsure if we should clean them up or just leave them

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

Maniphest Tasks: T7528

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

Author: chadlittle

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '856b962f',
+    'core.pkg.css' => 'efdeeb14',
     'core.pkg.js' => '5f50c01b',
     'darkconsole.pkg.js' => '8ab24e01',
     'differential.pkg.css' => '1940be3f',
@@ -105,7 +105,7 @@
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => '86bfbe8c',
-    'rsrc/css/core/remarkup.css' => '2dbff225',
+    'rsrc/css/core/remarkup.css' => 'bc65f3cc',
     'rsrc/css/core/syntax.css' => '56c1ba38',
     'rsrc/css/core/z-index.css' => '2db67397',
     'rsrc/css/diviner/diviner-shared.css' => '38813222',
@@ -353,7 +353,7 @@
     'rsrc/js/application/auth/behavior-persona-login.js' => '9414ff18',
     'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
     'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '0324970d',
-    'rsrc/js/application/conpherence/behavior-durable-column.js' => '64fc1053',
+    'rsrc/js/application/conpherence/behavior-durable-column.js' => '44100dc7',
     'rsrc/js/application/conpherence/behavior-menu.js' => 'c4151295',
     'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
     'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
@@ -585,7 +585,7 @@
     'javelin-behavior-diffusion-locate-file' => '6d3e1947',
     'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
     'javelin-behavior-doorkeeper-tag' => 'e5822781',
-    'javelin-behavior-durable-column' => '64fc1053',
+    'javelin-behavior-durable-column' => '44100dc7',
     'javelin-behavior-error-log' => '6882e80a',
     'javelin-behavior-fancy-datepicker' => 'c51ae228',
     'javelin-behavior-global-drag-and-drop' => '07f199d8',
@@ -739,7 +739,7 @@
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '72da38cc',
     'phabricator-profile-css' => '1a20dcbf',
-    'phabricator-remarkup-css' => '2dbff225',
+    'phabricator-remarkup-css' => 'bc65f3cc',
     'phabricator-search-results-css' => '559cc554',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-side-menu-view-css' => '7e8c6341',
@@ -1110,6 +1110,15 @@
       'javelin-dom',
       'javelin-request',
     ),
+    '44100dc7' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-scrollbar',
+      'javelin-quicksand',
+      'phabricator-keyboard-shortcut',
+      'conpherence-thread-manager',
+    ),
     '44168bad' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1257,15 +1266,6 @@
       'javelin-dom',
       'javelin-fx',
     ),
-    '64fc1053' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-scrollbar',
-      'javelin-quicksand',
-      'phabricator-keyboard-shortcut',
-      'conpherence-thread-manager',
-    ),
     '6882e80a' => array(
       'javelin-dom',
     ),

src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php

@@ -96,6 +96,8 @@ private function renderImageFile(
         case 'full':
           $attrs += array(
             'src' => $file->getBestURI(),
+            'height' => $file->getImageHeight(),
+            'width' => $file->getImageWidth(),
           );
           $image_class = 'phabricator-remarkup-embed-image-full';
           break;

src/applications/macro/markup/PhabricatorImageMacroRemarkupRule.php

@@ -113,17 +113,6 @@ public function didMarkupText() {
         $src_uri = PhabricatorEnv::getProductionURI($src_uri);
       }
 
-      $file_data = $file->getMetadata();
-      $style = null;
-      $height = idx($file_data, PhabricatorFile::METADATA_IMAGE_HEIGHT);
-      $width = idx($file_data, PhabricatorFile::METADATA_IMAGE_WIDTH);
-      if ($height && $width) {
-        $style = sprintf(
-          'height: %dpx; width: %dpx;',
-          $height,
-          $width);
-      }
-
       $id = null;
       $audio = idx($files, $macro->getAudioPHID());
       $should_play = ($audio && $macro->getAudioBehavior() !=
@@ -154,7 +143,9 @@ public function didMarkupText() {
           'src'   => $src_uri,
           'alt'   => $spec['original'],
           'title' => $spec['original'],
-          'style' => $style,
+          'height' => $file->getImageHeight(),
+          'width' => $file->getImageWidth(),
+          'class' => 'phabricator-remarkup-macro',
         ));
 
       $engine->overwriteStoredText($spec['token'], $result);

src/applications/macro/markup/PhabricatorMemeRemarkupRule.php

@@ -55,6 +55,7 @@ public function markupMeme($matches) {
         array(
           'src' => $uri,
           'alt' => $alt_text,
+          'class' => 'phabricator-remarkup-macro',
         ));
     }
 

webroot/rsrc/css/core/remarkup.css

@@ -300,6 +300,7 @@
 }
 
 .phabricator-remarkup-embed-image-full img {
+  height: auto;
   max-width: 100%;
 }
 
@@ -488,6 +489,11 @@ var.remarkup-assist-textarea {
   max-width: 95%;
 }
 
+.phabricator-remarkup-macro {
+  height: auto;
+  max-width: 100%;
+}
+
 .remarkup-nav-sequence-arrow {
   color: {$lightgreytext};
 }