Workboard: have thin scrollbars

Summary:
The original intention was to hugely improve the UX interaction on Workboards for Microsoft Windows
users, since they have BIG GIANT SCROLLBARS. So we adopted thin scrollbars, that are graphically
pleasant for all other "normal" browsers too.

Note that this can be really thin now. The premise is: probably you will never notice this, since
you never try to click on the scrollbar.

In case, if you have problems, contact us. But note:

- you can use the mouse wheel as usual
- you can use keyboard navigation (try the tab key - it auto-scrolls!)
- you can use usual touch movements on relevant devices.

The non-standard CSS version is kept for compatibility.

Scrollbar examples in Microsoft Windows with Chromium-based browser:

| Before    | After     |
|-----------|-----------|
| {F312321} | {F312323} |

Scrollbar examples in GNU/Linux with KDE, on mouse hover:

| Before    | After     |
|-----------|-----------|
| {F313082} | {F313083} |

... on bar selected:

| Before    | After     |
|-----------|-----------|
| {F313084} | {F313085} |

Ref T15488

Test Plan:
View a Workboard and a Differential side panel
on Firefox with static scrollbars enabled.

Reviewers: O1 Blessed Committers, valerio.bozzolan

Reviewed By: O1 Blessed Committers, valerio.bozzolan

Subscribers: aklapper, speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Maniphest Tasks: T15488

Differential Revision: https://we.phorge.it/D25305

resources/celerity/map.php

@@ -12,7 +12,7 @@ return array(
     'core.pkg.css' => 'ac619266',
     'core.pkg.js' => '2eeda9e0',
     'dark-console.pkg.js' => '187792c2',
-    'differential.pkg.css' => 'fda9518d',
+    'differential.pkg.css' => '94bb10ca',
     'differential.pkg.js' => '46fcb3af',
     'diffusion.pkg.css' => '354279ea',
     'diffusion.pkg.js' => '78c9885d',
@@ -156,7 +156,7 @@ return array(
     'rsrc/css/phui/phui-fontkit.css' => '1ec937e5',
     'rsrc/css/phui/phui-form-view.css' => '57edecb7',
     'rsrc/css/phui/phui-form.css' => '1f177cb7',
-    'rsrc/css/phui/phui-formation-view.css' => 'd2dec8ed',
+    'rsrc/css/phui/phui-formation-view.css' => 'd3956117',
     'rsrc/css/phui/phui-head-thing.css' => 'd7f293df',
     'rsrc/css/phui/phui-header-view.css' => '4cd25427',
     'rsrc/css/phui/phui-hovercard.css' => '39fd2e14',
@@ -181,9 +181,9 @@ return array(
     'rsrc/css/phui/phui-timeline-view.css' => '7f8659ec',
     'rsrc/css/phui/phui-two-column-view.css' => 'f96d319f',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => '3a1c21ff',
-    'rsrc/css/phui/workboards/phui-workboard.css' => '74fc9d98',
+    'rsrc/css/phui/workboards/phui-workboard.css' => 'e7ba21a7',
     'rsrc/css/phui/workboards/phui-workcard.css' => '62056e3b',
-    'rsrc/css/phui/workboards/phui-workpanel.css' => 'bc06f022',
+    'rsrc/css/phui/workboards/phui-workpanel.css' => 'c44f95c7',
     'rsrc/css/sprite-login.css' => '07052ee0',
     'rsrc/css/sprite-tokens.css' => 'f1896dc5',
     'rsrc/css/syntax/syntax-default.css' => 'c0307dc6',
@@ -849,7 +849,7 @@ return array(
     'phui-fontkit-css' => '1ec937e5',
     'phui-form-css' => '1f177cb7',
     'phui-form-view-css' => '57edecb7',
-    'phui-formation-view-css' => 'd2dec8ed',
+    'phui-formation-view-css' => 'd3956117',
     'phui-head-thing-view-css' => 'd7f293df',
     'phui-header-view-css' => '4cd25427',
     'phui-hovercard' => '6199f752',
@@ -884,9 +884,9 @@ return array(
     'phui-timeline-view-css' => '7f8659ec',
     'phui-two-column-view-css' => 'f96d319f',
     'phui-workboard-color-css' => '3a1c21ff',
-    'phui-workboard-view-css' => '74fc9d98',
+    'phui-workboard-view-css' => 'e7ba21a7',
     'phui-workcard-view-css' => '62056e3b',
-    'phui-workpanel-view-css' => 'bc06f022',
+    'phui-workpanel-view-css' => 'c44f95c7',
     'phuix-action-list-view' => 'c68f183f',
     'phuix-action-view' => 'a8f573a9',
     'phuix-autocomplete' => '2fbe234d',
@@ -2007,9 +2007,6 @@ return array(
       'javelin-uri',
       'phabricator-notification',
     ),
-    'bc06f022' => array(
-      'phui-workcard-view-css',
-    ),
     'c03f2fb4' => array(
       'javelin-install',
     ),
@@ -2029,6 +2026,9 @@ return array(
       'javelin-workboard-card',
       'javelin-workboard-header',
     ),
+    'c44f95c7' => array(
+      'phui-workcard-view-css',
+    ),
     'c538cbfc' => array(
       'javelin-behavior',
       'javelin-stratcom',

webroot/rsrc/css/phui/phui-formation-view.css

@@ -147,6 +147,12 @@
   overflow: hidden auto;
 }
 
+.device-desktop .phui-flank-view-fixed .phui-flank-view-body {
+  scrollbar-width: thin;
+}
+
+/* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */
+/* (Use the same selector as above for consistent behavior on Chrome/Firefox) */
 .device-desktop .phui-flank-view-fixed
   .phui-flank-view-body::-webkit-scrollbar {
   height: 6px;

webroot/rsrc/css/phui/workboards/phui-workboard.css

@@ -21,6 +21,12 @@
   padding: 16px;
 }
 
+.phui-workboard-view-shadow {
+  scrollbar-width: thin;
+}
+
+/* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */
+/* (Use the same selector as above for consistent behavior on Chrome/Firefox) */
 .phui-workboard-view-shadow::-webkit-scrollbar {
   height: 8px;
   width: 8px;

webroot/rsrc/css/phui/workboards/phui-workpanel.css

@@ -95,11 +95,14 @@
 }
 
 .device-desktop .phui-workpanel-body-content {
+  scrollbar-width: thin;
   max-height: calc(100vh - 162px);
   overflow-y: auto;
   overflow-x: hidden;
 }
 
+/* Alternative thin scrollbar when `scrollbar-width: thin` is not supported */
+/* (Use the same selector as above for consistent behavior on Chrome/Firefox) */
 .device-desktop .phui-workpanel-body-content::-webkit-scrollbar {
   height: 8px;
   width: 8px;