Remove Gemini Scrollbars

package.json

@@ -72,7 +72,6 @@
     "flux": "2.1.1",
     "focus-visible": "^5.0.2",
     "fuse.js": "^2.2.0",
-    "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
     "gfm.css": "^1.1.1",
     "glob-to-regexp": "^0.4.1",
     "highlight.js": "^9.15.8",
@@ -93,7 +92,6 @@
     "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^16.9.0",
     "react-focus-lock": "^2.2.1",
-    "react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594",
     "resize-observer-polyfill": "^1.5.0",
     "sanitize-html": "^1.18.4",
     "text-encoding-utf-8": "^1.0.1",

res/css/_common.scss

@@ -207,37 +207,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     transition: opacity 0.2s ease-in-out;
 }
 
-/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
-   Stop the scrollbar view from pushing out the container's overall sizing, which causes
-   flexbox to adapt to the new size and cause the view to keep growing.
- */
-.gm-scrollbar-container .gm-scroll-view {
-    position: absolute;
-}
-
-/* Expand thumbs on hoverover */
-.gm-scrollbar {
-    border-radius: 5px !important;
-}
-.gm-scrollbar.-vertical {
-    width: 6px;
-    transition: width 120ms ease-out !important;
-}
-.gm-scrollbar.-vertical:hover,
-.gm-scrollbar.-vertical:active {
-    width: 8px;
-    transition: width 120ms ease-out !important;
-}
-.gm-scrollbar.-horizontal {
-    height: 6px;
-    transition: height 120ms ease-out !important;
-}
-.gm-scrollbar.-horizontal:hover,
-.gm-scrollbar.-horizontal:active {
-    height: 8px;
-    transition: height 120ms ease-out !important;
-}
-
 // These are magic constants which are excluded from tinting, to let themes
 // (which only have CSS, unlike skins) tell the app what their non-tinted
 // colourscheme is by inspecting the stylesheet DOM.

res/css/_components.scss

@@ -177,7 +177,6 @@
 @import "./views/rooms/_RoomTile.scss";
 @import "./views/rooms/_RoomUpgradeWarningBar.scss";
 @import "./views/rooms/_SearchBar.scss";
-@import "./views/rooms/_SearchableEntityList.scss";
 @import "./views/rooms/_SendMessageComposer.scss";
 @import "./views/rooms/_Stickers.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";

res/css/structures/_GroupView.scss

@@ -180,10 +180,6 @@ limitations under the License.
     line-height: 2em;
 }
 
-.mx_GroupView > .mx_MainSplit {
-    flex: 1;
-}
-
 .mx_GroupView_body {
     flex-grow: 1;
 }
@@ -341,8 +337,8 @@ limitations under the License.
     display: none;
 }
 
-.mx_GroupView_body .gm-scroll-view > * {
-    margin: 11px 50px 0px 68px;
+.mx_GroupView_body .mx_AutoHideScrollbar_offset > * {
+    margin: 11px 50px 50px 68px;
 }
 
 .mx_GroupView_groupDesc textarea {
@@ -370,7 +366,7 @@ limitations under the License.
     padding: 40px 20px;
 }
 
-.mx_GroupView .mx_MemberInfo .gm-scroll-view > :not(.mx_MemberInfo_avatar) {
+.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar_offset > :not(.mx_MemberInfo_avatar) {
     padding-left: 16px;
     padding-right: 16px;
 }

res/css/structures/_MainSplit.scss

@@ -18,6 +18,7 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     min-width: 0;
+    height: 100%;
 }
 
 // move hit area 5px to the right so it doesn't overlap with the timeline scrollbar

res/css/structures/_MatrixChat.scss

@@ -76,13 +76,6 @@ limitations under the License.
     flex: 1 1 0;
     min-width: 0;
 
-    /* Experimental fix for https://github.com/vector-im/vector-web/issues/947
-       and https://github.com/vector-im/vector-web/issues/946.
-       Empirically this stops the MessagePanel's width exploding outwards when
-       gemini is in 'prevented' mode
-       */
-    overflow-x: auto;
-
     /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
        needed height 100% all the way down to the HomePage. Height does not
        have to be auto, empirically.

res/css/structures/_MyGroups.scss

@@ -67,9 +67,6 @@ limitations under the License.
     }
 }
 
