[Perf] Get rid of slow body.no-selection

src/components/middle/composer/EmojiTooltip.tsx

@@ -2,7 +2,6 @@ import React, {
   FC, memo, useCallback, useEffect, useRef,
 } from '../../../lib/teact/teact';
 
-import { IS_TOUCH_ENV } from '../../../util/environment';
 import buildClassName from '../../../util/buildClassName';
 import findInViewport from '../../../util/findInViewport';
 import isFullyVisible from '../../../util/isFullyVisible';
@@ -90,14 +89,6 @@ const EmojiTooltip: FC<OwnProps> = ({
     setItemVisible(selectedIndex, containerRef);
   }, [selectedIndex]);
 
-  const handleMouseEnter = () => {
-    document.body.classList.add('no-select');
-  };
-
-  const handleMouseLeave = () => {
-    document.body.classList.remove('no-select');
-  };
-
   const className = buildClassName(
     'EmojiTooltip composer-tooltip custom-scroll-x',
     transitionClassNames,
@@ -107,8 +98,6 @@ const EmojiTooltip: FC<OwnProps> = ({
     <div
       ref={containerRef}
       className={className}
-      onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
-      onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
     >
       {shouldRender && listEmojis ? (
         listEmojis.map((emoji, index) => (

src/components/middle/composer/StickerTooltip.tsx

@@ -6,7 +6,6 @@ import { getDispatch, withGlobal } from '../../../lib/teact/teactn';
 import { ApiSticker } from '../../../api/types';
 
 import { STICKER_SIZE_PICKER } from '../../../config';
-import { IS_TOUCH_ENV } from '../../../util/environment';
 import buildClassName from '../../../util/buildClassName';
 import captureEscKeyListener from '../../../util/captureEscKeyListener';
 import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
@@ -54,18 +53,10 @@ const StickerTooltip: FC<OwnProps & StateProps> = ({
 
   useEffect(() => (isOpen ? captureEscKeyListener(clearStickersForEmoji) : undefined), [isOpen, clearStickersForEmoji]);
 
-  const handleMouseEnter = () => {
-    document.body.classList.add('no-select');
-  };
-
   const handleMouseMove = () => {
     sendMessageAction({ type: 'chooseSticker' });
   };
 
-  const handleMouseLeave = () => {
-    document.body.classList.remove('no-select');
-  };
-
   const className = buildClassName(
     'StickerTooltip composer-tooltip custom-scroll',
     transitionClassNames,
@@ -76,8 +67,6 @@ const StickerTooltip: FC<OwnProps & StateProps> = ({
     <div
       ref={containerRef}
       className={className}
-      onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
-      onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
       onMouseMove={handleMouseMove}
     >
       {shouldRender && displayedStickers ? (

src/hooks/useContextMenuHandlers.ts

@@ -56,10 +56,9 @@ const useContextMenuHandlers = (
 
   const handleContextMenuHide = useCallback(() => {
     setContextMenuPosition(undefined);
-    document.body.classList.remove('no-selection');
   }, []);
 
-  // Support context menu on touch-devices
+  // Support context menu on touch devices
   useEffect(() => {
     if (isMenuDisabled || !IS_TOUCH_ENV || shouldDisableOnLongTap) {
       return undefined;
@@ -102,7 +101,6 @@ const useContextMenuHandlers = (
         }, true);
       }
 
-      document.body.classList.add('no-selection');
       setIsContextMenuOpen(true);
       setContextMenuPosition({ x: clientX, y: clientY });
     };

src/hooks/useResize.ts

@@ -2,12 +2,12 @@ import { RefObject } from 'react';
 import { useState, useEffect } from '../lib/teact/teact';
 import useFlag from './useFlag';
 
-export const useResize = (
+export function useResize(
   elementRef: RefObject<HTMLElement>,
   onResize: (width: number) => void,
   onReset: NoneToVoidFunction,
   initialWidth?: number,
-) => {
+) {
   const [isActive, markIsActive, unmarkIsActive] = useFlag();
   const [initialMouseX, setInitialMouseX] = useState<number>();
   const [initialElementWidth, setInitialElementWidth] = useState<number>();
@@ -21,19 +21,21 @@ export const useResize = (
   }, [elementRef, initialWidth]);
 
   function handleMouseUp() {
-    document.body.classList.remove('no-selection', 'cursor-ew-resize');
+    document.body.classList.remove('cursor-ew-resize');
   }
 
-  function initResize(event: React.MouseEvent<HTMLElement, MouseEvent>) {
-    document.body.classList.add('no-selection', 'cursor-ew-resize');
+  function initResize(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+    e.preventDefault();
 
-    setInitialMouseX(event.clientX);
+    document.body.classList.add('cursor-ew-resize');
+
+    setInitialMouseX(e.clientX);
     setInitialElementWidth(elementRef.current!.offsetWidth);
     markIsActive();
   }
 
-  function resetResize(event: React.MouseEvent<HTMLElement, MouseEvent>) {
-    event.preventDefault();
+  function resetResize(e: React.MouseEvent<HTMLElement, MouseEvent>) {
+    e.preventDefault();
     elementRef.current!.style.width = '';
     onReset();
   }
@@ -41,8 +43,8 @@ export const useResize = (
   useEffect(() => {
     if (!isActive) return undefined;
 
-    const handleMouseMove = (event: MouseEvent) => {
-      const newWidth = Math.ceil(initialElementWidth + event.clientX - initialMouseX);
+    const handleMouseMove = (e: MouseEvent) => {
+      const newWidth = Math.ceil(initialElementWidth + e.clientX - initialMouseX);
       elementRef.current!.style.width = `${newWidth}px`;
     };
 
@@ -67,4 +69,4 @@ export const useResize = (
   }, [initialElementWidth, initialMouseX, elementRef, onResize, isActive, unmarkIsActive]);
 
   return { initResize, resetResize, handleMouseUp };
-};
+}

src/util/captureEvents.ts

@@ -94,6 +94,10 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
     captureEvent = e;
 
     if (e.type === 'mousedown') {
+      if (options.onDrag) {
+        e.preventDefault();
+      }
+
       document.addEventListener('mousemove', onMove);
       document.addEventListener('mouseup', onRelease);
     } else if (e.type === 'touchstart') {
@@ -120,7 +124,6 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
       }
     }
 
-    document.body.classList.add('no-selection');
     if (options.withCursor) {
       document.body.classList.add('cursor-grabbing');
     }
@@ -135,7 +138,6 @@ export function captureEvents(element: HTMLElement, options: CaptureOptions) {
       if (options.withCursor) {
         document.body.classList.remove('cursor-grabbing');
       }
-      document.body.classList.remove('no-selection');
 
       document.removeEventListener('mouseup', onRelease);
       document.removeEventListener('mousemove', onMove);