Move "hover over an inline to see the affected lines" code to the new class tree

+39 -39

resources/celerity/map.php

··· 12 12 'core.pkg.css' => 'ee5f28cd', 13 13 'core.pkg.js' => '8c5f913d', 14 14 'darkconsole.pkg.js' => '1f9a31bc', 15 - 'differential.pkg.css' => '4ff77743', 16 - 'differential.pkg.js' => '85543704', 15 + 'differential.pkg.css' => 'ea471cb0', 16 + 'differential.pkg.js' => '7f24021f', 17 17 'diffusion.pkg.css' => 'b93d9b8c', 18 18 'diffusion.pkg.js' => '84c8f8fd', 19 19 'favicon.ico' => '30672e08', ··· 64 64 'rsrc/css/application/dashboard/dashboard.css' => 'fe5b1869', 65 65 'rsrc/css/application/diff/inline-comment-summary.css' => '51efda3a', 66 66 'rsrc/css/application/differential/add-comment.css' => 'c47f8c40', 67 - 'rsrc/css/application/differential/changeset-view.css' => '69a3c268', 67 + 'rsrc/css/application/differential/changeset-view.css' => '6a77323e', 68 68 'rsrc/css/application/differential/core.css' => '5b7b8ff4', 69 69 'rsrc/css/application/differential/phui-inline-comment.css' => 'ffd1a542', 70 70 'rsrc/css/application/differential/revision-comment.css' => '14b8565a', ··· 390 390 'rsrc/js/application/dashboard/behavior-dashboard-move-panels.js' => '408bf173', 391 391 'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '453c5375', 392 392 'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => 'd4eecc63', 393 - 'rsrc/js/application/diff/DiffChangeset.js' => 'c5742feb', 394 - 'rsrc/js/application/diff/DiffChangesetList.js' => 'f1101e6e', 395 - 'rsrc/js/application/diff/DiffInline.js' => 'a81c29d4', 393 + 'rsrc/js/application/diff/DiffChangeset.js' => '34e513e2', 394 + 'rsrc/js/application/diff/DiffChangesetList.js' => 'fcbf80e9', 395 + 'rsrc/js/application/diff/DiffInline.js' => 'c2e9ff4c', 396 396 'rsrc/js/application/diff/behavior-preview-link.js' => '051c7832', 397 397 'rsrc/js/application/differential/behavior-comment-preview.js' => 'b064af76', 398 398 'rsrc/js/application/differential/behavior-diff-radios.js' => 'e1ff79b1', 399 - 'rsrc/js/application/differential/behavior-edit-inline-comments.js' => '89d11432', 399 + 'rsrc/js/application/differential/behavior-edit-inline-comments.js' => 'd59300f5', 400 400 'rsrc/js/application/differential/behavior-populate.js' => '5e41c819', 401 401 'rsrc/js/application/differential/behavior-toggle-files.js' => 'ca3f91eb', 402 402 'rsrc/js/application/differential/behavior-user-select.js' => 'a8d8459d', ··· 567 567 'conpherence-thread-manager' => '4d863052', 568 568 'conpherence-transaction-css' => '85129c68', 569 569 'd3' => 'a11a5ff2', 570 - 'differential-changeset-view-css' => '69a3c268', 570 + 'differential-changeset-view-css' => '6a77323e', 571 571 'differential-core-view-css' => '5b7b8ff4', 572 572 'differential-revision-add-comment-css' => 'c47f8c40', 573 573 'differential-revision-comment-css' => '14b8565a', ··· 619 619 'javelin-behavior-device' => 'bb1dd507', 620 620 'javelin-behavior-diff-preview-link' => '051c7832', 621 621 'javelin-behavior-differential-diff-radios' => 'e1ff79b1', 622 - 'javelin-behavior-differential-edit-inline-comments' => '89d11432', 622 + 'javelin-behavior-differential-edit-inline-comments' => 'd59300f5', 623 623 'javelin-behavior-differential-feedback-preview' => 'b064af76', 624 624 'javelin-behavior-differential-populate' => '5e41c819', 625 625 'javelin-behavior-differential-toggle-files' => 'ca3f91eb', ··· 779 779 'phabricator-darklog' => 'c8e1ffe3', 780 780 'phabricator-darkmessage' => 'c48cccdd', 781 781 'phabricator-dashboard-css' => 'fe5b1869', 782 - 'phabricator-diff-changeset' => 'c5742feb', 783 - 'phabricator-diff-changeset-list' => 'f1101e6e', 784 - 'phabricator-diff-inline' => 'a81c29d4', 782 + 'phabricator-diff-changeset' => '34e513e2', 783 + 'phabricator-diff-changeset-list' => 'fcbf80e9', 784 + 'phabricator-diff-inline' => 'c2e9ff4c', 785 785 'phabricator-drag-and-drop-file-upload' => '58dea2fa', 786 786 'phabricator-draggable-list' => 'bea6e7f4', 787 787 'phabricator-fatal-config-template-css' => '8f18fa41', ··· 1129 1129 'javelin-dom', 1130 1130 'javelin-workflow', 1131 1131 ), 1132 + '34e513e2' => array( 1133 + 'javelin-dom', 1134 + 'javelin-util', 1135 + 'javelin-stratcom', 1136 + 'javelin-install', 1137 + 'javelin-workflow', 1138 + 'javelin-router', 1139 + 'javelin-behavior-device', 1140 + 'javelin-vector', 1141 + 'phabricator-diff-inline', 1142 + ), 1132 1143 '3ab51e2c' => array( 1133 1144 'javelin-behavior', 1134 1145 'javelin-behavior-device', ··· 1398 1409 '6882e80a' => array( 1399 1410 'javelin-dom', 1400 1411 ), 1401 - '69a3c268' => array( 1402 - 'phui-inline-comment-view-css', 1403 - ), 1404 1412 '69adf288' => array( 1405 1413 'javelin-install', 1406 1414 ), 1415 + '6a77323e' => array( 1416 + 'phui-inline-comment-view-css', 1417 + ), 1407 1418 '6ad39b6f' => array( 1408 1419 'javelin-install', 1409 1420 'javelin-event', ··· 1564 1575 'phabricator-draggable-list', 1565 1576 'javelin-workboard-column', 1566 1577 ), 1567 - '89d11432' => array( 1568 - 'javelin-behavior', 1569 - 'javelin-stratcom', 1570 - 'javelin-dom', 1571 - 'javelin-util', 1572 - 'javelin-vector', 1573 - ), 1574 1578 '8a41885b' => array( 1575 1579 'javelin-install', 1576 1580 'javelin-dom', ··· 1718 1722 'javelin-stratcom', 1719 1723 'javelin-dom', 1720 1724 ), 1721 - 'a81c29d4' => array( 1722 - 'javelin-dom', 1723 - ), 1724 1725 'a8beebea' => array( 1725 1726 'phui-oi-list-view-css', 1726 1727 ), ··· 1909 1910 'javelin-dom', 1910 1911 'javelin-vector', 1911 1912 ), 1913 + 'c2e9ff4c' => array( 1914 + 'javelin-dom', 1915 + ), 1912 1916 'c420b0b9' => array( 1913 1917 'javelin-behavior', 1914 1918 'javelin-behavior-device', 1915 1919 'javelin-stratcom', 1916 1920 'phabricator-tooltip', 1917 1921 ), 1918 - 'c5742feb' => array( 1919 - 'javelin-dom', 1920 - 'javelin-util', 1921 - 'javelin-stratcom', 1922 - 'javelin-install', 1923 - 'javelin-workflow', 1924 - 'javelin-router', 1925 - 'javelin-behavior-device', 1926 - 'javelin-vector', 1927 - 'phabricator-diff-inline', 1928 - ), 1929 1922 'c587b80f' => array( 1930 1923 'javelin-install', 1931 1924 ), ··· 2043 2036 'javelin-dom', 2044 2037 'javelin-stratcom', 2045 2038 ), 2039 + 'd59300f5' => array( 2040 + 'javelin-behavior', 2041 + 'javelin-stratcom', 2042 + 'javelin-dom', 2043 + 'javelin-util', 2044 + 'javelin-vector', 2045 + ), 2046 2046 'd5a2d665' => array( 2047 2047 'javelin-behavior', 2048 2048 'javelin-stratcom', ··· 2174 2174 'javelin-workflow', 2175 2175 'javelin-json', 2176 2176 ), 2177 - 'f1101e6e' => array( 2178 - 'javelin-install', 2179 - ), 2180 2177 'f50152ad' => array( 2181 2178 'phui-timeline-view-css', 2182 2179 ), ··· 2223 2220 'javelin-behavior', 2224 2221 'javelin-dom', 2225 2222 'phortune-credit-card-form', 2223 + ), 2224 + 'fcbf80e9' => array( 2225 + 'javelin-install', 2226 2226 ), 2227 2227 'fe287620' => array( 2228 2228 'javelin-install',

+1 -4

webroot/rsrc/css/application/differential/changeset-view.css

··· 109 109 color: {$darkgreytext}; 110 110 } 111 111 112 - .differential-diff th.selected { 113 - background-color: {$sh-yellowbackground}; 114 - } 115 - 116 112 .differential-changeset-immutable .differential-diff th { 117 113 cursor: auto; 118 114 } ··· 308 304 top: 0; 309 305 left: 0; 310 306 box-sizing: border-box; 307 + pointer-events: none; 311 308 } 312 309 313 310 .differential-diff .inline > td {

+14

webroot/rsrc/js/application/diff/DiffChangeset.js

··· 27 27 this._encoding = data.encoding; 28 28 this._loaded = data.loaded; 29 29 30 + this._leftID = data.left; 31 + this._rightID = data.right; 32 + 30 33 this._inlines = []; 31 34 }, 32 35 ··· 48 51 _encoding: null, 49 52 _undoTemplates: null, 50 53 54 + _leftID: null, 55 + _rightID: null, 56 + 51 57 _inlines: null, 58 + 59 + getLeftChangesetID: function() { 60 + return this._leftID; 61 + }, 62 + 63 + getRightChangesetID: function() { 64 + return this._rightID; 65 + }, 52 66 53 67 /** 54 68 * Has the content of this changeset been loaded?

+142

webroot/rsrc/js/application/diff/DiffChangesetList.js

··· 56 56 'mousedown', 57 57 ['differential-inline-comment', 'differential-inline-header'], 58 58 onselect); 59 + 60 + var onhover = JX.bind(this, this._ifawake, this._onhover); 61 + JX.Stratcom.listen( 62 + ['mouseover', 'mouseout'], 63 + 'differential-inline-comment', 64 + onhover); 59 65 }, 60 66 61 67 properties: { ··· 74 80 _focusStart: null, 75 81 _focusEnd: null, 76 82 83 + _hoverNode: null, 84 + _hoverInline: null, 85 + _hoverOrigin: null, 86 + _hoverTarget: null, 87 + 77 88 sleep: function() { 78 89 this._asleep = true; 79 90 80 91 this._redrawFocus(); 92 + this._redrawSelection(); 93 + this.resetHover(); 81 94 }, 82 95 83 96 wake: function() { 84 97 this._asleep = false; 85 98 86 99 this._redrawFocus(); 100 + this._redrawSelection(); 87 101 88 102 if (this._initialized) { 89 103 return; ··· 428 442 return result; 429 443 }, 430 444 445 + _onhover: function(e) { 446 + if (e.getIsTouchEvent()) { 447 + return; 448 + } 449 + 450 + var inline; 451 + if (e.getType() == 'mouseout') { 452 + inline = null; 453 + } else { 454 + inline = this._getInlineForEvent(e); 455 + } 456 + 457 + this._setHoverInline(inline); 458 + }, 459 + 431 460 _onmore: function(e) { 432 461 e.kill(); 433 462 ··· 669 698 670 699 _onresize: function() { 671 700 this._redrawFocus(); 701 + this._redrawSelection(); 702 + this._redrawHover(); 672 703 }, 673 704 674 705 _onselect: function(e) { ··· 769 800 if (forms.length) { 770 801 JX.DOM.invoke(forms[0], 'shouldRefresh'); 771 802 } 803 + 804 + // Clear the mouse hover reticle after a substantive edit: we don't get 805 + // a "mouseout" event if the row vanished because of row being removed 806 + // after an edit. 807 + this.reseHover(); 772 808 }, 773 809 774 810 setFocus: function(node, extended_node) { ··· 810 846 this._focusNode = node; 811 847 } 812 848 return this._focusNode; 849 + }, 850 + 851 + _setHoverInline: function(inline) { 852 + this._hoverInline = inline; 853 + 854 + if (inline) { 855 + var changeset = inline.getChangeset(); 856 + 857 + var changeset_id; 858 + var side = inline.getDisplaySide(); 859 + if (side == 'right') { 860 + changeset_id = changeset.getRightChangesetID(); 861 + } else { 862 + changeset_id = changeset.getLeftChangesetID(); 863 + } 864 + 865 + var new_part; 866 + if (inline.isNewFile()) { 867 + new_part = 'N'; 868 + } else { 869 + new_part = 'O'; 870 + } 871 + 872 + var prefix = 'C' + changeset_id + new_part + 'L'; 873 + 874 + var number = inline.getLineNumber(); 875 + var length = inline.getLineLength(); 876 + 877 + var origin = JX.$(prefix + number); 878 + var target = JX.$(prefix + (number + length)); 879 + 880 + this._hoverOrigin = origin; 881 + this._hoverTarget = target; 882 + } else { 883 + this._hoverOrigin = null; 884 + this._hoverTarget = null; 885 + } 886 + 887 + this._redrawHover(); 888 + }, 889 + 890 + resetHover: function() { 891 + this._setHoverInline(null); 892 + }, 893 + 894 + _redrawHover: function() { 895 + var reticle = this._getHoverNode(); 896 + if (!this._hoverOrigin || this.isAsleep()) { 897 + JX.DOM.remove(reticle); 898 + return; 899 + } 900 + 901 + JX.DOM.getContentFrame().appendChild(reticle); 902 + 903 + var top = this._hoverOrigin; 904 + var bot = this._hoverTarget; 905 + if (JX.$V(top).y > JX.$V(bot).y) { 906 + var tmp = top; 907 + top = bot; 908 + bot = tmp; 909 + } 910 + 911 + // Find the leftmost cell that we're going to highlight: this is the next 912 + // <td /> in the row. In 2up views, it should be directly adjacent. In 913 + // 1up views, we may have to skip over the other line number column. 914 + var l = top; 915 + while (JX.DOM.isType(l, 'th')) { 916 + l = l.nextSibling; 917 + } 918 + 919 + // Find the rightmost cell that we're going to highlight: this is the 920 + // farthest consecutive, adjacent <td /> in the row. Sometimes the left 921 + // and right nodes are the same (left side of 2up view); sometimes we're 922 + // going to highlight several nodes (copy + code + coverage). 923 + var r = l; 924 + while (r.nextSibling && JX.DOM.isType(r.nextSibling, 'td')) { 925 + r = r.nextSibling; 926 + } 927 + 928 + var pos = JX.$V(l) 929 + .add(JX.Vector.getAggregateScrollForNode(l)); 930 + 931 + var dim = JX.$V(r) 932 + .add(JX.Vector.getAggregateScrollForNode(r)) 933 + .add(-pos.x, -pos.y) 934 + .add(JX.Vector.getDim(r)); 935 + 936 + var bpos = JX.$V(bot) 937 + .add(JX.Vector.getAggregateScrollForNode(bot)); 938 + dim.y = (bpos.y - pos.y) + JX.Vector.getDim(bot).y; 939 + 940 + pos.setPos(reticle); 941 + dim.setDim(reticle); 942 + 943 + JX.DOM.show(reticle); 944 + }, 945 + 946 + _getHoverNode: function() { 947 + if (!this._hoverNode) { 948 + var attributes = { 949 + className: 'differential-reticle' 950 + }; 951 + this._hoverNode = JX.$N('div', attributes); 952 + } 953 + 954 + return this._hoverNode; 813 955 }, 814 956 815 957 _deleteInlineByID: function(id) {

+18 -6

webroot/rsrc/js/application/diff/DiffInline.js

··· 56 56 this._displaySide = 'left'; 57 57 } 58 58 59 - this._number = data.number; 60 - this._length = data.length; 59 + this._number = parseInt(data.number, 10); 60 + this._length = parseInt(data.length, 10); 61 61 this._originalText = data.original; 62 62 this._isNewFile = 63 63 (this.getDisplaySide() == 'right') || ··· 70 70 71 71 bindToRange: function(data) { 72 72 this._displaySide = data.displaySide; 73 - this._number = data.number; 74 - this._length = data.length; 73 + this._number = parseInt(data.number, 10); 74 + this._length = parseInt(data.length, 10); 75 75 this._isNewFile = data.isNewFile; 76 76 this._changesetID = data.changesetID; 77 77 ··· 365 365 }, 366 366 367 367 _oncreateresponse: function(response) { 368 + try { 368 369 var rows = JX.$H(response).getNode(); 369 370 370 371 this._drawEditRows(rows); 372 + } catch (e) { 373 + JX.log(e); 374 + } 371 375 }, 372 376 373 377 _ondeleteresponse: function() { ··· 409 413 var first_row = JX.DOM.scry(rows, 'tr')[0]; 410 414 var first_meta; 411 415 var row = first_row; 416 + var anchor = cursor || this._row; 412 417 cursor = cursor || this._row.nextSibling; 413 418 414 419 var next_row; ··· 417 422 // into the document. 418 423 next_row = row.nextSibling; 419 424 420 - cursor.parentNode.insertBefore(row, cursor); 425 + // Bind edit and undo rows to this DiffInline object so that 426 + // interactions like hovering work properly. 427 + JX.Stratcom.getData(row).inline = this; 428 + 429 + anchor.parentNode.insertBefore(row, cursor); 421 430 cursor = row; 422 431 423 432 var row_meta = { ··· 528 537 this._removeRow(row); 529 538 530 539 this.setInvisible(false); 540 + 541 + this._didUpdate(true); 531 542 }, 532 543 533 544 _readText: function(row) { ··· 579 590 } 580 591 581 592 this.getChangeset().getChangesetList().redrawCursor(); 593 + this.getChangeset().getChangesetList().resetHover(); 582 594 583 - // Emit a resize event so that UI elements like the keyboad focus 595 + // Emit a resize event so that UI elements like the keyboard focus 584 596 // reticle can redraw properly. 585 597 JX.Stratcom.invoke('resize'); 586 598 },

+2 -71

webroot/rsrc/js/application/differential/behavior-edit-inline-comments.js

··· 11 11 12 12 var selecting = false; 13 13 var reticle = JX.$N('div', {className: 'differential-reticle'}); 14 - var old_cells = []; 15 14 JX.DOM.hide(reticle); 16 15 17 16 var origin = null; 18 17 var target = null; 19 18 var root = null; 20 19 var changeset = null; 21 - 22 - var editor = null; 23 - 24 - function updateReticleForComment(e) { 25 - root = e.getNode('differential-changeset'); 26 - if (!root) { 27 - return; 28 - } 29 - 30 - var data = e.getNodeData('differential-inline-comment'); 31 - var change = e.getNodeData('differential-changeset'); 32 - 33 - var id_part = data.on_right ? change.right : change.left; 34 - var new_part = data.isNewFile ? 'N' : 'O'; 35 - var prefix = 'C' + id_part + new_part + 'L'; 36 - 37 - origin = JX.$(prefix + data.number); 38 - target = JX.$(prefix + (parseInt(data.number, 10) + 39 - parseInt(data.length, 10))); 40 - 41 - updateReticle(); 42 - } 43 20 44 21 function updateReticle() { 45 22 JX.DOM.getContentFrame().appendChild(reticle); ··· 85 62 dim.setDim(reticle); 86 63 87 64 JX.DOM.show(reticle); 88 - 89 - // Find all the cells in the same row position between the top and bottom 90 - // cell, so we can highlight them. 91 - var seq = 0; 92 - var row = top.parentNode; 93 - for (seq = 0; seq < row.childNodes.length; seq++) { 94 - if (row.childNodes[seq] == top) { 95 - break; 96 - } 97 - } 98 - 99 - var cells = []; 100 - while (true) { 101 - cells.push(row.childNodes[seq]); 102 - if (row.childNodes[seq] == bot) { 103 - break; 104 - } 105 - row = row.nextSibling; 106 - } 107 - 108 - setSelectedCells(cells); 109 - } 110 - 111 - function setSelectedCells(new_cells) { 112 - updateSelectedCellsClass(old_cells, false); 113 - updateSelectedCellsClass(new_cells, true); 114 - old_cells = new_cells; 115 - } 116 - 117 - function updateSelectedCellsClass(cells, selected) { 118 - for (var ii = 0; ii < cells.length; ii++) { 119 - JX.DOM.alterClass(cells[ii], 'selected', selected); 120 - } 121 65 } 122 66 123 67 function hideReticle() { 124 68 JX.DOM.hide(reticle); 125 - setSelectedCells([]); 126 69 } 127 70 128 71 function isOnRight(node) { ··· 177 120 ['differential-changeset', 'tag:th'], 178 121 function(e) { 179 122 if (e.getIsTouchEvent()) { 180 - return; 181 - } 182 - 183 - if (editor) { 184 - // Don't update the reticle if we're editing a comment, since this 185 - // would be distracting and we want to keep the lines corresponding 186 - // to the comment highlighted during the edit. 187 123 return; 188 124 } 189 125 ··· 236 172 'mouseup', 237 173 null, 238 174 function(e) { 239 - if (editor || !selecting) { 175 + if (!selecting) { 240 176 return; 241 177 } 242 178 ··· 280 216 if (e.getIsTouchEvent()) { 281 217 return; 282 218 } 283 - 284 - if (e.getType() == 'mouseout') { 285 - hideReticle(); 286 - } else { 287 - updateReticleForComment(e); 288 - } 219 + hideReticle(); 289 220 }); 290 221 291 222 });

Configure Feed

Configure Feed