@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
Improve tooltip behavior for Application menu items
Summary:
Ref T12174.
- Fix text antialiasing pop-in at the end of the animation in Safari.
- Fix flickery animation replay when mousing inside a tooltip element, or rapidly switching between tooltip elements.
- To accomplish this: don't play the animation if the last tip was hidden less than 500ms ago.
Test Plan:
- Viewed a tooltip in Safari.
- Waved cursor wildly over application items, both left-right (within an item) and up-down (between items).
Tooltips appeared stable and non-flickery in all cases.
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T12174
Differential Revision: https://secure.phabricator.com/D17272
+56
-16
+12
-12
resources/celerity/map.php
+12
-12
resources/celerity/map.php
···
9
9
'names' => array(
10
10
'conpherence.pkg.css' => 'e25569a9',
11
11
'conpherence.pkg.js' => '6249a1cf',
12
-
'core.pkg.css' => '25cda14d',
13
-
'core.pkg.js' => 'f1e0e26f',
12
+
'core.pkg.css' => '7cd6d9cb',
13
+
'core.pkg.js' => '1fa7c0c5',
14
14
'darkconsole.pkg.js' => 'e7393ebb',
15
15
'differential.pkg.css' => '4815647b',
16
16
'differential.pkg.js' => 'ddfeb49b',
···
29
29
'rsrc/css/aphront/phabricator-nav-view.css' => 'b29426e9',
30
30
'rsrc/css/aphront/table-view.css' => '213a5981',
31
31
'rsrc/css/aphront/tokenizer.css' => '9a8cb501',
32
-
'rsrc/css/aphront/tooltip.css' => '3f325821',
32
+
'rsrc/css/aphront/tooltip.css' => '8f9faa9a',
33
33
'rsrc/css/aphront/typeahead-browse.css' => '8904346a',
34
34
'rsrc/css/aphront/typeahead.css' => 'd4f16145',
35
35
'rsrc/css/application/almanac/almanac.css' => 'dbb9b3af',
···
486
486
'rsrc/js/core/ShapedRequest.js' => '7cbe244b',
487
487
'rsrc/js/core/TextAreaUtils.js' => '320810c8',
488
488
'rsrc/js/core/Title.js' => '485aaa6c',
489
-
'rsrc/js/core/ToolTip.js' => 'd02f7181',
489
+
'rsrc/js/core/ToolTip.js' => '8fadb715',
490
490
'rsrc/js/core/behavior-active-nav.js' => 'e379b58e',
491
491
'rsrc/js/core/behavior-audio-source.js' => '59b251eb',
492
492
'rsrc/js/core/behavior-autofocus.js' => '7319e029',
···
553
553
'aphront-panel-view-css' => '8427b78d',
554
554
'aphront-table-view-css' => '213a5981',
555
555
'aphront-tokenizer-control-css' => '9a8cb501',
556
-
'aphront-tooltip-css' => '3f325821',
556
+
'aphront-tooltip-css' => '8f9faa9a',
557
557
'aphront-typeahead-control-css' => 'd4f16145',
558
558
'application-search-view-css' => '20ae9d85',
559
559
'auth-css' => '0877ed6e',
···
811
811
'phabricator-standard-page-view' => '894d8a25',
812
812
'phabricator-textareautils' => '320810c8',
813
813
'phabricator-title' => '485aaa6c',
814
-
'phabricator-tooltip' => 'd02f7181',
814
+
'phabricator-tooltip' => '8fadb715',
815
815
'phabricator-ui-example-css' => '528b19de',
816
816
'phabricator-uiexample-javelin-view' => 'd4a14807',
817
817
'phabricator-uiexample-reactor-button' => 'd19198c8',
···
1602
1602
'javelin-stratcom',
1603
1603
'javelin-util',
1604
1604
),
1605
+
'8fadb715' => array(
1606
+
'javelin-install',
1607
+
'javelin-util',
1608
+
'javelin-dom',
1609
+
'javelin-vector',
1610
+
),
1605
1611
'8ff5e24c' => array(
1606
1612
'javelin-behavior',
1607
1613
'javelin-stratcom',
···
2015
2021
),
2016
2022
'cd2b9b77' => array(
2017
2023
'phui-oi-list-view-css',
2018
-
),
2019
-
'd02f7181' => array(
2020
-
'javelin-install',
2021
-
'javelin-util',
2022
-
'javelin-dom',
2023
-
'javelin-vector',
2024
2024
),
2025
2025
'd0c516d5' => array(
2026
2026
'javelin-behavior',
+19
-2
webroot/rsrc/css/aphront/tooltip.css
+19
-2
webroot/rsrc/css/aphront/tooltip.css
···
5
5
.jx-tooltip-container {
6
6
position: absolute;
7
7
padding: 5px;
8
-
opacity: 1;
9
-
transition: opacity 0.25s ease;
8
+
}
9
+
10
+
.jx-tooltip-appear {
11
+
animation: 0.5s tooltip-appear;
12
+
13
+
/* Without this, there's a nasty pop-in effect at the end of the animation
14
+
when Safari changes font smoothing. The text becomes visibly more bold
15
+
after the last frame of animation. */
16
+
-webkit-font-smoothing: subpixel-antialiased;
17
+
}
18
+
19
+
@keyframes tooltip-appear {
20
+
0% {
21
+
opacity: 0;
22
+
}
23
+
24
+
100% {
25
+
opacity: 1;
26
+
}
10
27
}
11
28
12
29
.jx-tooltip-hidden {
+25
-2
webroot/rsrc/js/core/ToolTip.js
+25
-2
webroot/rsrc/js/core/ToolTip.js
···
11
11
12
12
statics: {
13
13
_node: null,
14
+
_last: null,
14
15
_lock: 0,
15
16
16
17
show : function(root, scale, align, content) {
···
46
47
47
48
var node = JX.$N(
48
49
'div',
49
-
{ className: 'jx-tooltip-container jx-tooltip-hidden' },
50
+
{ className: 'jx-tooltip-container' },
50
51
node_inner);
51
52
52
53
node.style.maxWidth = scale + 'px';
···
61
62
// Jump through some hoops trying to auto-position the tooltip
62
63
var pos = self._getSmartPosition(align, root, node);
63
64
pos.setPos(node);
64
-
JX.DOM.alterClass(node, 'jx-tooltip-hidden', false);
65
+
66
+
// Animate the tip if we haven't shown any tips recently. If we are
67
+
// already showing a tip (or hid one very recently) just show the tip
68
+
// immediately. This makes hunting for a particular item by mousing
69
+
// through tips smoother: you only have to sit through the animation
70
+
// once, at the beginning.
71
+
72
+
var is_recent = false;
73
+
74
+
var last_tip = self._last;
75
+
if (last_tip) {
76
+
// If we recently hid a tip, compute how many milliseconds ago we
77
+
// hid it.
78
+
var last_tip_age = (new Date().getTime() - self._last);
79
+
if (last_tip_age < 500) {
80
+
is_recent = true;
81
+
}
82
+
}
83
+
84
+
if (!is_recent) {
85
+
JX.DOM.alterClass(node, 'jx-tooltip-appear', true);
86
+
}
65
87
},
66
88
67
89
_getSmartPosition: function (align, root, node) {
···
194
216
if (this._node) {
195
217
JX.DOM.remove(this._node);
196
218
this._node = null;
219
+
this._last = new Date().getTime();
197
220
}
198
221
},
199
222