recaptime.dev / phorge
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.) hq.recaptime.dev/wiki/Phorge
phorge phabricator
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Simplify lightboxing and fix a few things

Summary:
Minor tweaks to lightboxes.

- With "position: fixed;", we don't need to do any of the scroll/resize stuff. Just remove it.
- Make the lightbox go over the menu bar -- was it intentional that it wasn't?
- Make 'jx-mask' use "position: fixed;" too.
- Add a loading indicator.
- In Differential/Maniphest/etc, a preview may bring in an image but won't bring in the CSS we need. The "real" fix is to ship CSS/JS with ajax, but that's really hard -- fake it by pulling in the right CSS any time we render a remarkup area.

I'm going to do a couple of other tweaks here but need to update JX.Mask.

Test Plan: Verified behavior is reasonable in Safari, Firefox, Chrome with multiple images / scroll / previews / resize.

Reviewers: btrahan, vrana

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T1896

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

epriestley ddb1f181 fdf90b46

+161 -64
+69 -50
src/__celerity_resource_map__.php
··· 483 483 'disk' => '/rsrc/image/lines.png', 484 484 'type' => 'png', 485 485 ), 486 + '/rsrc/image/loading.gif' => 487 + array( 488 + 'hash' => '664297671941142f37d8c89e717ff2ce', 489 + 'uri' => '/res/66429767/rsrc/image/loading.gif', 490 + 'disk' => '/rsrc/image/loading.gif', 491 + 'type' => 'gif', 492 + ), 486 493 '/rsrc/image/logo_grey.png' => 487 494 array( 488 495 'hash' => 'da055af1f6f80ea9d7d13ae1d59ca3cd', ··· 1387 1394 ), 1388 1395 'javelin-behavior-lightbox-attachments' => 1389 1396 array( 1390 - 'uri' => '/res/9a45723f/rsrc/js/application/core/behavior-lightbox-attachments.js', 1397 + 'uri' => '/res/1c9104e2/rsrc/js/application/core/behavior-lightbox-attachments.js', 1391 1398 'type' => 'js', 1392 1399 'requires' => 1393 1400 array( ··· 1395 1402 1 => 'javelin-stratcom', 1396 1403 2 => 'javelin-dom', 1397 1404 3 => 'javelin-mask', 1398 - 4 => 'javelin-vector', 1399 - 5 => 'javelin-util', 1405 + 4 => 'javelin-util', 1406 + 5 => 'phabricator-busy', 1400 1407 ), 1401 1408 'disk' => '/rsrc/js/application/core/behavior-lightbox-attachments.js', 1402 1409 ), ··· 1746 1753 ), 1747 1754 'javelin-behavior-refresh-csrf' => 1748 1755 array( 1749 - 'uri' => '/res/88beba4c/rsrc/js/application/core/behavior-refresh-csrf.js', 1756 + 'uri' => '/res/6fd76d0f/rsrc/js/application/core/behavior-refresh-csrf.js', 1750 1757 'type' => 'js', 1751 1758 'requires' => 1752 1759 array( 1753 1760 0 => 'javelin-request', 1754 1761 1 => 'javelin-behavior', 1755 1762 2 => 'javelin-dom', 1763 + 3 => 'phabricator-busy', 1756 1764 ), 1757 1765 'disk' => '/rsrc/js/application/core/behavior-refresh-csrf.js', 1758 1766 ), ··· 2239 2247 ), 2240 2248 'lightbox-attachment-css' => 2241 2249 array( 2242 - 'uri' => '/res/b931ca15/rsrc/css/aphront/lightbox-attachment.css', 2250 + 'uri' => '/res/c1c3415d/rsrc/css/aphront/lightbox-attachment.css', 2243 2251 'type' => 'css', 2244 2252 'requires' => 2245 2253 array( ··· 2369 2377 ), 2370 2378 'disk' => '/rsrc/css/application/base/phabricator-application-launch-view.css', 2371 2379 ), 2380 + 'phabricator-busy' => 2381 + array( 2382 + 'uri' => '/res/6ec372e1/rsrc/js/application/core/Busy.js', 2383 + 'type' => 'js', 2384 + 'requires' => 2385 + array( 2386 + 0 => 'javelin-install', 2387 + 1 => 'javelin-dom', 2388 + ), 2389 + 'disk' => '/rsrc/js/application/core/Busy.js', 2390 + ), 2372 2391 'phabricator-chatlog-css' => 2373 2392 array( 2374 2393 'uri' => '/res/f6631adc/rsrc/css/application/chatlog/chatlog.css', ··· 2398 2417 ), 2399 2418 'phabricator-core-css' => 2400 2419 array( 2401 - 'uri' => '/res/768cc6eb/rsrc/css/core/core.css', 2420 + 'uri' => '/res/83b4f07e/rsrc/css/core/core.css', 2402 2421 'type' => 'css', 2403 2422 'requires' => 2404 2423 array( ··· 3072 3091 ), array( 3073 3092 'packages' => 3074 3093 array( 3075 - 'd7473548' => 3094 + 37409098 => 3076 3095 array( 3077 3096 'name' => 'core.pkg.css', 3078 3097 'symbols' => ··· 3101 3120 21 => 'phabricator-flag-css', 3102 3121 22 => 'aphront-error-view-css', 3103 3122 ), 3104 - 'uri' => '/res/pkg/d7473548/core.pkg.css', 3123 + 'uri' => '/res/pkg/37409098/core.pkg.css', 3105 3124 'type' => 'css', 3106 3125 ), 3107 - 'f5ccc73b' => 3126 + '805a58d7' => 3108 3127 array( 3109 3128 'name' => 'core.pkg.js', 3110 3129 'symbols' => ··· 3127 3146 15 => 'javelin-behavior-phabricator-tooltips', 3128 3147 16 => 'phabricator-prefab', 3129 3148 ), 3130 - 'uri' => '/res/pkg/f5ccc73b/core.pkg.js', 3149 + 'uri' => '/res/pkg/805a58d7/core.pkg.js', 3131 3150 'type' => 'js', 3132 3151 ), 3133 3152 '2ba14b3d' => ··· 3268 3287 'reverse' => 3269 3288 array( 3270 3289 'aphront-attached-file-view-css' => '7839ae2d', 3271 - 'aphront-crumbs-view-css' => 'd7473548', 3272 - 'aphront-dialog-view-css' => 'd7473548', 3273 - 'aphront-error-view-css' => 'd7473548', 3274 - 'aphront-form-view-css' => 'd7473548', 3290 + 'aphront-crumbs-view-css' => '37409098', 3291 + 'aphront-dialog-view-css' => '37409098', 3292 + 'aphront-error-view-css' => '37409098', 3293 + 'aphront-form-view-css' => '37409098', 3275 3294 'aphront-headsup-action-list-view-css' => '2ba14b3d', 3276 - 'aphront-headsup-view-css' => 'd7473548', 3277 - 'aphront-list-filter-view-css' => 'd7473548', 3278 - 'aphront-pager-view-css' => 'd7473548', 3279 - 'aphront-panel-view-css' => 'd7473548', 3280 - 'aphront-side-nav-view-css' => 'd7473548', 3281 - 'aphront-table-view-css' => 'd7473548', 3282 - 'aphront-tokenizer-control-css' => 'd7473548', 3283 - 'aphront-tooltip-css' => 'd7473548', 3284 - 'aphront-typeahead-control-css' => 'd7473548', 3295 + 'aphront-headsup-view-css' => '37409098', 3296 + 'aphront-list-filter-view-css' => '37409098', 3297 + 'aphront-pager-view-css' => '37409098', 3298 + 'aphront-panel-view-css' => '37409098', 3299 + 'aphront-side-nav-view-css' => '37409098', 3300 + 'aphront-table-view-css' => '37409098', 3301 + 'aphront-tokenizer-control-css' => '37409098', 3302 + 'aphront-tooltip-css' => '37409098', 3303 + 'aphront-typeahead-control-css' => '37409098', 3285 3304 'differential-changeset-view-css' => '2ba14b3d', 3286 3305 'differential-core-view-css' => '2ba14b3d', 3287 3306 'differential-inline-comment-editor' => '8136e4a6', ··· 3300 3319 'javelin-behavior-aphront-basic-tokenizer' => 'dd024ca1', 3301 3320 'javelin-behavior-aphront-drag-and-drop' => '8136e4a6', 3302 3321 'javelin-behavior-aphront-drag-and-drop-textarea' => '8136e4a6', 3303 - 'javelin-behavior-aphront-form-disable-on-submit' => 'f5ccc73b', 3322 + 'javelin-behavior-aphront-form-disable-on-submit' => '805a58d7', 3304 3323 'javelin-behavior-audit-preview' => '5e68be89', 3305 3324 'javelin-behavior-differential-accept-with-errors' => '8136e4a6', 3306 3325 'javelin-behavior-differential-add-reviewers-and-ccs' => '8136e4a6', ··· 3319 3338 'javelin-behavior-maniphest-transaction-controls' => '7707de41', 3320 3339 'javelin-behavior-maniphest-transaction-expand' => '7707de41', 3321 3340 'javelin-behavior-maniphest-transaction-preview' => '7707de41', 3322 - 'javelin-behavior-phabricator-autofocus' => 'f5ccc73b', 3323 - 'javelin-behavior-phabricator-keyboard-shortcuts' => 'f5ccc73b', 3341 + 'javelin-behavior-phabricator-autofocus' => '805a58d7', 3342 + 'javelin-behavior-phabricator-keyboard-shortcuts' => '805a58d7', 3324 3343 'javelin-behavior-phabricator-object-selector' => '8136e4a6', 3325 - 'javelin-behavior-phabricator-oncopy' => 'f5ccc73b', 3326 - 'javelin-behavior-phabricator-tooltips' => 'f5ccc73b', 3327 - 'javelin-behavior-phabricator-watch-anchor' => 'f5ccc73b', 3328 - 'javelin-behavior-refresh-csrf' => 'f5ccc73b', 3344 + 'javelin-behavior-phabricator-oncopy' => '805a58d7', 3345 + 'javelin-behavior-phabricator-tooltips' => '805a58d7', 3346 + 'javelin-behavior-phabricator-watch-anchor' => '805a58d7', 3347 + 'javelin-behavior-refresh-csrf' => '805a58d7', 3329 3348 'javelin-behavior-repository-crossreference' => '8136e4a6', 3330 - 'javelin-behavior-workflow' => 'f5ccc73b', 3349 + 'javelin-behavior-workflow' => '805a58d7', 3331 3350 'javelin-dom' => 'c50bbf3a', 3332 3351 'javelin-event' => 'c50bbf3a', 3333 3352 'javelin-install' => 'c50bbf3a', 3334 3353 'javelin-json' => 'c50bbf3a', 3335 - 'javelin-mask' => 'f5ccc73b', 3354 + 'javelin-mask' => '805a58d7', 3336 3355 'javelin-request' => 'c50bbf3a', 3337 3356 'javelin-stratcom' => 'c50bbf3a', 3338 3357 'javelin-tokenizer' => 'dd024ca1', ··· 3344 3363 'javelin-uri' => 'c50bbf3a', 3345 3364 'javelin-util' => 'c50bbf3a', 3346 3365 'javelin-vector' => 'c50bbf3a', 3347 - 'javelin-workflow' => 'f5ccc73b', 3366 + 'javelin-workflow' => '805a58d7', 3348 3367 'maniphest-task-summary-css' => '7839ae2d', 3349 3368 'maniphest-transaction-detail-css' => '7839ae2d', 3350 - 'phabricator-app-buttons-css' => 'd7473548', 3369 + 'phabricator-app-buttons-css' => '37409098', 3351 3370 'phabricator-content-source-view-css' => '2ba14b3d', 3352 - 'phabricator-core-buttons-css' => 'd7473548', 3353 - 'phabricator-core-css' => 'd7473548', 3354 - 'phabricator-directory-css' => 'd7473548', 3371 + 'phabricator-core-buttons-css' => '37409098', 3372 + 'phabricator-core-css' => '37409098', 3373 + 'phabricator-directory-css' => '37409098', 3355 3374 'phabricator-drag-and-drop-file-upload' => '8136e4a6', 3356 - 'phabricator-dropdown-menu' => 'f5ccc73b', 3357 - 'phabricator-flag-css' => 'd7473548', 3358 - 'phabricator-jump-nav' => 'd7473548', 3359 - 'phabricator-keyboard-shortcut' => 'f5ccc73b', 3360 - 'phabricator-keyboard-shortcut-manager' => 'f5ccc73b', 3361 - 'phabricator-menu-item' => 'f5ccc73b', 3375 + 'phabricator-dropdown-menu' => '805a58d7', 3376 + 'phabricator-flag-css' => '37409098', 3377 + 'phabricator-jump-nav' => '37409098', 3378 + 'phabricator-keyboard-shortcut' => '805a58d7', 3379 + 'phabricator-keyboard-shortcut-manager' => '805a58d7', 3380 + 'phabricator-menu-item' => '805a58d7', 3362 3381 'phabricator-object-selector-css' => '2ba14b3d', 3363 - 'phabricator-paste-file-upload' => 'f5ccc73b', 3364 - 'phabricator-prefab' => 'f5ccc73b', 3382 + 'phabricator-paste-file-upload' => '805a58d7', 3383 + 'phabricator-prefab' => '805a58d7', 3365 3384 'phabricator-project-tag-css' => '7839ae2d', 3366 - 'phabricator-remarkup-css' => 'd7473548', 3385 + 'phabricator-remarkup-css' => '37409098', 3367 3386 'phabricator-shaped-request' => '8136e4a6', 3368 - 'phabricator-standard-page-view' => 'd7473548', 3369 - 'phabricator-tooltip' => 'f5ccc73b', 3370 - 'phabricator-transaction-view-css' => 'd7473548', 3371 - 'syntax-highlighting-css' => 'd7473548', 3387 + 'phabricator-standard-page-view' => '37409098', 3388 + 'phabricator-tooltip' => '805a58d7', 3389 + 'phabricator-transaction-view-css' => '37409098', 3390 + 'syntax-highlighting-css' => '37409098', 3372 3391 ), 3373 3392 ));
+7 -2
src/__phutil_library_map__.php
··· 1458 1458 'DifferentialChangesetListView' => 'AphrontView', 1459 1459 'DifferentialChangesetParserTestCase' => 'ArcanistPhutilTestCase', 1460 1460 'DifferentialChangesetViewController' => 'DifferentialController', 1461 - 'DifferentialComment' => 'DifferentialDAO', 1461 + 'DifferentialComment' => 1462 + array( 1463 + 0 => 'DifferentialDAO', 1464 + 1 => 'PhabricatorMarkupInterface', 1465 + ), 1462 1466 'DifferentialCommentEditor' => 'PhabricatorEditor', 1463 1467 'DifferentialCommentMail' => 'DifferentialMail', 1464 1468 'DifferentialCommentPreviewController' => 'DifferentialController', ··· 1954 1958 'PhabricatorIRCWhatsNewHandler' => 'PhabricatorIRCHandler', 1955 1959 'PhabricatorInfrastructureTestCase' => 'PhabricatorTestCase', 1956 1960 'PhabricatorInlineCommentController' => 'PhabricatorController', 1961 + 'PhabricatorInlineCommentInterface' => 'PhabricatorMarkupInterface', 1957 1962 'PhabricatorInlineCommentPreviewController' => 'PhabricatorController', 1958 1963 'PhabricatorInlineSummaryView' => 'AphrontView', 1959 1964 'PhabricatorJavelinLinter' => 'ArcanistLinter', ··· 2005 2010 'PhabricatorNotificationIndividualController' => 'PhabricatorNotificationController', 2006 2011 'PhabricatorNotificationListController' => 'PhabricatorNotificationController', 2007 2012 'PhabricatorNotificationPanelController' => 'PhabricatorNotificationController', 2008 - 'PhabricatorNotificationQuery' => 'PhabricatorOffsetPagedQuery', 2013 + 'PhabricatorNotificationQuery' => 'PhabricatorCursorPagedPolicyAwareQuery', 2009 2014 'PhabricatorNotificationStatusController' => 'PhabricatorNotificationController', 2010 2015 'PhabricatorNotificationStoryView' => 'PhabricatorNotificationView', 2011 2016 'PhabricatorNotificationView' => 'AphrontView',
+1
src/applications/files/controller/PhabricatorFileTransformController.php
··· 21 21 22 22 private $transform; 23 23 private $phid; 24 + private $key; 24 25 25 26 public function willProcessRequest(array $data) { 26 27 $this->transform = $data['transform'];
+4
src/view/form/control/PhabricatorRemarkupControl.php
··· 25 25 $this->setID($id); 26 26 } 27 27 28 + // We need to have this if previews render images, since Ajax can not 29 + // currently ship JS or CSS. 30 + require_celerity_resource('lightbox-attachment-css'); 31 + 28 32 Javelin::initBehavior( 29 33 'aphront-drag-and-drop-textarea', 30 34 array(
+15
webroot/rsrc/css/core/core.css
··· 114 114 img { 115 115 display: block; 116 116 } 117 + 118 + .busy { 119 + position: fixed; 120 + bottom: 8px; 121 + right: 8px; 122 + 123 + background: #ffffff url(/rsrc/image/loading.gif) center no-repeat; 124 + width: 64px; 125 + height: 64px; 126 + opacity: 0.5; 127 + z-index: 40; 128 + 129 + border: 1px solid #444444; 130 + border-radius: 8px; 131 + }
webroot/rsrc/image/loading.gif

This is a binary file and will not be displayed.

+51
webroot/rsrc/js/application/core/Busy.js
··· 1 + /** 2 + * @requires javelin-install 3 + * javelin-dom 4 + * @provides phabricator-busy 5 + * @javelin 6 + */ 7 + 8 + /** 9 + * Show a "busy" indicator onscreen so the user knows something awesome is 10 + * happening, and that the awesome thing isn't the application breaking or 11 + * locking up. 12 + * 13 + * Example usage: 14 + * 15 + * JX.Busy.start(); 16 + * // Do something... 17 + * JX.Busy.done(); 18 + * 19 + * Calls to `start()` should be paired with calls to `done()`. 20 + */ 21 + JX.install('Busy', { 22 + 23 + statics : { 24 + _depth : 0, 25 + start : function() { 26 + var self = JX.Busy; 27 + if (!self._depth) { 28 + self._indicator = JX.$N('div', {className: 'busy'}); 29 + self._indicator.style.display = 'none'; 30 + document.body.appendChild(self._indicator); 31 + 32 + // Don't actually show the indicator for a little while, to prevent 33 + // it from flashing briefly for every Ajax request. 34 + setTimeout(function() { 35 + self._indicator && (self._indicator.style.display = ''); 36 + }, 500); 37 + } 38 + self._depth++; 39 + }, 40 + done : function() { 41 + var self = JX.Busy; 42 + --self._depth; 43 + 44 + if (!self._depth) { 45 + JX.DOM.remove(self._indicator); 46 + self._indicator = null; 47 + } 48 + } 49 + } 50 + 51 + });
+8 -12
webroot/rsrc/js/application/core/behavior-lightbox-attachments.js
··· 5 5 * javelin-dom 6 6 * javelin-mask 7 7 * javelin-util 8 + * phabricator-busy 8 9 */ 9 10 10 11 JX.behavior('lightbox-attachments', function (config) { ··· 73 74 title : target_data.name 74 75 } 75 76 ); 76 - // Evil hack - onload events don't work through Stratcom to prevent 77 - // the inevitable systematic abuse if it was possible. This is a 78 - // weird case so just hack it...! 79 - img.onload = lightBoxOnload; 80 77 81 78 lightbox = JX.$N('div', 82 79 { ··· 169 166 JX.DOM.alterClass(document.body, 'lightbox-attached', true); 170 167 JX.Mask.show('jx-dark-mask'); 171 168 document.body.appendChild(lightbox); 169 + 170 + JX.Busy.start(); 171 + img.onload = function() { 172 + JX.DOM.alterClass(img, 'loading', false); 173 + JX.Busy.done(); 174 + } 175 + 172 176 img.src = img_uri; 173 177 } 174 178 ··· 225 229 e.prevent(); 226 230 closeLightBox(e); 227 231 el.click(); 228 - } 229 - 230 - function lightBoxOnload(e) { 231 - if (!lightbox) { 232 - return; 233 - } 234 - var img = JX.DOM.find(lightbox, 'img'); 235 - JX.DOM.alterClass(img, 'loading', false); 236 232 } 237 233 238 234 JX.Stratcom.listen(
+6
webroot/rsrc/js/application/core/behavior-refresh-csrf.js
··· 3 3 * @requires javelin-request 4 4 * javelin-behavior 5 5 * javelin-dom 6 + * phabricator-busy 6 7 */ 7 8 8 9 /** ··· 48 49 // Additionally, add the CSRF token as an HTTP header to every AJAX request. 49 50 JX.Request.listen('open', function(r) { 50 51 r.getTransport().setRequestHeader(config.header, current_token); 52 + JX.Busy.start(); 51 53 }); 54 + 55 + JX.Request.listen('finally', function(r) { 56 + JX.Busy.done(); 57 + }) 52 58 });