@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
Quicksand - get the dark console working properly with quicksand
Summary:
Fixes T7700.
This ends up being kind of tricky because
- the key for a given request is only correct at the time the dark console is rendered
- the dark console itself should contain every request made, as opposed to being drawn from scratch
- in the case of a quicksand request, the behavior gets invoked first with the correctly rendered console as part of the `quicksand-redraw` event and then again shortly after as an ajax request would, except this is incorrect relative to when the key should be calculated...
So...
- assume we can get away with concurrency between the `quicksand-redraw` event and ajax request invocation of the behavior
- cache the right data as part of the `quicksand-redraw` event and then use it in the subsequent ajax call
- make sure ajax config gets a 'quicksand' flag
...otherwise its somewhat standard make sure this behavior can be init'd a bunch stuff.
Test Plan: visited '/', visited '/differential/', visited '/DXXX' - observed correctly populating dark console with all sorts of good data stuff. navigated backwards and observed dark console staying the same as expected. navigated by clicking links and console updated again
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin, epriestley
Maniphest Tasks: T7700
Differential Revision: https://secure.phabricator.com/D12582
+101
-59
+11
-11
resources/celerity/map.php
+11
-11
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'core.pkg.css' => '9a9b59ca',
11
11
'core.pkg.js' => '59d01bb7',
12
-
'darkconsole.pkg.js' => '8ab24e01',
12
+
'darkconsole.pkg.js' => '6d16ff19',
13
13
'differential.pkg.css' => '3500921f',
14
14
'differential.pkg.js' => '890046d3',
15
15
'diffusion.pkg.css' => '591664fa',
···
460
460
'rsrc/js/core/behavior-autofocus.js' => '7319e029',
461
461
'rsrc/js/core/behavior-choose-control.js' => '6153c708',
462
462
'rsrc/js/core/behavior-crop.js' => 'fa0f4fc2',
463
-
'rsrc/js/core/behavior-dark-console.js' => '08883e8b',
463
+
'rsrc/js/core/behavior-dark-console.js' => '87987821',
464
464
'rsrc/js/core/behavior-device.js' => 'a205cf28',
465
465
'rsrc/js/core/behavior-drag-and-drop-textarea.js' => '6d49590e',
466
466
'rsrc/js/core/behavior-error-log.js' => '6882e80a',
···
567
567
'javelin-behavior-conpherence-pontificate' => '21ba5861',
568
568
'javelin-behavior-conpherence-widget-pane' => '93568464',
569
569
'javelin-behavior-countdown-timer' => 'e4cc26b3',
570
-
'javelin-behavior-dark-console' => '08883e8b',
570
+
'javelin-behavior-dark-console' => '87987821',
571
571
'javelin-behavior-dashboard-async-panel' => '469c0d9e',
572
572
'javelin-behavior-dashboard-move-panels' => '82439934',
573
573
'javelin-behavior-dashboard-query-panel-select' => '453c5375',
···
897
897
'javelin-uri',
898
898
'phabricator-file-upload',
899
899
),
900
-
'08883e8b' => array(
901
-
'javelin-behavior',
902
-
'javelin-stratcom',
903
-
'javelin-util',
904
-
'javelin-dom',
905
-
'javelin-request',
906
-
'phabricator-keyboard-shortcut',
907
-
),
908
900
'0a3f3021' => array(
909
901
'javelin-behavior',
910
902
'javelin-stratcom',
···
1482
1474
'86a13f7f' => array(
1483
1475
'aphront-typeahead-control-css',
1484
1476
'phui-tag-view-css',
1477
+
),
1478
+
87987821 => array(
1479
+
'javelin-behavior',
1480
+
'javelin-stratcom',
1481
+
'javelin-util',
1482
+
'javelin-dom',
1483
+
'javelin-request',
1484
+
'phabricator-keyboard-shortcut',
1485
1485
),
1486
1486
'87cb6b51' => array(
1487
1487
'javelin-behavior',
+4
-3
src/aphront/response/AphrontAjaxResponse.php
+4
-3
src/aphront/response/AphrontAjaxResponse.php
···
44
44
Javelin::initBehavior(
45
45
'dark-console',
46
46
array(
47
-
'uri' => (string)$uri,
48
-
'key' => $console->getKey($this->getRequest()),
49
-
'color' => $console->getColor(),
47
+
'uri' => (string)$uri,
48
+
'key' => $console->getKey($this->getRequest()),
49
+
'color' => $console->getColor(),
50
+
'quicksand' => $this->getRequest()->isQuicksand(),
50
51
));
51
52
}
52
53
+86
-45
webroot/rsrc/js/core/behavior-dark-console.js
+86
-45
webroot/rsrc/js/core/behavior-dark-console.js
···
9
9
*/
10
10
11
11
JX.behavior('dark-console', function(config, statics) {
12
+
12
13
// Do first-time setup.
13
14
function setup_console() {
15
+
init_console(config.visible);
16
+
17
+
statics.selected = config.selected;
18
+
19
+
install_shortcut();
20
+
21
+
if (config.headers) {
22
+
// If the main page had profiling enabled, also enable it for any Ajax
23
+
// requests.
24
+
JX.Request.listen('open', function(r) {
25
+
for (var k in config.headers) {
26
+
r.getTransport().setRequestHeader(k, config.headers[k]);
27
+
}
28
+
});
29
+
}
30
+
31
+
// When the user clicks a tab, select it.
32
+
JX.Stratcom.listen('click', 'dark-console-tab', function(e) {
33
+
e.kill();
34
+
select_tab(e.getNodeData('dark-console-tab')['class']);
35
+
});
36
+
37
+
JX.Stratcom.listen(
38
+
'quicksand-redraw',
39
+
null,
40
+
function (e) {
41
+
e.kill();
42
+
var data = e.getData();
43
+
var new_console;
44
+
if (data.fromServer) {
45
+
new_console = JX.$('darkconsole');
46
+
// The correct key has to be pulled from the rendered console
47
+
statics.quicksand_key = new_console.getAttribute('data-console-key');
48
+
statics.quicksand_color =
49
+
new_console.getAttribute('data-console-color');
50
+
} else {
51
+
// we need to add a console holder back in since we blew it away
52
+
new_console = JX.$N(
53
+
'div',
54
+
{ id : 'darkconsole', class : 'dark-console' });
55
+
JX.DOM.prependContent(
56
+
JX.$('phabricator-standard-page-body'),
57
+
new_console);
58
+
}
59
+
JX.DOM.replace(new_console, statics.root);
60
+
});
61
+
62
+
return statics.root;
63
+
}
64
+
65
+
function init_console(visible) {
14
66
statics.root = JX.$('darkconsole');
15
67
statics.req = {all: {}, current: null};
16
68
statics.tab = {all: {}, current: null};
···
31
83
32
84
statics.cache = {};
33
85
34
-
statics.visible = config.visible;
35
-
statics.selected = config.selected;
36
-
37
-
install_shortcut();
38
-
39
-
if (config.headers) {
40
-
// If the main page had profiling enabled, also enable it for any Ajax
41
-
// requests.
42
-
JX.Request.listen('open', function(r) {
43
-
for (var k in config.headers) {
44
-
r.getTransport().setRequestHeader(k, config.headers[k]);
45
-
}
46
-
});
47
-
}
86
+
statics.visible = visible;
48
87
49
88
return statics.root;
50
89
}
51
-
52
-
var root = statics.root || setup_console();
53
-
54
-
config.key = config.key || root.getAttribute('data-console-key');
55
-
56
-
if (!('color' in config)) {
57
-
config.color = root.getAttribute('data-console-color');
58
-
}
59
-
60
90
61
91
// Add a new request to the console (initial page load, or new Ajax response).
62
92
function add_request(config) {
···
78
108
statics.el.reqs.appendChild(link);
79
109
statics.req.all[config.key] = link;
80
110
111
+
// When the user clicks a request, select it.
112
+
JX.DOM.listen(
113
+
link,
114
+
'click',
115
+
'dark-console-request',
116
+
function(e) {
117
+
e.kill();
118
+
select_request(e.getNodeData('dark-console-request').key);
119
+
});
120
+
81
121
if (!statics.req.current) {
82
122
select_request(config.key);
83
123
}
84
124
}
85
-
86
125
87
126
function get_bullet(color) {
88
127
if (!color) {
···
91
130
return JX.$N('span', {style: {color: color}}, '\u2022');
92
131
}
93
132
94
-
95
133
// Select a request (on load, or when the user clicks one).
96
134
function select_request(key) {
97
-
var req = statics.req;
98
-
99
-
if (req.current) {
100
-
JX.DOM.alterClass(req.all[req.current], 'dark-selected', false);
135
+
if (statics.req.current) {
136
+
JX.DOM.alterClass(
137
+
statics.req.all[statics.req.current],
138
+
'dark-selected',
139
+
false);
101
140
}
102
141
statics.req.current = key;
103
-
JX.DOM.alterClass(req.all[req.current], 'dark-selected', true);
142
+
JX.DOM.alterClass(
143
+
statics.req.all[statics.req.current],
144
+
'dark-selected',
145
+
true);
104
146
105
147
if (statics.visible) {
106
148
draw_request(key);
107
149
}
108
150
}
109
-
110
-
// When the user clicks a request, select it.
111
-
JX.Stratcom.listen('click', 'dark-console-request', function(e) {
112
-
e.kill();
113
-
select_request(e.getNodeData('dark-console-request').key);
114
-
});
115
-
116
151
117
152
// After the user selects a request, draw its tabs.
118
153
function draw_request(key) {
···
205
240
draw_panel();
206
241
}
207
242
208
-
// When the user clicks a tab, select it.
209
-
JX.Stratcom.listen('click', 'dark-console-tab', function(e) {
210
-
e.kill();
211
-
select_tab(e.getNodeData('dark-console-tab')['class']);
212
-
});
213
-
214
243
function draw_panel() {
215
244
var data = statics.cache[statics.req.current];
216
245
var tclass = JX.Stratcom.getData(statics.tab.current)['class'];
···
227
256
statics.visible = !statics.visible;
228
257
229
258
if (statics.visible) {
230
-
JX.DOM.show(root);
259
+
JX.DOM.show(statics.root);
231
260
if (statics.req.current) {
232
261
draw_request(statics.req.current);
233
262
}
234
263
} else {
235
-
JX.DOM.hide(root);
264
+
JX.DOM.hide(statics.root);
236
265
}
237
266
238
267
// Save user preference.
···
246
275
.register();
247
276
}
248
277
278
+
statics.root = statics.root || setup_console();
279
+
if (config.quicksand && statics.quicksand_key) {
280
+
config.key = statics.quicksand_key;
281
+
config.color = statics.quicksand_color;
282
+
statics.quicksand_key = null;
283
+
statics.quicksand_color = null;
284
+
}
285
+
config.key = config.key || statics.root.getAttribute('data-console-key');
286
+
if (!('color' in config)) {
287
+
config.color = statics.root.getAttribute('data-console-color');
288
+
}
249
289
add_request(config);
290
+
250
291
});