Give selected inline comments are more obvious selected state

+31 -31

resources/celerity/map.php

··· 12 12 'core.pkg.css' => 'a560707d', 13 13 'core.pkg.js' => '845355f4', 14 14 'dark-console.pkg.js' => '187792c2', 15 - 'differential.pkg.css' => 'b042ee8b', 16 - 'differential.pkg.js' => 'e0600220', 15 + 'differential.pkg.css' => '319dca29', 16 + 'differential.pkg.js' => 'ccf7bdca', 17 17 'diffusion.pkg.css' => '42c75c37', 18 18 'diffusion.pkg.js' => 'a98c0bf7', 19 19 'maniphest.pkg.css' => '35995d6d', ··· 65 65 'rsrc/css/application/differential/add-comment.css' => '7e5900d9', 66 66 'rsrc/css/application/differential/changeset-view.css' => 'df3afa61', 67 67 'rsrc/css/application/differential/core.css' => '7300a73e', 68 - 'rsrc/css/application/differential/phui-inline-comment.css' => '48acce5b', 68 + 'rsrc/css/application/differential/phui-inline-comment.css' => 'd5749acc', 69 69 'rsrc/css/application/differential/revision-comment.css' => '7dbc8d1d', 70 70 'rsrc/css/application/differential/revision-history.css' => '8aa3eac5', 71 71 'rsrc/css/application/differential/revision-list.css' => '93d2df7d', ··· 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' => 'd721533b', 383 - 'rsrc/js/application/diff/DiffChangesetList.js' => '8b0eab21', 384 - 'rsrc/js/application/diff/DiffInline.js' => '734d3c33', 382 + 'rsrc/js/application/diff/DiffChangeset.js' => 'bfdae878', 383 + 'rsrc/js/application/diff/DiffChangesetList.js' => 'a00bf62d', 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', 387 387 'rsrc/js/application/differential/behavior-diff-radios.js' => '925fe8cd', ··· 774 774 'phabricator-darklog' => '3b869402', 775 775 'phabricator-darkmessage' => '26cd4b73', 776 776 'phabricator-dashboard-css' => '5a205b9d', 777 - 'phabricator-diff-changeset' => 'd721533b', 778 - 'phabricator-diff-changeset-list' => '8b0eab21', 779 - 'phabricator-diff-inline' => '734d3c33', 777 + 'phabricator-diff-changeset' => 'bfdae878', 778 + 'phabricator-diff-changeset-list' => 'a00bf62d', 779 + 'phabricator-diff-inline' => 'b00168c1', 780 780 'phabricator-diff-path-view' => '8207abf9', 781 781 'phabricator-diff-tree-view' => '5d83623b', 782 782 'phabricator-drag-and-drop-file-upload' => '4370900d', ··· 854 854 'phui-icon-view-css' => '4cbc684a', 855 855 'phui-image-mask-css' => '62c7f4d2', 856 856 'phui-info-view-css' => 'a10a909b', 857 - 'phui-inline-comment-view-css' => '48acce5b', 857 + 'phui-inline-comment-view-css' => 'd5749acc', 858 858 'phui-invisible-character-view-css' => 'c694c4a4', 859 859 'phui-left-right-css' => '68513c34', 860 860 'phui-lightbox-css' => '4ebf22da', ··· 1560 1560 'javelin-util', 1561 1561 'javelin-reactor-node-calmer', 1562 1562 ), 1563 - '734d3c33' => array( 1564 - 'javelin-dom', 1565 - ), 1566 1563 '73ecc1f8' => array( 1567 1564 'javelin-behavior', 1568 1565 'javelin-behavior-device', ··· 1669 1666 'javelin-workflow', 1670 1667 'javelin-dom', 1671 1668 'phabricator-draggable-list', 1672 - ), 1673 - '8b0eab21' => array( 1674 - 'javelin-install', 1675 - 'phuix-button-view', 1676 - 'phabricator-diff-tree-view', 1677 1669 ), 1678 1670 '8b5c7d65' => array( 1679 1671 'javelin-behavior', ··· 1816 1808 'javelin-util', 1817 1809 'phabricator-keyboard-shortcut', 1818 1810 ), 1811 + 'a00bf62d' => array( 1812 + 'javelin-install', 1813 + 'phuix-button-view', 1814 + 'phabricator-diff-tree-view', 1815 + ), 1819 1816 'a17b84f1' => array( 1820 1817 'javelin-behavior', 1821 1818 'javelin-dom', ··· 1927 1924 'javelin-behavior-device', 1928 1925 'javelin-vector', 1929 1926 ), 1927 + 'b00168c1' => array( 1928 + 'javelin-dom', 1929 + ), 1930 1930 'b105a3a6' => array( 1931 1931 'javelin-behavior', 1932 1932 'javelin-stratcom', ··· 2019 2019 'bcec20f0' => array( 2020 2020 'phui-theme-css', 2021 2021 ), 2022 + 'bfdae878' => array( 2023 + 'javelin-dom', 2024 + 'javelin-util', 2025 + 'javelin-stratcom', 2026 + 'javelin-install', 2027 + 'javelin-workflow', 2028 + 'javelin-router', 2029 + 'javelin-behavior-device', 2030 + 'javelin-vector', 2031 + 'phabricator-diff-inline', 2032 + 'phabricator-diff-path-view', 2033 + 'phuix-button-view', 2034 + ), 2022 2035 'c03f2fb4' => array( 2023 2036 'javelin-install', 2024 2037 ), ··· 2089 2102 ), 2090 2103 'd4cc2d2a' => array( 2091 2104 'javelin-install', 2092 - ), 2093 - 'd721533b' => array( 2094 - 'javelin-dom', 2095 - 'javelin-util', 2096 - 'javelin-stratcom', 2097 - 'javelin-install', 2098 - 'javelin-workflow', 2099 - 'javelin-router', 2100 - 'javelin-behavior-device', 2101 - 'javelin-vector', 2102 - 'phabricator-diff-inline', 2103 - 'phabricator-diff-path-view', 2104 - 'phuix-button-view', 2105 2105 ), 2106 2106 'd8a86cfb' => array( 2107 2107 'javelin-behavior',

+2

src/applications/celerity/postprocessor/CelerityDefaultPostprocessor.php

··· 82 82 'alphablack' => '0,0,0', 83 83 84 84 // Base Greys 85 + 'thingreyborder' => '#dadee8', 85 86 'lightgreyborder' => '#C7CCD9', 86 87 'greyborder' => '#A1A6B0', 87 88 'darkgreyborder' => '#676A70', ··· 207 208 // Usually light yellow 208 209 'gentle.highlight' => '#fdf3da', 209 210 'gentle.highlight.border' => '#c9b8a8', 211 + 'gentle.highlight.background' => '#fffdf6', 210 212 211 213 'highlight.bright' => '#fdf320', 212 214

+8 -8

src/infrastructure/diff/view/PHUIDiffInlineCommentDetailView.php

··· 79 79 require_celerity_resource('phui-inline-comment-view-css'); 80 80 $inline = $this->getInlineComment(); 81 81 82 - $classes = array( 83 - 'differential-inline-comment', 84 - ); 85 - 86 82 $is_synthetic = false; 87 83 if ($inline->getSyntheticAuthor()) { 88 84 $is_synthetic = true; ··· 91 87 $is_preview = $this->preview; 92 88 93 89 $metadata = $this->getInlineCommentMetadata(); 90 + 91 + $classes = array( 92 + 'differential-inline-comment', 93 + ); 94 94 95 95 $sigil = 'differential-inline-comment'; 96 96 if ($is_preview) { 97 97 $sigil = $sigil.' differential-inline-comment-preview'; 98 - } 99 98 100 - $classes = array( 101 - 'differential-inline-comment', 102 - ); 99 + $classes[] = 'inline-comment-preview'; 100 + } else { 101 + $classes[] = 'inline-comment-element'; 102 + } 103 103 104 104 $content = $inline->getContent(); 105 105 $handles = $this->handles;

+22 -13

webroot/rsrc/css/application/differential/phui-inline-comment.css

··· 25 25 26 26 .differential-inline-comment, 27 27 .differential-inline-comment-edit { 28 - background: {$page.content}; 29 - border: 1px solid {$gentle.highlight.border}; 30 28 font: {$basefont}; 31 29 -moz-box-sizing: border-box; 32 30 -webkit-box-sizing: border-box; ··· 35 33 white-space: normal; 36 34 border-radius: 3px; 37 35 margin: 8px 12px; 36 + background: {$page.content}; 37 + border: 1px solid {$blueborder}; 38 38 } 39 39 40 40 .device .differential-inline-comment { ··· 48 48 .differential-inline-comment-head { 49 49 font-weight: bold; 50 50 color: {$darkbluetext}; 51 - border-bottom: 1px solid {$gentle.highlight.border}; 52 51 padding: 4px 5px 4px 8px; 53 - background-color: {$gentle.highlight}; 52 + 53 + background: {$lightbluebackground}; 54 + border-bottom: 1px solid {$blueborder}; 54 55 } 55 56 56 57 .differential-inline-comment-content { ··· 261 262 color: {$sky}; 262 263 } 263 264 264 - 265 - /* - Inline Is Done ----------------------------------------------------------- 266 - 267 - Is Done for Diff Author = grey, for Diff Viewer = yellow. 268 - 269 - */ 270 - 271 265 .differential-inline-comment.inline-is-done { 272 - border-color: {$lightgreyborder}; 266 + border-color: {$thingreyborder}; 273 267 } 274 268 275 269 .differential-inline-comment.inline-is-done 276 270 .differential-inline-comment-head { 277 271 background-color: {$lightgreybackground}; 278 - border-bottom-color: {$lightgreyborder}; 272 + border-bottom-color: {$thingreyborder}; 279 273 } 280 274 281 275 .differential-inline-comment.inline-is-done .differential-inline-comment-head ··· 427 421 .differential-inline-comment-synthetic .inline-button-divider { 428 422 border: none; 429 423 } 424 + 425 + .inline-comment-element .differential-inline-comment-head { 426 + cursor: pointer; 427 + } 428 + 429 + .inline-comment-selected .inline-comment-element { 430 + border-color: {$yellow}; 431 + background: {$gentle.highlight.background}; 432 + } 433 + 434 + .inline-comment-selected .inline-comment-element 435 + .differential-inline-comment-head { 436 + background: {$lightyellow}; 437 + border-color: {$yellow}; 438 + }

+14 -1

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

··· 50 50 this._loadChangesetState(data.changesetState); 51 51 } 52 52 53 + JX.enableDispatch(window, 'selectstart'); 54 + 53 55 var onselect = JX.bind(this, this._onClickHeader); 54 - JX.DOM.listen(this._node, 'mousedown', 'changeset-header', onselect); 56 + JX.DOM.listen( 57 + this._node, 58 + ['mousedown', 'selectstart'], 59 + 'changeset-header', 60 + onselect); 55 61 }, 56 62 57 63 members: { ··· 904 910 // a selection action: we want to let them select the path. 905 911 var path_name = e.getNode('changeset-header-path-name'); 906 912 if (path_name) { 913 + return; 914 + } 915 + 916 + // Don't allow repeatedly clicking a header to begin a "select word" or 917 + // "select line" operation. 918 + if (e.getType() === 'selectstart') { 919 + e.kill(); 907 920 return; 908 921 } 909 922

+26 -1

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

··· 29 29 var onscroll = JX.bind(this, this._ifawake, this._onscroll); 30 30 JX.Stratcom.listen('scroll', null, onscroll); 31 31 32 + JX.enableDispatch(window, 'selectstart'); 33 + 32 34 var onselect = JX.bind(this, this._ifawake, this._onselect); 33 35 JX.Stratcom.listen( 34 - 'mousedown', 36 + ['mousedown', 'selectstart'], 35 37 ['differential-inline-comment', 'differential-inline-header'], 36 38 onselect); 37 39 ··· 717 719 }, 718 720 719 721 _setSelectionState: function(item, scroll) { 722 + var old = this._cursorItem; 723 + 724 + if (old) { 725 + if (old.type === 'comment') { 726 + old.target.setIsSelected(false); 727 + } 728 + } 729 + 720 730 this._cursorItem = item; 731 + 732 + if (item) { 733 + if (item.type === 'comment') { 734 + item.target.setIsSelected(true); 735 + } 736 + } 737 + 721 738 this._redrawSelection(scroll); 722 739 723 740 return this; ··· 1123 1140 // If the user clicked some element inside the header, like an action 1124 1141 // icon, ignore the event. They have to click the header element itself. 1125 1142 if (e.getTarget() !== e.getNode('differential-inline-header')) { 1143 + return; 1144 + } 1145 + 1146 + // If the user has double-clicked or triple-clicked a header, we want to 1147 + // toggle the inline selection mode, not select text. Kill select events 1148 + // originating with this element as the target. 1149 + if (e.getType() === 'selectstart') { 1150 + e.kill(); 1126 1151 return; 1127 1152 } 1128 1153

+26 -2

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

··· 50 50 51 51 _startOffset: null, 52 52 _endOffset: null, 53 + _isSelected: false, 53 54 54 55 bindToRow: function(row) { 55 56 this._row = row; ··· 161 162 return this._endOffset; 162 163 }, 163 164 165 + setIsSelected: function(is_selected) { 166 + this._isSelected = is_selected; 167 + 168 + if (this._row) { 169 + JX.DOM.alterClass( 170 + this._row, 171 + 'inline-comment-selected', 172 + this._isSelected); 173 + } 174 + 175 + return this; 176 + }, 177 + 164 178 bindToRange: function(data) { 165 179 this._displaySide = data.displaySide; 166 180 this._number = parseInt(data.number, 10); ··· 168 182 this._isNewFile = data.isNewFile; 169 183 this._changesetID = data.changesetID; 170 184 this._isNew = true; 171 - this._startOffset = null; 172 - this._endOffset = null; 185 + 186 + if (data.hasOwnProperty('startOffset')) { 187 + this._startOffset = data.startOffset; 188 + } else { 189 + this._startOffset = null; 190 + } 191 + 192 + if (data.hasOwnProperty('endOffset')) { 193 + this._endOffset = data.endOffset; 194 + } else { 195 + this._endOffset = null; 196 + } 173 197 174 198 // Insert the comment after any other comments which already appear on 175 199 // the same row.

Configure Feed

Configure Feed