Add download link to embedded files

Summary: Ref T3612. Doesn't render correctly, need help please. Adds a download icon into the renderfilelinkview to allow easier downloads.

Test Plan: Click on link, get download, click on file, get lightbox.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Maniphest Tasks: T3612

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

resources/celerity/map.php

@@ -9,8 +9,8 @@ return array(
   'names' => array(
     'conpherence.pkg.css' => '0b64e988',
     'conpherence.pkg.js' => '6249a1cf',
-    'core.pkg.css' => '202700e2',
+    'core.pkg.css' => '9c725fa0',
-    'core.pkg.js' => '28e8cda8',
+    'core.pkg.js' => 'f998932d',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => 'a4ba74b5',
     'differential.pkg.js' => '40b18f35',
@@ -108,7 +108,7 @@ return array(
     'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
     'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'd0801452',
-    'rsrc/css/core/remarkup.css' => '43e704eb',
+    'rsrc/css/core/remarkup.css' => 'aebc1180',
     'rsrc/css/core/syntax.css' => '769d3498',
     'rsrc/css/core/z-index.css' => '5e72c4e0',
     'rsrc/css/diviner/diviner-shared.css' => 'aa3656aa',
@@ -510,7 +510,7 @@ return array(
     'rsrc/js/core/behavior-hovercard.js' => 'bcaccd64',
     'rsrc/js/core/behavior-keyboard-pager.js' => 'a8da01f0',
     'rsrc/js/core/behavior-keyboard-shortcuts.js' => '01fca1f0',
-    'rsrc/js/core/behavior-lightbox-attachments.js' => 'ddcd41cf',
+    'rsrc/js/core/behavior-lightbox-attachments.js' => 'a5c57c24',
     'rsrc/js/core/behavior-line-linker.js' => '1499a8cb',
     'rsrc/js/core/behavior-more.js' => 'a80d0378',
     'rsrc/js/core/behavior-object-selector.js' => 'e0ec7f2f',
@@ -657,7 +657,7 @@ return array(
     'javelin-behavior-history-install' => '7ee2b591',
     'javelin-behavior-icon-composer' => '8499b6ab',
     'javelin-behavior-launch-icon-composer' => '48086888',
-    'javelin-behavior-lightbox-attachments' => 'ddcd41cf',
+    'javelin-behavior-lightbox-attachments' => 'a5c57c24',
     'javelin-behavior-line-chart' => 'e4232876',
     'javelin-behavior-load-blame' => '42126667',
     'javelin-behavior-maniphest-batch-editor' => '782ab6e7',
@@ -808,7 +808,7 @@ return array(
     'phabricator-object-selector-css' => '85ee8ce6',
     'phabricator-phtize' => 'd254d646',
     'phabricator-prefab' => '8d40ae75',
-    'phabricator-remarkup-css' => '43e704eb',
+    'phabricator-remarkup-css' => 'aebc1180',
     'phabricator-search-results-css' => '64ad079a',
     'phabricator-shaped-request' => '7cbe244b',
     'phabricator-slowvote-css' => 'a94b7230',
@@ -1771,6 +1771,15 @@ return array(
       'javelin-uri',
       'phabricator-notification',
     ),
+    'a5c57c24' => array(
+      'javelin-behavior',
+      'javelin-stratcom',
+      'javelin-dom',
+      'javelin-mask',
+      'javelin-util',
+      'phuix-icon-view',
+      'phabricator-busy',
+    ),
     'a6f7a73b' => array(
       'javelin-behavior',
       'javelin-stratcom',
@@ -2067,15 +2076,6 @@ return array(
       'javelin-util',
       'phabricator-shaped-request',
     ),
-    'ddcd41cf' => array(
-      'javelin-behavior',
-      'javelin-stratcom',
-      'javelin-dom',
-      'javelin-mask',
-      'javelin-util',
-      'phuix-icon-view',
-      'phabricator-busy',
-    ),
     'de2e896f' => array(
       'javelin-behavior',
       'javelin-dom',

src/__phutil_library_map__.php

@@ -7715,7 +7715,7 @@ phutil_register_library_map(array(
     'PhabricatorFileImageTransform' => 'PhabricatorFileTransform',
     'PhabricatorFileInfoController' => 'PhabricatorFileController',
     'PhabricatorFileLightboxController' => 'PhabricatorFileController',
-    'PhabricatorFileLinkView' => 'AphrontView',
+    'PhabricatorFileLinkView' => 'AphrontTagView',
     'PhabricatorFileListController' => 'PhabricatorFileController',
     'PhabricatorFileQuery' => 'PhabricatorCursorPagedPolicyAwareQuery',
     'PhabricatorFileROT13StorageFormat' => 'PhabricatorFileStorageFormat',

src/applications/files/markup/PhabricatorEmbedFileRemarkupRule.php

@@ -3,6 +3,8 @@
 final class PhabricatorEmbedFileRemarkupRule
   extends PhabricatorObjectRemarkupRule {
 
+  private $viewer;
+
   const KEY_EMBED_FILE_PHIDS = 'phabricator.embedded-file-phids';
 
   protected function getObjectNamePrefix() {
@@ -12,9 +14,9 @@ final class PhabricatorEmbedFileRemarkupRule
   protected function loadObjects(array $ids) {
     $engine = $this->getEngine();
 
-    $viewer = $engine->getConfig('viewer');
+    $this->viewer = $engine->getConfig('viewer');
     $objects = id(new PhabricatorFileQuery())
-      ->setViewer($viewer)
+      ->setViewer($this->viewer)
       ->withIDs($ids)
       ->needTransforms(
         array(
@@ -282,6 +284,7 @@ final class PhabricatorEmbedFileRemarkupRule
     array $options) {
 
     return id(new PhabricatorFileLinkView())
+      ->setViewer($this->viewer)
       ->setFilePHID($file->getPHID())
       ->setFileName($this->assertFlatText($options['name']))
       ->setFileDownloadURI($file->getDownloadURI())

src/view/layout/PhabricatorFileLinkView.php

@@ -1,6 +1,6 @@
 <?php
 
-final class PhabricatorFileLinkView extends AphrontView {
+final class PhabricatorFileLinkView extends AphrontTagView {
 
   private $fileName;
   private $fileDownloadURI;
@@ -87,7 +87,7 @@ final class PhabricatorFileLinkView extends AphrontView {
     return FileTypeIcon::getFileIcon($this->getFileName());
   }
 
-  public function getMetadata() {
+  public function getMeta() {
     return array(
       'phid'     => $this->getFilePHID(),
       'viewable' => $this->getFileViewable(),
@@ -100,21 +100,55 @@ final class PhabricatorFileLinkView extends AphrontView {
     );
   }
 
-  public function render() {
+  protected function getTagName() {
-    require_celerity_resource('phabricator-remarkup-css');
+    return 'div';
-    require_celerity_resource('phui-lightbox-css');
+  }
 
+  protected function getTagAttributes() {
     $mustcapture = true;
     $sigil = 'lightboxable';
-    $meta = $this->getMetadata();
+    $meta = $this->getMeta();
 
     $class = 'phabricator-remarkup-embed-layout-link';
     if ($this->getCustomClass()) {
       $class = $this->getCustomClass();
     }
 
+    return array(
+      'href'        => $this->getFileViewURI(),
+      'class'       => $class,
+      'sigil'       => $sigil,
+      'meta'        => $meta,
+      'mustcapture' => $mustcapture,
+    );
+  }
+
+  protected function getTagContent() {
+    require_celerity_resource('phabricator-remarkup-css');
+    require_celerity_resource('phui-lightbox-css');
+
     $icon = id(new PHUIIconView())
-      ->setIcon($this->getFileIcon());
+      ->setIcon($this->getFileIcon())
+      ->addClass('phabricator-remarkup-embed-layout-icon');
+
+    $dl_icon = id(new PHUIIconView())
+      ->setIcon('fa-download');
+
+    $download_form = phabricator_form(
+      $this->getViewer(),
+      array(
+        'action' => $this->getFileDownloadURI(),
+        'method' => 'POST',
+        'class'  => 'embed-download-form',
+        'sigil'  => 'embed-download-form download',
+      ),
+      phutil_tag(
+        'button',
+        array(
+          'class' => 'phabricator-remarkup-embed-layout-download',
+          'type' => 'submit',
+        ),
+        pht('Download')));
 
     $info = phutil_tag(
       'span',
@@ -140,18 +174,10 @@ final class PhabricatorFileLinkView extends AphrontView {
         $info,
       ));
 
-    return javelin_tag(
+    return array(
-      'a',
+      $icon,
-      array(
+      $inner,
-        'href'        => $this->getFileViewURI(),
+      $download_form,
-        'class'       => $class,
+    );
-        'sigil'       => $sigil,
-        'meta'        => $meta,
-        'mustcapture' => $mustcapture,
-      ),
-      array(
-        $icon,
-        $inner,
-      ));
   }
 }

webroot/rsrc/css/core/remarkup.css

@@ -66,7 +66,7 @@
   border-radius: 3px;
   box-shadow: inset 0 -1px 0 rgba({$alphablue},0.08);
   user-select: none;
-  background: #f7f7f7;
+  background: {$lightgreybackground};
   border: 1px solid {$lightgreyborder};
 }
 
@@ -370,7 +370,7 @@ video.phabricator-media {
 }
 
 .phabricator-remarkup-embed-layout-link {
-  padding: 8px 8px 8px 32px;
+  padding: 6px 6px 6px 42px;
   border-radius: 3px;
   margin: 0 0 4px;
   display: inline-block;
@@ -379,18 +379,17 @@ video.phabricator-media {
   border: 1px solid {$lightblueborder};
   border-radius: 3px;
   color: #000;
-  min-width: 240px;
+  min-width: 256px;
   position: relative;
-  height: 22px;
+  /*height: 22px;*/
   line-height: 20px;
 }
 
-.phabricator-remarkup-embed-layout-link .phui-icon-view {
+.phabricator-remarkup-embed-layout-icon {
-  margin-right: 8px;
+  font-size: 28px;
-  font-size: 20px;
   position: absolute;
-  top: 8px;
+  top: 10px;
-  left: 8px;
+  left: 10px;
 }
 
 .phabricator-remarkup-embed-layout-info {
@@ -402,11 +401,46 @@ video.phabricator-media {
 
 .phabricator-remarkup-embed-layout-link:hover {
   border-color: {$violet};
+  cursor: pointer;
   text-decoration: none;
 }
 
-.phabricator-remarkup-embed-layout-link:hover .phui-icon-view {
+.phabricator-remarkup-embed-layout-link:hover
-  color: {$violet};
+  .phabricator-remarkup-embed-layout-icon {
+    color: {$violet};
+}
+
+.phabricator-remarkup-embed-layout-info-block {
+  display: block;
+}
+
+.embed-download-form {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+}
+
+.phabricator-remarkup-embed-layout-link
+  .phabricator-remarkup-embed-layout-download {
+    color: {$lightgreytext};
+    border: none;
+    background: rgba(0, 0, 0, 0);
+    box-shadow: none;
+    outline: 0;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+    text-shadow: none;
+    border-radius: 0;
+    font: inherit;
+    display: inline;
+    min-width: 0;
+    font-weight: normal !important;
+}
+
+.phabricator-remarkup-embed-layout-download:hover {
+  color: {$anchor};
+  text-decoration: underline;
 }
 
 .phabricator-remarkup-embed-float-left {

webroot/rsrc/js/core/behavior-lightbox-attachments.js

@@ -51,7 +51,7 @@ JX.behavior('lightbox-attachments', function (config) {
     e.kill();
 
     var mainFrame = JX.$('main-page-frame');
-    var links = JX.DOM.scry(mainFrame, 'a', 'lightboxable');
+    var links = JX.DOM.scry(mainFrame, '*', 'lightboxable');
     var phids = {};
     var data;
     for (var i = 0; i < links.length; i++) {
@@ -371,9 +371,20 @@ JX.behavior('lightbox-attachments', function (config) {
     form.submit();
   };
 
+  var _startPageDownload = function(e) {
+    e.kill();
+    var form = e.getNode('tag:form');
+    form.submit();
+  };
+
   JX.Stratcom.listen(
     'click',
     'lightbox-download-submit',
     _startDownload);
 
+  JX.Stratcom.listen(
+    'click',
+    'embed-download-form',
+    _startPageDownload);
+
 });