Send Markdown in Diffusion through SourceSans

Summary: This moves Markdown rendering from normal fonts to PHUIDocumentView with Source Sans improving readability of this longer form text.

Test Plan:
Test libphutil and Phabricator readmes in my sandbox.

{F363483}

Reviewers: btrahan, epriestley

Reviewed By: epriestley

Subscribers: Korvin, epriestley

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

resources/celerity/map.php

@@ -64,6 +64,7 @@ return array(
     'rsrc/css/application/differential/revision-list.css' => 'f3c47d33',
     'rsrc/css/application/differential/table-of-contents.css' => '63f3ef4a',
     'rsrc/css/application/diffusion/diffusion-icons.css' => '9c5828da',
+    'rsrc/css/application/diffusion/diffusion-readme.css' => '2106ea08',
     'rsrc/css/application/diffusion/diffusion-source.css' => '66fdf661',
     'rsrc/css/application/feed/feed.css' => 'b513b5f4',
     'rsrc/css/application/files/global-drag-and-drop.css' => '697324ad',
@@ -531,6 +532,7 @@ return array(
     'differential-revision-list-css' => 'f3c47d33',
     'differential-table-of-contents-css' => '63f3ef4a',
     'diffusion-icons-css' => '9c5828da',
+    'diffusion-readme-css' => '2106ea08',
     'diffusion-source-css' => '66fdf661',
     'diviner-shared-css' => '38813222',
     'font-fontawesome' => 'ae9a7b4d',

src/applications/diffusion/view/DiffusionReadmeView.php

@@ -53,6 +53,7 @@ final class DiffusionReadmeView extends DiffusionView {
     $readme_path = $this->getPath();
     $readme_name = basename($readme_path);
     $interpreter = $this->getReadmeLanguage($readme_name);
+    require_celerity_resource('diffusion-readme-css');
 
     $content = $this->getContent();
 
@@ -86,7 +87,7 @@ final class DiffusionReadmeView extends DiffusionView {
         }
 
         $readme_content = $content;
-        $class = 'phabricator-remarkup';
+        $class = null;
         break;
       case 'rainbow':
         $content = id(new PhutilRainbowSyntaxHighlighter())
@@ -95,30 +96,25 @@ final class DiffusionReadmeView extends DiffusionView {
         $readme_content = phutil_escape_html_newlines($content);
 
         require_celerity_resource('syntax-highlighting-css');
-        $class = 'remarkup-code';
+        $class = 'remarkup-code ml';
         break;
       default:
       case 'text':
         $readme_content = phutil_escape_html_newlines($content);
+        $class = 'ml';
         break;
     }
 
-    $readme_content = phutil_tag(
-      'div',
-      array(
-        'class' => $class,
-      ),
-      $readme_content);
+    $readme_content = phutil_tag_div($class, $readme_content);
+    $header = id(new PHUIHeaderView())
+      ->setHeader($readme_name);
 
-    $box = new PHUIBoxView();
-    $box->appendChild($readme_content);
-    $box->addPadding(PHUI::PADDING_LARGE);
-
-    $object_box = id(new PHUIObjectBoxView())
-      ->setHeaderText($readme_name)
-      ->appendChild($box);
-
-    return $object_box;
+    return id(new PHUIDocumentView())
+      ->setFluid(true)
+      ->appendChild($readme_content)
+      ->addClass('diffusion-readme-view')
+      ->setHeader($header)
+      ->setFontKit(PHUIDocumentView::FONT_SOURCE_SANS);
   }
 
 }

webroot/rsrc/css/application/diffusion/diffusion-readme.css

@@ -0,0 +1,14 @@
+/**
+ * @provides diffusion-readme-css
+ */
+
+.device .diffusion-readme-view {
+  margin: 16px 8px 0;
+  background-color: #fff;
+  border: 1px solid {$lightblueborder};
+  border-bottom: 1px solid {$blueborder};
+}
+
+.device-tablet .diffusion-readme-view {
+  margin: 16px;
+}