-
-
-
 .mx_MyGroups_headerCard_header {
     font-weight: bold;
     margin-bottom: 10px;
@@ -98,6 +95,11 @@ limitations under the License.
 
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
+}
+
+.mx_MyGroups_scrollable {
+    overflow-y: inherit;
 }
 
 .mx_MyGroups_placeholder {

res/css/structures/_TagPanel.scss

@@ -23,6 +23,7 @@ limitations under the License.
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
+    height: 100%;
 }
 
 .mx_TagPanel_items_selected {
@@ -57,6 +58,7 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagPanel_scroller {
     flex-grow: 1;
+    width: 100%;
 }
 
 .mx_TagPanel .mx_TagPanel_tagTileContainer {

res/css/views/dialogs/_UnknownDeviceDialog.scss

@@ -14,14 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-// CSS voodoo to support a gemini-scrollbar for the contents of the dialog
-.mx_Dialog_unknownDevice .mx_Dialog {
-    // ideally we'd shrink the height to fit when needed, but in practice this
-    // is a pain in the ass. plus might as well make the dialog big given how
-    // important it is.
-    height: 100%;
-}
-
 .mx_UnknownDeviceDialog {
     height: 100%;
     display: flex;
@@ -44,6 +36,7 @@ limitations under the License.
 
 .mx_UnknownDeviceDialog .mx_Dialog_content {
     margin-bottom: 24px;
+    overflow-y: scroll;
 }
 
 .mx_UnknownDeviceDialog_deviceList > li {

res/themes/dark/css/_dark.scss

@@ -219,10 +219,6 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
     filter: invert(1);
 }
 
-.gm-scrollbar .thumb {
-    filter: invert(1);
-}
-
 // markdown overrides:
 .mx_EventTile_content .markdown-body pre:hover {
     border-color: #808080 !important; // inverted due to rules below

src/components/structures/EmbeddedPage.js

@@ -23,11 +23,11 @@ import PropTypes from 'prop-types';
 import request from 'browser-request';
 import { _t } from '../../languageHandler';
 import sanitizeHtml from 'sanitize-html';
-import * as sdk from '../../index';
 import dis from '../../dispatcher';
 import {MatrixClientPeg} from '../../MatrixClientPeg';
 import classnames from 'classnames';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
+import AutoHideScrollbar from "./AutoHideScrollbar";
 
 export default class EmbeddedPage extends React.PureComponent {
     static propTypes = {
@@ -117,10 +117,9 @@ export default class EmbeddedPage extends React.PureComponent {
         </div>;
 
         if (this.props.scrollbar) {
-            const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-            return <GeminiScrollbarWrapper autoshow={true} className={classes}>
+            return <AutoHideScrollbar className={classes}>
                 {content}
-            </GeminiScrollbarWrapper>;
+            </AutoHideScrollbar>;
         } else {
             return <div className={classes}>
                 {content}

src/components/structures/GroupView.js

@@ -39,6 +39,7 @@ import {makeGroupPermalink, makeUserPermalink} from "../../utils/permalinks/Perm
 import {Group} from "matrix-js-sdk";
 import {allSettled, sleep} from "../../utils/promise";
 import RightPanelStore from "../../stores/RightPanelStore";
+import AutoHideScrollbar from "./AutoHideScrollbar";
 
 const LONG_DESC_PLACEHOLDER = _td(
 `<h1>HTML for your community's page</h1>
@@ -1173,7 +1174,6 @@ export default createReactClass({
     render: function() {
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Spinner = sdk.getComponent("elements.Spinner");
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
             return <Spinner />;
@@ -1332,10 +1332,10 @@ export default createReactClass({
                         <GroupHeaderButtons />
                     </div>
                     <MainSplit panel={rightPanel}>
-                        <GeminiScrollbarWrapper className="mx_GroupView_body">
+                        <AutoHideScrollbar className="mx_GroupView_body">
                             { this._getMembershipSection() }
                             { this._getGroupSection() }
-                        </GeminiScrollbarWrapper>
+                        </AutoHideScrollbar>
                     </MainSplit>
                 </main>
             );

src/components/structures/MyGroups.js

@@ -22,6 +22,7 @@ import { _t } from '../../languageHandler';
 import dis from '../../dispatcher';
 import AccessibleButton from '../views/elements/AccessibleButton';
 import MatrixClientContext from "../../contexts/MatrixClientContext";
+import AutoHideScrollbar from "./AutoHideScrollbar";
 
 export default createReactClass({
     displayName: 'MyGroups',
@@ -62,8 +63,6 @@ export default createReactClass({
         const Loader = sdk.getComponent("elements.Spinner");
         const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const GroupTile = sdk.getComponent("groups.GroupTile");
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-
 
         let content;
         let contentHeader;
@@ -74,7 +73,7 @@ export default createReactClass({
             });
             contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <GeminiScrollbarWrapper>
+                <AutoHideScrollbar className="mx_MyGroups_scrollable">
                     <div className="mx_MyGroups_microcopy">
                         <p>
                             { _t(
@@ -93,7 +92,7 @@ export default createReactClass({
                     <div className="mx_MyGroups_joinedGroups">
                         { groupNodes }
                     </div>
-                </GeminiScrollbarWrapper> :
+                </AutoHideScrollbar> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
                         "You're not currently a member of any communities.",

src/components/structures/RoomView.js

@@ -405,21 +405,6 @@ export default createReactClass({
         this.onResize();
 
         document.addEventListener("keydown", this.onKeyDown);
-
-        // XXX: EVIL HACK to autofocus inviting on empty rooms.
-        // We use the setTimeout to avoid racing with focus_composer.
-        if (this.state.room &&
-            this.state.room.getJoinedMemberCount() == 1 &&
-            this.state.room.getLiveTimeline() &&
-            this.state.room.getLiveTimeline().getEvents() &&
-            this.state.room.getLiveTimeline().getEvents().length <= 6) {
-            const inviteBox = document.getElementById("mx_SearchableEntityList_query");
-            setTimeout(function() {
-                if (inviteBox) {
-                    inviteBox.focus();
-                }
-            }, 50);
-        }
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {

src/components/structures/ScrollPanel.js

@@ -782,7 +782,7 @@ export default createReactClass({
         if (!this._divScroll) {
             // Likewise, we should have the ref by this point, but if not
             // turn the NPE into something meaningful.
-            throw new Error("ScrollPanel._getScrollNode called before gemini ref collected");
+            throw new Error("ScrollPanel._getScrollNode called before AutoHideScrollbar ref collected");
         }
 
         return this._divScroll;