@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
Stop using JX.Scrollbar for main page content
Summary:
Ref T8151. This is option (5). It needs a few adjustments but feels pretty good. Major issues are:
- Without a mouse, the scrollbars overlap by default, so we //must// move the column off the right margin.
- Scrolling sometimes "bleeds" between the chat vs the main frame in a way that's not as discrete as the old framed content, but feels generally reasonable to me.
If we pursue this, I'd plan to make these additional changes:
- Move the panel away from the right margin only if the page scrollbars are zero-width (i.e., in OSX trackpad mode).
- Fix the notch in the upper right corner when the chat is moved away from the right margin.
- Probably remove the body "overflow-y: scroll" on Conpherence and Workboards.
- Update the resizing code to deal with 300px vs 315px widths.
- We can probably clean up some JX.Scrollbar "main panel" code.
Here's the "bad" case, where I've visually separated the column to provide room for a scrollbar. This isn't ideal, but looks and feels OK to me:
{F398375}
Test Plan:
- Tried Firefox, Chrome, Safari, with and without a mouse.
- Tried normal Conpherence.
Reviewers: btrahan, chad
Reviewed By: btrahan
Subscribers: avivey, epriestley
Maniphest Tasks: T8151
Differential Revision: https://secure.phabricator.com/D12789
+102
-68
+32
-32
resources/celerity/map.php
+32
-32
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => 'a821cfc9',
11
-
'core.pkg.js' => '919c56b5',
10
+
'core.pkg.css' => 'ed3d6355',
11
+
'core.pkg.js' => '31eaf90a',
12
12
'darkconsole.pkg.js' => 'e7393ebb',
13
13
'differential.pkg.css' => 'bb338e4b',
14
14
'differential.pkg.js' => '895b8d62',
···
37
37
'rsrc/css/application/base/main-menu-view.css' => '663e3810',
38
38
'rsrc/css/application/base/notification-menu.css' => '3c9d8aa1',
39
39
'rsrc/css/application/base/phabricator-application-launch-view.css' => '16ca323f',
40
-
'rsrc/css/application/base/standard-page-view.css' => 'd3e1abe9',
40
+
'rsrc/css/application/base/standard-page-view.css' => '2acd4611',
41
41
'rsrc/css/application/chatlog/chatlog.css' => '852140ff',
42
42
'rsrc/css/application/conduit/conduit-api.css' => '7bc725c4',
43
43
'rsrc/css/application/config/config-options.css' => '7fedf08b',
···
45
45
'rsrc/css/application/config/config-welcome.css' => '6abd79be',
46
46
'rsrc/css/application/config/setup-issue.css' => '22270af2',
47
47
'rsrc/css/application/config/unhandled-exception.css' => '37d4f9a2',
48
-
'rsrc/css/application/conpherence/durable-column.css' => '2e68a92f',
48
+
'rsrc/css/application/conpherence/durable-column.css' => '8c43d6ac',
49
49
'rsrc/css/application/conpherence/menu.css' => 'f389e048',
50
50
'rsrc/css/application/conpherence/message-pane.css' => '0e75feef',
51
51
'rsrc/css/application/conpherence/notification.css' => 'd208f806',
52
-
'rsrc/css/application/conpherence/transaction.css' => '885433f0',
52
+
'rsrc/css/application/conpherence/transaction.css' => '42a457f6',
53
53
'rsrc/css/application/conpherence/update.css' => '1099a660',
54
54
'rsrc/css/application/conpherence/widget-pane.css' => '2af42ebe',
55
55
'rsrc/css/application/contentsource/content-source-view.css' => '4b8b05d4',
···
108
108
'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
109
109
'rsrc/css/application/tokens/tokens.css' => '3d0f239e',
110
110
'rsrc/css/application/uiexample/example.css' => '528b19de',
111
-
'rsrc/css/core/core.css' => '76e8ee93',
111
+
'rsrc/css/core/core.css' => 'aaea7a7a',
112
112
'rsrc/css/core/remarkup.css' => '0037bdbf',
113
113
'rsrc/css/core/syntax.css' => '6b7b24d9',
114
-
'rsrc/css/core/z-index.css' => '3b612549',
114
+
'rsrc/css/core/z-index.css' => '8414a09b',
115
115
'rsrc/css/diviner/diviner-shared.css' => '38813222',
116
116
'rsrc/css/font/font-awesome.css' => 'e2e712fe',
117
117
'rsrc/css/font/font-source-sans-pro.css' => '8906c07b',
···
211
211
'rsrc/externals/javelin/lib/Resource.js' => '44959b73',
212
212
'rsrc/externals/javelin/lib/Routable.js' => 'b3e7d692',
213
213
'rsrc/externals/javelin/lib/Router.js' => '29274e2b',
214
-
'rsrc/externals/javelin/lib/Scrollbar.js' => 'eaa5b321',
214
+
'rsrc/externals/javelin/lib/Scrollbar.js' => '4f812f8a',
215
215
'rsrc/externals/javelin/lib/Sound.js' => '949c0fe5',
216
216
'rsrc/externals/javelin/lib/URI.js' => '6eff08aa',
217
217
'rsrc/externals/javelin/lib/Vector.js' => '2caa8fb8',
···
350
350
'rsrc/js/application/config/behavior-reorder-fields.js' => '14a827de',
351
351
'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '9e507b59',
352
352
'rsrc/js/application/conpherence/behavior-drag-and-drop-photo.js' => 'cf86d16a',
353
-
'rsrc/js/application/conpherence/behavior-durable-column.js' => '657c2b50',
353
+
'rsrc/js/application/conpherence/behavior-durable-column.js' => 'ac11eb8a',
354
354
'rsrc/js/application/conpherence/behavior-menu.js' => '804b0773',
355
355
'rsrc/js/application/conpherence/behavior-pontificate.js' => '21ba5861',
356
356
'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
···
512
512
'conduit-api-css' => '7bc725c4',
513
513
'config-options-css' => '7fedf08b',
514
514
'config-welcome-css' => '6abd79be',
515
-
'conpherence-durable-column-view' => '2e68a92f',
515
+
'conpherence-durable-column-view' => '8c43d6ac',
516
516
'conpherence-menu-css' => 'f389e048',
517
517
'conpherence-message-pane-css' => '0e75feef',
518
518
'conpherence-notification-css' => 'd208f806',
519
519
'conpherence-thread-manager' => '9e507b59',
520
-
'conpherence-transaction-css' => '885433f0',
520
+
'conpherence-transaction-css' => '42a457f6',
521
521
'conpherence-update-css' => '1099a660',
522
522
'conpherence-widget-pane-css' => '2af42ebe',
523
523
'differential-changeset-view-css' => 'e19cfd6e',
···
584
584
'javelin-behavior-diffusion-locate-file' => '6d3e1947',
585
585
'javelin-behavior-diffusion-pull-lastmodified' => '2b228192',
586
586
'javelin-behavior-doorkeeper-tag' => 'e5822781',
587
-
'javelin-behavior-durable-column' => '657c2b50',
587
+
'javelin-behavior-durable-column' => 'ac11eb8a',
588
588
'javelin-behavior-error-log' => '6882e80a',
589
589
'javelin-behavior-event-all-day' => 'ca5fa62a',
590
590
'javelin-behavior-fancy-datepicker' => '5c0f680f',
···
681
681
'javelin-resource' => '44959b73',
682
682
'javelin-routable' => 'b3e7d692',
683
683
'javelin-router' => '29274e2b',
684
-
'javelin-scrollbar' => 'eaa5b321',
684
+
'javelin-scrollbar' => '4f812f8a',
685
685
'javelin-sound' => '949c0fe5',
686
686
'javelin-stratcom' => '6c53634d',
687
687
'javelin-tokenizer' => 'ab5f468d',
···
718
718
'phabricator-busy' => '59a7976a',
719
719
'phabricator-chatlog-css' => '852140ff',
720
720
'phabricator-content-source-view-css' => '4b8b05d4',
721
-
'phabricator-core-css' => '76e8ee93',
721
+
'phabricator-core-css' => 'aaea7a7a',
722
722
'phabricator-countdown-css' => '86b7b0a0',
723
723
'phabricator-dashboard-css' => '17937d22',
724
724
'phabricator-drag-and-drop-file-upload' => '07de8873',
···
747
747
'phabricator-side-menu-view-css' => 'c1db9e9c',
748
748
'phabricator-slowvote-css' => '266df6a1',
749
749
'phabricator-source-code-view-css' => '2ceee894',
750
-
'phabricator-standard-page-view' => 'd3e1abe9',
750
+
'phabricator-standard-page-view' => '2acd4611',
751
751
'phabricator-textareautils' => '5c93c52c',
752
752
'phabricator-title' => 'df5e11d2',
753
753
'phabricator-tooltip' => '1d298e3a',
···
762
762
'phabricator-uiexample-reactor-select' => 'a155550f',
763
763
'phabricator-uiexample-reactor-sendclass' => '1def2711',
764
764
'phabricator-uiexample-reactor-sendproperties' => 'b1f0ccee',
765
-
'phabricator-zindex-css' => '3b612549',
765
+
'phabricator-zindex-css' => '8414a09b',
766
766
'phame-css' => '88bd4705',
767
767
'pholio-css' => '95174bdd',
768
768
'pholio-edit-css' => '3ad9d1ee',
···
1134
1134
'javelin-stratcom',
1135
1135
'javelin-request',
1136
1136
),
1137
+
'4f812f8a' => array(
1138
+
'javelin-install',
1139
+
'javelin-dom',
1140
+
'javelin-stratcom',
1141
+
'javelin-vector',
1142
+
),
1137
1143
'4fdb476d' => array(
1138
1144
'javelin-behavior',
1139
1145
'javelin-stratcom',
···
1278
1284
'javelin-stratcom',
1279
1285
'javelin-workflow',
1280
1286
'javelin-dom',
1281
-
),
1282
-
'657c2b50' => array(
1283
-
'javelin-behavior',
1284
-
'javelin-dom',
1285
-
'javelin-stratcom',
1286
-
'javelin-behavior-device',
1287
-
'javelin-scrollbar',
1288
-
'javelin-quicksand',
1289
-
'phabricator-keyboard-shortcut',
1290
-
'conpherence-thread-manager',
1291
1287
),
1292
1288
'6882e80a' => array(
1293
1289
'javelin-dom',
···
1685
1681
'javelin-stratcom',
1686
1682
'javelin-install',
1687
1683
),
1684
+
'ac11eb8a' => array(
1685
+
'javelin-behavior',
1686
+
'javelin-dom',
1687
+
'javelin-stratcom',
1688
+
'javelin-behavior-device',
1689
+
'javelin-scrollbar',
1690
+
'javelin-quicksand',
1691
+
'phabricator-keyboard-shortcut',
1692
+
'conpherence-thread-manager',
1693
+
),
1688
1694
'b1a59974' => array(
1689
1695
'javelin-behavior',
1690
1696
'javelin-aphlict',
···
1927
1933
'javelin-aphlict',
1928
1934
'phabricator-phtize',
1929
1935
'javelin-dom',
1930
-
),
1931
-
'eaa5b321' => array(
1932
-
'javelin-install',
1933
-
'javelin-dom',
1934
-
'javelin-stratcom',
1935
-
'javelin-vector',
1936
1936
),
1937
1937
'efe49472' => array(
1938
1938
'javelin-install',
-9
src/view/page/PhabricatorStandardPageView.php
-9
src/view/page/PhabricatorStandardPageView.php
···
377
377
}
378
378
}
379
379
380
-
if (!$this->isQuicksandBlacklistURI()) {
381
-
Javelin::initBehavior(
382
-
'scrollbar',
383
-
array(
384
-
'nodeID' => 'phabricator-standard-page',
385
-
'isMainContent' => true,
386
-
));
387
-
}
388
-
389
380
$main_page = phutil_tag(
390
381
'div',
391
382
array(
-21
webroot/rsrc/css/application/base/standard-page-view.css
-21
webroot/rsrc/css/application/base/standard-page-view.css
···
126
126
margin: 2px 2px -2px 0;
127
127
}
128
128
129
-
.main-page-frame {
130
-
position: absolute;
131
-
top: 0;
132
-
bottom: 0;
133
-
right: 0;
134
-
left: 0;
135
-
overflow: hidden;
136
-
}
137
-
138
-
.phabricator-standard-page {
139
-
/* If we don't activate JX.Scrollbar because the default scrollbars are
140
-
satisfactory, make sure the page still has sensible behavior. These
141
-
settings will be overwritten by .jx-scrollbar-frame if JX.Scrollbar
142
-
activates. */
143
-
position: relative;
144
-
height: 100%;
145
-
overflow-y: scroll;
146
-
147
-
-webkit-overflow-scrolling: touch;
148
-
}
149
-
150
129
.jx-scrollbar-frame {
151
130
position: relative;
152
131
overflow: hidden;
+27
-2
webroot/rsrc/css/application/conpherence/durable-column.css
+27
-2
webroot/rsrc/css/application/conpherence/durable-column.css
···
2
2
* @provides conpherence-durable-column-view
3
3
*/
4
4
5
-
.with-durable-column .phabricator-standard-page {
5
+
.with-durable-column .phabricator-standard-page-body {
6
6
margin-right: 300px;
7
7
}
8
8
9
+
.with-durable-margin .phabricator-standard-page-body {
10
+
margin-right: 312px;
11
+
}
12
+
13
+
.with-durable-column .phabricator-main-menu {
14
+
padding-right: 304px;
15
+
}
16
+
17
+
.with-durable-margin .phabricator-main-menu {
18
+
padding-right: 316px;
19
+
}
20
+
9
21
.with-durable-column
10
22
.phabricator-global-upload-instructions {
11
23
font-size: 28px;
···
20
32
right: 300px;
21
33
}
22
34
35
+
.with-durable-margin .global-upload-mask {
36
+
right: 312px;
37
+
}
38
+
23
39
.conpherence-durable-column {
24
-
position: absolute;
40
+
position: fixed;
25
41
top: 0;
26
42
bottom: 0;
27
43
right: 0;
28
44
width: 300px;
29
45
background: #fff;
46
+
}
47
+
48
+
.with-durable-margin .conpherence-durable-column {
49
+
right: 12px;
50
+
box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.10);
30
51
}
31
52
32
53
.conpherence-durable-column .loading-mask {
···
124
145
right: 0;
125
146
left: 0;
126
147
border-left: 1px solid {$lightblueborder};
148
+
}
149
+
150
+
.with-durable-margin .conpherence-durable-column-body {
151
+
border-right: 1px solid {$lightblueborder};
127
152
}
128
153
129
154
.conpherence-durable-column-main {
+4
webroot/rsrc/css/core/core.css
+4
webroot/rsrc/css/core/core.css
···
54
54
breaks lots of things and prevents you from using landscape to see more
55
55
columns in source code views. */
56
56
-webkit-text-size-adjust: none;
57
+
58
+
/* Prevent content from resizing abruptly when shifting between scrollable
59
+
and unscrollable pages. */
60
+
overflow-y: scroll;
57
61
}
58
62
59
63
textarea {
+5
-2
webroot/rsrc/css/core/z-index.css
+5
-2
webroot/rsrc/css/core/z-index.css
···
85
85
z-index: 5;
86
86
}
87
87
88
-
.conpherence-durable-column-header,
89
88
.phabricator-main-menu {
90
89
z-index: 6;
91
90
}
···
94
93
z-index: 6;
95
94
}
96
95
97
-
.jx-scrollbar-bar {
96
+
.conpherence-durable-column {
98
97
z-index: 7;
98
+
}
99
+
100
+
.jx-scrollbar-bar {
101
+
z-index: 8;
99
102
}
100
103
101
104
.differential-haunt-mode-1 .differential-add-comment-panel,
+28
webroot/rsrc/externals/javelin/lib/Scrollbar.js
+28
webroot/rsrc/externals/javelin/lib/Scrollbar.js
···
100
100
statics: {
101
101
_controlWidth: null,
102
102
103
+
103
104
/**
104
105
* Compute the width of the browser's scrollbar control, in pixels.
105
106
*/
···
118
119
}
119
120
120
121
return self._controlWidth;
122
+
},
123
+
124
+
125
+
/**
126
+
* Get the margin width required to avoid double scrollbars.
127
+
*
128
+
* For most browsers which render a real scrollbar control, this is 0.
129
+
* Adjacent elements may touch the edge of the content directly without
130
+
* overlapping.
131
+
*
132
+
* On OSX with a trackpad, scrollbars are only drawn when content is
133
+
* scrolled. Content panes with internal scrollbars may overlap adjacent
134
+
* scrollbars if they are not laid out with a margin.
135
+
*
136
+
* @return int Control margin width in pixels.
137
+
*/
138
+
getScrollbarControlMargin: function() {
139
+
var self = JX.Scrollbar;
140
+
141
+
// If this browser and OS don't render a real scrollbar control, we
142
+
// need to leave a margin. Generally, this is OSX with no mouse attached.
143
+
if (self._getScrollbarControlWidth() === 0) {
144
+
return 12;
145
+
}
146
+
147
+
return 0;
121
148
}
149
+
122
150
123
151
},
124
152
+6
-2
webroot/rsrc/js/application/conpherence/behavior-durable-column.js
+6
-2
webroot/rsrc/js/application/conpherence/behavior-durable-column.js
···
29
29
var loadThreadID = null;
30
30
var scrollbar = null;
31
31
32
-
var columnWidth = 300;
32
+
var margin = JX.Scrollbar.getScrollbarControlMargin();
33
+
34
+
var columnWidth = (300 + margin);
33
35
// This is the smallest window size where we'll enable the column.
34
-
var minimumViewportWidth = 768;
36
+
var minimumViewportWidth = (768 - margin);
35
37
36
38
var quick = JX.$('phabricator-standard-page-body');
37
39
···
72
74
73
75
function _drawColumn(visible) {
74
76
JX.DOM.alterClass(document.body, 'with-durable-column', visible);
77
+
JX.DOM.alterClass(document.body, 'with-durable-margin', !!margin);
78
+
75
79
var column = _getColumnNode();
76
80
if (visible) {
77
81
JX.DOM.show(column);