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.

Improve line breaking behavior in Firefox and Chrome under complex conditions

Summary: See <https://github.com/phacility/phabricator/pull/854>. In some situations, `line-break: anywhere` produces better behavior than `word-break: break-all`. It never appears to produce worse behavior.

Test Plan:
- Break behavior changes if a line contains "<span />" elements caused by syntax highlighting. This CSS adjustment only appears to apply to text with internal "<span />" elements.
- This specifically impacts certain internal breakpoints adjacent to punctuation, so the test case is highly specific. Generic test cases with latin word characters do not evidence any behavioral changes.
- This change appears to have no impact on Safari, which uses the better behavior in all cases.
- Before Patch: In Firefox and Chrome, this specific change breaks awkwardly. There is more room for text to fit on the broken line:

Firefox

{F7480567}

Chrome

{F7480568}

- After Patch: Firefox and Chrome break the line better. Here's Firefox:

{F7480569}

- Additional context:

Safari Behavior (Unchanged)

{F7480570}

Chrome with no highlighting (desirable behavior). Firefox does the same thing.

{F7480571}

Also tested other cases, which seem never-worse in any browser.

{F7480574}

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

epriestley 1da54837 3dea9208

+10 -10
+8 -8
resources/celerity/map.php
··· 9 9 'names' => array( 10 10 'conpherence.pkg.css' => '0e3cf785', 11 11 'conpherence.pkg.js' => '020aebcf', 12 - 'core.pkg.css' => '1b80c45d', 12 + 'core.pkg.css' => 'a560707d', 13 13 'core.pkg.js' => '1e667bcb', 14 14 'dark-console.pkg.js' => '187792c2', 15 15 'differential.pkg.css' => 'd71d4531', ··· 115 115 'rsrc/css/application/uiexample/example.css' => 'b4795059', 116 116 'rsrc/css/core/core.css' => '1b29ed61', 117 117 'rsrc/css/core/remarkup.css' => 'c286eaef', 118 - 'rsrc/css/core/syntax.css' => '220b85f9', 118 + 'rsrc/css/core/syntax.css' => '548567f6', 119 119 'rsrc/css/core/z-index.css' => '612e9522', 120 120 'rsrc/css/diviner/diviner-shared.css' => '4bd263b0', 121 121 'rsrc/css/font/font-awesome.css' => '3883938a', ··· 172 172 'rsrc/css/phui/phui-pager.css' => 'd022c7ad', 173 173 'rsrc/css/phui/phui-pinboard-view.css' => '1f08f5d8', 174 174 'rsrc/css/phui/phui-policy-section-view.css' => '139fdc64', 175 - 'rsrc/css/phui/phui-property-list-view.css' => '9c477af1', 175 + 'rsrc/css/phui/phui-property-list-view.css' => '5adf7078', 176 176 'rsrc/css/phui/phui-remarkup-preview.css' => '91767007', 177 177 'rsrc/css/phui/phui-segment-bar-view.css' => '5166b370', 178 178 'rsrc/css/phui/phui-spacing.css' => 'b05cadc3', ··· 869 869 'phui-pager-css' => 'd022c7ad', 870 870 'phui-pinboard-view-css' => '1f08f5d8', 871 871 'phui-policy-section-view-css' => '139fdc64', 872 - 'phui-property-list-view-css' => '9c477af1', 872 + 'phui-property-list-view-css' => '5adf7078', 873 873 'phui-remarkup-preview-css' => '91767007', 874 874 'phui-segment-bar-view-css' => '5166b370', 875 875 'phui-spacing-css' => 'b05cadc3', ··· 907 907 'sprite-login-css' => '18b368a6', 908 908 'sprite-tokens-css' => 'f1896dc5', 909 909 'syntax-default-css' => '055fc231', 910 - 'syntax-highlighting-css' => '220b85f9', 910 + 'syntax-highlighting-css' => '548567f6', 911 911 'tokens-css' => 'ce5a50bd', 912 912 'trigger-rule' => '41b7b4f6', 913 913 'trigger-rule-control' => '5faf27b9', ··· 1094 1094 'phabricator-diff-inline', 1095 1095 'phabricator-diff-path-view', 1096 1096 'phuix-button-view', 1097 - ), 1098 - '220b85f9' => array( 1099 - 'syntax-default-css', 1100 1097 ), 1101 1098 '225bbb98' => array( 1102 1099 'javelin-install', ··· 1408 1405 'javelin-vector', 1409 1406 'phuix-autocomplete', 1410 1407 'javelin-mask', 1408 + ), 1409 + '548567f6' => array( 1410 + 'syntax-default-css', 1411 1411 ), 1412 1412 '55a24e84' => array( 1413 1413 'javelin-install',
+1 -1
webroot/rsrc/css/core/syntax.css
··· 12 12 13 13 .remarkup-code td > span { 14 14 display: inline; 15 - word-break: break-all; 15 + line-break: anywhere; 16 16 } 17 17 18 18 .remarkup-code .rbw_r { color: red; }
+1 -1
webroot/rsrc/css/phui/phui-property-list-view.css
··· 364 364 margin: 4px 0; 365 365 padding: 8px; 366 366 white-space: pre-wrap; 367 - word-break: break-all; 367 + line-break: anywhere; 368 368 } 369 369 370 370 .jupyter-output-stderr {