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.

Use a more consistent inline highlighting style with fewer redraws

Summary:
Ref T13513. The on-hover-inline reticle has switched over to have cell-based behavior. Switch the on-hover-line-number reticle to use the same behavior.

Also, clean up the dirty/redraw loop slightly: we no longer need to dirty on resize, and we don't need to redraw if the range isn't actually dirty.

Test Plan: Highlighted lines and line ranges. Hovered over inlines.

Maniphest Tasks: T13513

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

epriestley e959f934 c666cb9f

+117 -137
+32 -32
resources/celerity/map.php
··· 9 9 'names' => array( 10 10 'conpherence.pkg.css' => '0e3cf785', 11 11 'conpherence.pkg.js' => '020aebcf', 12 - 'core.pkg.css' => 'a560707d', 12 + 'core.pkg.css' => 'ba768cdb', 13 13 'core.pkg.js' => '845355f4', 14 14 'dark-console.pkg.js' => '187792c2', 15 - 'differential.pkg.css' => '319dca29', 16 - 'differential.pkg.js' => 'bb2a17fc', 15 + 'differential.pkg.css' => '42a2334f', 16 + 'differential.pkg.js' => '623b4801', 17 17 'diffusion.pkg.css' => '42c75c37', 18 18 'diffusion.pkg.js' => 'a98c0bf7', 19 19 'maniphest.pkg.css' => '35995d6d', ··· 63 63 'rsrc/css/application/diff/diff-tree-view.css' => 'e2d3e222', 64 64 'rsrc/css/application/diff/inline-comment-summary.css' => '81eb368d', 65 65 'rsrc/css/application/differential/add-comment.css' => '7e5900d9', 66 - 'rsrc/css/application/differential/changeset-view.css' => 'df3afa61', 66 + 'rsrc/css/application/differential/changeset-view.css' => '60c3d405', 67 67 'rsrc/css/application/differential/core.css' => '7300a73e', 68 68 'rsrc/css/application/differential/phui-inline-comment.css' => 'd5749acc', 69 69 'rsrc/css/application/differential/revision-comment.css' => '7dbc8d1d', ··· 116 116 'rsrc/css/core/core.css' => '1b29ed61', 117 117 'rsrc/css/core/remarkup.css' => 'c286eaef', 118 118 'rsrc/css/core/syntax.css' => '548567f6', 119 - 'rsrc/css/core/z-index.css' => '612e9522', 119 + 'rsrc/css/core/z-index.css' => 'ac3bfcd4', 120 120 'rsrc/css/diviner/diviner-shared.css' => '4bd263b0', 121 121 'rsrc/css/font/font-awesome.css' => '3883938a', 122 122 'rsrc/css/font/font-lato.css' => '23631304', ··· 379 379 'rsrc/js/application/dashboard/behavior-dashboard-move-panels.js' => 'a2ab19be', 380 380 'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '1e413dc9', 381 381 'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => '0116d3e8', 382 - 'rsrc/js/application/diff/DiffChangeset.js' => 'e02670b5', 383 - 'rsrc/js/application/diff/DiffChangesetList.js' => 'b1b8500b', 382 + 'rsrc/js/application/diff/DiffChangeset.js' => '68d963eb', 383 + 'rsrc/js/application/diff/DiffChangesetList.js' => 'ac403c32', 384 384 'rsrc/js/application/diff/DiffInline.js' => 'b00168c1', 385 385 'rsrc/js/application/diff/DiffPathView.js' => '8207abf9', 386 386 'rsrc/js/application/diff/DiffTreeView.js' => '5d83623b', ··· 559 559 'conpherence-transaction-css' => '3a3f5e7e', 560 560 'd3' => '9d068042', 561 561 'diff-tree-view-css' => 'e2d3e222', 562 - 'differential-changeset-view-css' => 'df3afa61', 562 + 'differential-changeset-view-css' => '60c3d405', 563 563 'differential-core-view-css' => '7300a73e', 564 564 'differential-revision-add-comment-css' => '7e5900d9', 565 565 'differential-revision-comment-css' => '7dbc8d1d', ··· 774 774 'phabricator-darklog' => '3b869402', 775 775 'phabricator-darkmessage' => '26cd4b73', 776 776 'phabricator-dashboard-css' => '5a205b9d', 777 - 'phabricator-diff-changeset' => 'e02670b5', 778 - 'phabricator-diff-changeset-list' => 'b1b8500b', 777 + 'phabricator-diff-changeset' => '68d963eb', 778 + 'phabricator-diff-changeset-list' => 'ac403c32', 779 779 'phabricator-diff-inline' => 'b00168c1', 780 780 'phabricator-diff-path-view' => '8207abf9', 781 781 'phabricator-diff-tree-view' => '5d83623b', ··· 806 806 'phabricator-title' => '43bc9360', 807 807 'phabricator-tooltip' => '83754533', 808 808 'phabricator-ui-example-css' => 'b4795059', 809 - 'phabricator-zindex-css' => '612e9522', 809 + 'phabricator-zindex-css' => 'ac3bfcd4', 810 810 'phame-css' => 'bb442327', 811 811 'pholio-css' => '88ef5ef1', 812 812 'pholio-edit-css' => '4df55b3b', ··· 1487 1487 '5faf27b9' => array( 1488 1488 'phuix-form-control-view', 1489 1489 ), 1490 + '60c3d405' => array( 1491 + 'phui-inline-comment-view-css', 1492 + ), 1490 1493 '60cd9241' => array( 1491 1494 'javelin-behavior', 1492 1495 ), ··· 1509 1512 'javelin-install', 1510 1513 'javelin-dom', 1511 1514 ), 1515 + '68d963eb' => array( 1516 + 'javelin-dom', 1517 + 'javelin-util', 1518 + 'javelin-stratcom', 1519 + 'javelin-install', 1520 + 'javelin-workflow', 1521 + 'javelin-router', 1522 + 'javelin-behavior-device', 1523 + 'javelin-vector', 1524 + 'phabricator-diff-inline', 1525 + 'phabricator-diff-path-view', 1526 + 'phuix-button-view', 1527 + ), 1512 1528 '6a1583a8' => array( 1513 1529 'javelin-behavior', 1514 1530 'javelin-history', ··· 1895 1911 'javelin-dom', 1896 1912 'phabricator-notification', 1897 1913 ), 1914 + 'ac403c32' => array( 1915 + 'javelin-install', 1916 + 'phuix-button-view', 1917 + 'phabricator-diff-tree-view', 1918 + ), 1898 1919 'ad258e28' => array( 1899 1920 'javelin-behavior', 1900 1921 'javelin-dom', ··· 1926 1947 'javelin-behavior', 1927 1948 'javelin-stratcom', 1928 1949 'javelin-dom', 1929 - ), 1930 - 'b1b8500b' => array( 1931 - 'javelin-install', 1932 - 'phuix-button-view', 1933 - 'phabricator-diff-tree-view', 1934 1950 ), 1935 1951 'b26a41e4' => array( 1936 1952 'javelin-behavior', ··· 2107 2123 'javelin-behavior', 2108 2124 'javelin-uri', 2109 2125 'phabricator-notification', 2110 - ), 2111 - 'df3afa61' => array( 2112 - 'phui-inline-comment-view-css', 2113 - ), 2114 - 'e02670b5' => array( 2115 - 'javelin-dom', 2116 - 'javelin-util', 2117 - 'javelin-stratcom', 2118 - 'javelin-install', 2119 - 'javelin-workflow', 2120 - 'javelin-router', 2121 - 'javelin-behavior-device', 2122 - 'javelin-vector', 2123 - 'phabricator-diff-inline', 2124 - 'phabricator-diff-path-view', 2125 - 'phuix-button-view', 2126 2126 ), 2127 2127 'e150bd50' => array( 2128 2128 'javelin-behavior',
+8 -11
webroot/rsrc/css/application/differential/changeset-view.css
··· 329 329 margin-right: 8px; 330 330 } 331 331 332 - .differential-reticle { 333 - background-color: {$sh-yellowbackground}; 334 - border: 1px solid {$sh-yellowborder}; 335 - position: absolute; 336 - opacity: 0.5; 337 - top: 0; 338 - left: 0; 339 - box-sizing: border-box; 340 - pointer-events: none; 341 - } 342 - 343 332 .differential-loading { 344 333 border-top: 1px solid {$gentle.highlight.border}; 345 334 border-bottom: 1px solid {$gentle.highlight.border}; ··· 496 485 background: {$highlight.bright}; 497 486 } 498 487 488 + .differential-diff tr td.n.inline-hover { 489 + background: {$yellow}; 490 + } 491 + 499 492 .inline-hover-container { 500 493 position: absolute; 501 494 color: {$lightgreytext}; ··· 511 504 color: {$blacktext}; 512 505 background: {$highlight.bright}; 513 506 } 507 + 508 + .differential-diff td.inline-hover span.bright { 509 + background: transparent; 510 + }
-4
webroot/rsrc/css/core/z-index.css
··· 16 16 z-index: 2; 17 17 } 18 18 19 - .differential-reticle { 20 - z-index: 2; 21 - } 22 - 23 19 .differential-changeset { 24 20 z-index: 2; 25 21 }
+1 -1
webroot/rsrc/js/application/diff/DiffChangeset.js
··· 44 44 this._isOwned = data.isOwned; 45 45 this._isLoading = true; 46 46 47 - this._inlines = []; 47 + this._inlines = null; 48 48 49 49 if (data.changesetState) { 50 50 this._loadChangesetState(data.changesetState);
+76 -89
webroot/rsrc/js/application/diff/DiffChangesetList.js
··· 87 87 _focusStart: null, 88 88 _focusEnd: null, 89 89 90 - _hoverNode: null, 91 90 _hoverInline: null, 92 91 _hoverOrigin: null, 93 92 _hoverTarget: null, ··· 1127 1126 _onresize: function() { 1128 1127 this._redrawFocus(); 1129 1128 this._redrawSelection(); 1130 - this._redrawHover(); 1131 1129 1132 1130 // Force a banner redraw after a resize event. Particularly, this makes 1133 1131 // sure the inline state updates immediately after an inline edit ··· 1280 1278 }, 1281 1279 1282 1280 _setHoverInline: function(inline) { 1283 - if (inline && (this._hoverInline === inline)) { 1284 - return; 1285 - } 1286 - 1287 - this._hoverInline = inline; 1281 + var origin = null; 1282 + var target = null; 1288 1283 1289 1284 if (inline) { 1290 1285 var changeset = inline.getChangeset(); ··· 1310 1305 var length = inline.getLineLength(); 1311 1306 1312 1307 try { 1313 - var origin = JX.$(prefix + number); 1314 - var target = JX.$(prefix + (number + length)); 1315 - 1316 - this._hoverOrigin = origin; 1317 - this._hoverTarget = target; 1308 + origin = JX.$(prefix + number); 1309 + target = JX.$(prefix + (number + length)); 1318 1310 } catch (error) { 1319 1311 // There may not be any nodes present in the document. A case where 1320 1312 // this occurs is when you reply to a ghost inline which was made ··· 1322 1314 // the file was later shortened so those lines no longer exist. For 1323 1315 // more details, see T11662. 1324 1316 1325 - this._hoverOrigin = null; 1326 - this._hoverTarget = null; 1317 + origin = null; 1318 + target = null; 1327 1319 } 1328 - } else { 1329 - this._hoverOrigin = null; 1330 - this._hoverTarget = null; 1331 1320 } 1332 1321 1333 - this._redrawHover(); 1322 + this._setHoverRange(origin, target, inline); 1334 1323 }, 1335 1324 1336 - _setHoverRange: function(origin, target) { 1337 - this._hoverOrigin = origin; 1338 - this._hoverTarget = target; 1325 + _setHoverRange: function(origin, target, inline) { 1326 + inline = inline || null; 1339 1327 1340 - this._redrawHover(); 1328 + var origin_dirty = (origin !== this._hoverOrigin); 1329 + var target_dirty = (target !== this._hoverTarget); 1330 + var inline_dirty = (inline !== this._hoverInline); 1331 + 1332 + var any_dirty = (origin_dirty || target_dirty || inline_dirty); 1333 + if (any_dirty) { 1334 + this._hoverOrigin = origin; 1335 + this._hoverTarget = target; 1336 + this._hoverInline = inline; 1337 + this._redrawHover(); 1338 + } 1341 1339 }, 1342 1340 1343 1341 resetHover: function() { 1344 - this._setHoverInline(null); 1345 - 1346 - this._hoverOrigin = null; 1347 - this._hoverTarget = null; 1342 + this._setHoverRange(null, null, null); 1348 1343 }, 1349 1344 1350 1345 _redrawHover: function() { 1351 - var ii; 1352 - 1353 1346 var map = this._hoverMap; 1354 1347 if (map) { 1355 - for (ii = 0; ii < map.length; ii++) { 1356 - JX.DOM.alterClass(map[ii].cellNode, 'inline-hover', false); 1357 - 1358 - if (map[ii].bright) { 1359 - JX.DOM.alterClass(map[ii].cellNode, 'inline-hover-bright', false); 1360 - } 1361 - 1362 - if (map[ii].hoverNode) { 1363 - JX.DOM.remove(map[ii].hoverNode); 1364 - } 1365 - } 1366 1348 this._hoverMap = null; 1349 + this._applyHoverHighlight(map, false); 1367 1350 } 1368 1351 1369 - var reticle = this._getHoverNode(); 1370 - JX.DOM.remove(reticle); 1352 + var rows = this._hoverRows; 1353 + if (rows) { 1354 + this._hoverRows = null; 1355 + this._applyHoverHighlight(rows, false); 1356 + } 1371 1357 1372 1358 if (!this._hoverOrigin || this.isAsleep()) { 1373 1359 return; ··· 1394 1380 return; 1395 1381 } 1396 1382 1383 + rows = this._findContentCells(top, bot, content_cell); 1384 + 1397 1385 var inline = this._hoverInline; 1398 1386 if (!inline) { 1399 - var pos = JX.$V(content_cell) 1400 - .add(JX.Vector.getAggregateScrollForNode(content_cell)); 1401 - 1402 - var dim = JX.$V(content_cell) 1403 - .add(JX.Vector.getAggregateScrollForNode(content_cell)) 1404 - .add(-pos.x, -pos.y) 1405 - .add(JX.Vector.getDim(content_cell)); 1406 - 1407 - var bpos = JX.$V(bot) 1408 - .add(JX.Vector.getAggregateScrollForNode(bot)); 1409 - dim.y = (bpos.y - pos.y) + JX.Vector.getDim(bot).y; 1410 - 1411 - pos.setPos(reticle); 1412 - dim.setDim(reticle); 1413 - 1414 - JX.DOM.getContentFrame().appendChild(reticle); 1415 - JX.DOM.show(reticle); 1416 - 1387 + this._hoverRows = rows; 1388 + this._applyHoverHighlight(this._hoverRows, true); 1417 1389 return; 1418 1390 } 1419 1391 1420 1392 if (!inline.hoverMap) { 1421 - inline.hoverMap = this._newHoverMap(top, bot, content_cell, inline); 1393 + inline.hoverMap = this._newHoverMap(rows, inline); 1422 1394 } 1423 1395 1424 - map = inline.hoverMap; 1425 - for (ii = 0; ii < map.length; ii++) { 1426 - JX.DOM.alterClass(map[ii].cellNode, 'inline-hover', true); 1427 - if (map[ii].bright) { 1428 - JX.DOM.alterClass(map[ii].cellNode, 'inline-hover-bright', true); 1396 + this._hoverMap = inline.hoverMap; 1397 + this._applyHoverHighlight(this._hoverMap, true); 1398 + }, 1399 + 1400 + _applyHoverHighlight: function(items, on) { 1401 + for (var ii = 0; ii < items.length; ii++) { 1402 + var item = items[ii]; 1403 + 1404 + JX.DOM.alterClass(item.lineNode, 'inline-hover', on); 1405 + JX.DOM.alterClass(item.cellNode, 'inline-hover', on); 1406 + 1407 + if (item.bright) { 1408 + JX.DOM.alterClass(item.cellNode, 'inline-hover-bright', on); 1429 1409 } 1430 - if (map[ii].hoverNode) { 1431 - map[ii].cellNode.insertBefore( 1432 - map[ii].hoverNode, 1433 - map[ii].cellNode.firstChild); 1410 + 1411 + if (item.hoverNode) { 1412 + if (on) { 1413 + item.cellNode.insertBefore( 1414 + item.hoverNode, 1415 + item.cellNode.firstChild); 1416 + } else { 1417 + JX.DOM.remove(item.hoverNode); 1418 + } 1434 1419 } 1435 1420 } 1436 - this._hoverMap = map; 1437 1421 }, 1438 1422 1439 - _newHoverMap: function(top, bot, content_cell, inline) { 1440 - var start = inline.getStartOffset(); 1441 - var end = inline.getEndOffset(); 1442 - 1423 + _findContentCells: function(top, bot, content_cell) { 1443 1424 var head_row = JX.DOM.findAbove(top, 'tr'); 1444 1425 var last_row = JX.DOM.findAbove(bot, 'tr'); 1445 1426 ··· 1447 1428 var rows = []; 1448 1429 var idx = null; 1449 1430 var ii; 1431 + var line_cell = null; 1450 1432 do { 1433 + line_cell = null; 1451 1434 for (ii = 0; ii < cursor.childNodes.length; ii++) { 1452 1435 var child = cursor.childNodes[ii]; 1453 1436 if (!JX.DOM.isType(child, 'td')) { 1454 1437 continue; 1455 1438 } 1456 1439 1440 + if (child.getAttribute('data-n')) { 1441 + line_cell = child; 1442 + } 1443 + 1457 1444 if (child === content_cell) { 1458 1445 idx = ii; 1459 1446 } 1460 1447 1461 - if (ii === idx) { 1462 - if (!this._isContentCell(child)) { 1463 - break; 1464 - } 1448 + if (ii !== idx) { 1449 + continue; 1450 + } 1451 + 1452 + if (this._isContentCell(child)) { 1465 1453 rows.push({ 1454 + lineNode: line_cell, 1466 1455 cellNode: child 1467 1456 }); 1468 1457 } 1458 + 1459 + break; 1469 1460 } 1470 1461 1471 1462 if (cursor === last_row) { ··· 1474 1465 1475 1466 cursor = cursor.nextSibling; 1476 1467 } while (cursor); 1468 + 1469 + return rows; 1470 + }, 1471 + 1472 + _newHoverMap: function(rows, inline) { 1473 + var start = inline.getStartOffset(); 1474 + var end = inline.getEndOffset(); 1477 1475 1478 1476 var info; 1479 1477 var content; ··· 1572 1570 } 1573 1571 1574 1572 return rows; 1575 - }, 1576 - 1577 - _getHoverNode: function() { 1578 - if (!this._hoverNode) { 1579 - var attributes = { 1580 - className: 'differential-reticle' 1581 - }; 1582 - this._hoverNode = JX.$N('div', attributes); 1583 - } 1584 - 1585 - return this._hoverNode; 1586 1573 }, 1587 1574 1588 1575 _deleteInlineByID: function(id) {