Merge pull request #19390 from overleaf/dp-pdf-tools-teardown

Remove `pdf-controls` feature flag and old controls

GitOrigin-RevId: 807ee0aa6384df354809f4d59b10d00dadef898c

services/web/app/src/Features/Project/ProjectController.js

@@ -330,7 +330,6 @@ const _ProjectController = {
       'pdf-caching-mode',
       'pdf-caching-prefetch-large',
       'pdf-caching-prefetching',
-      'pdf-controls',
       'pdf-presentation-mode',
       'pdfjs-40',
       'personal-access-token',

services/web/frontend/js/features/pdf-preview/components/pdf-js-viewer.tsx

@@ -1,6 +1,5 @@
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { debounce, throttle } from 'lodash'
-import PdfViewerControls from './pdf-viewer-controls'
 import PdfViewerControlsToolbar from './pdf-viewer-controls-toolbar'
 import { useProjectContext } from '../../../shared/context/project-context'
 import usePersistedState from '../../../shared/hooks/use-persisted-state'
@@ -14,7 +13,6 @@ import * as eventTracking from '../../../infrastructure/event-tracking'
 import { getPdfCachingMetrics } from '../util/metrics'
 import { debugConsole } from '@/utils/debugging'
 import { usePdfPreviewContext } from '@/features/pdf-preview/components/pdf-preview-provider'
-import { useFeatureFlag } from '@/shared/context/split-test-context'
 import usePresentationMode from '../hooks/use-presentation-mode'
 import useMouseWheelZoom from '../hooks/use-mouse-wheel-zoom'
 
@@ -31,8 +29,6 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
 
   const { setLoadingError } = usePdfPreviewContext()
 
-  const hasNewPdfToolbar = useFeatureFlag('pdf-controls')
-
   // state values persisted in localStorage to restore on load
   const [scale, setScale] = usePersistedState(
     `pdf-viewer-scale:${projectId}`,
@@ -389,15 +385,6 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
   const setZoom = useCallback(
     zoom => {
       switch (zoom) {
-        // TODO: We can remove fit-width and fit-height once the
-        // pdf toolbar is fully rolled out
-        case 'fit-width':
-          setScale('page-width')
-          break
-
-        case 'fit-height':
-          setScale('page-height')
-          break
         case 'zoom-in':
           if (pdfJsWrapper) {
             setScale(
@@ -505,22 +492,16 @@ function PdfJsViewer({ url, pdfFile }: PdfJsViewerProps) {
       >
         <div className="pdfViewer" />
       </div>
-      <div className="pdfjs-controls" tabIndex={0}>
+      {toolbarInfoLoaded && (
-        {hasNewPdfToolbar ? (
+        <PdfViewerControlsToolbar
-          toolbarInfoLoaded && (
+          requestPresentationMode={requestPresentationMode}
-            <PdfViewerControlsToolbar
+          setZoom={setZoom}
-              requestPresentationMode={requestPresentationMode}
+          rawScale={rawScale}
-              setZoom={setZoom}
+          setPage={handlePageChange}
-              rawScale={rawScale}
+          page={page}
-              setPage={handlePageChange}
+          totalPages={totalPages}
-              page={page}
+        />
-              totalPages={totalPages}
+      )}
-            />
-          )
-        ) : (
-          <PdfViewerControls setZoom={setZoom} />
-        )}
-      </div>
     </div>
   )
 }

services/web/frontend/js/features/pdf-preview/components/pdf-preview-hybrid-toolbar.jsx

@@ -9,7 +9,6 @@ import PdfHybridDownloadButton from './pdf-hybrid-download-button'
 import PdfHybridCodeCheckButton from './pdf-hybrid-code-check-button'
 import PdfOrphanRefreshButton from './pdf-orphan-refresh-button'
 import { DetachedSynctexControl } from './detach-synctex-control'
-import { useFeatureFlag } from '@/shared/context/split-test-context'
 import Icon from '../../../shared/components/icon'
 
 const ORPHAN_UI_TIMEOUT_MS = 5000
@@ -55,8 +54,6 @@ function PdfPreviewHybridToolbar() {
 }
 
 function PdfPreviewHybridToolbarInner() {
-  const hasNewPdfToolbar = useFeatureFlag('pdf-controls')
-
   return (
     <>
       <div className="toolbar-pdf-left">
@@ -65,9 +62,7 @@ function PdfPreviewHybridToolbarInner() {
         <PdfHybridDownloadButton />
       </div>
       <div className="toolbar-pdf-right">
-        {hasNewPdfToolbar && (
+        <div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
-          <div className="toolbar-pdf-controls" id="toolbar-pdf-controls" />
-        )}
         <PdfHybridCodeCheckButton />
         <SwitchToEditorButton />
         <DetachedSynctexControl />

services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls-toolbar.tsx

@@ -3,7 +3,6 @@ import { createPortal } from 'react-dom'
 import PdfPageNumberControl from './pdf-page-number-control'
 import PdfZoomButtons from './pdf-zoom-buttons'
 import PdfZoomDropdown from './pdf-zoom-dropdown'
-import SplitTestBadge from '@/shared/components/split-test-badge'
 import { useResizeObserver } from '@/shared/hooks/use-resize-observer'
 import PdfViewerControlsMenuButton from './pdf-viewer-controls-menu-button'
 import { useDetachCompileContext as useCompileContext } from '../../../shared/context/detach-compile-context'
@@ -55,10 +54,6 @@ function PdfViewerControlsToolbar({
 
   return createPortal(
     <div className="pdfjs-viewer-controls" ref={pdfControlsRef}>
-      <SplitTestBadge
-        splitTestName="pdf-controls"
-        displayOnVariants={['enabled']}
-      />
       <InnerControlsComponent
         requestPresentationMode={requestPresentationMode}
         setZoom={setZoom}

services/web/frontend/js/features/pdf-preview/components/pdf-viewer-controls.jsx

@@ -1,56 +0,0 @@
-import { ButtonGroup } from 'react-bootstrap'
-import PropTypes from 'prop-types'
-import Button from 'react-bootstrap/lib/Button'
-import Icon from '../../../shared/components/icon'
-import { memo } from 'react'
-import { useTranslation } from 'react-i18next'
-
-function PdfViewerControls({ setZoom }) {
-  const { t } = useTranslation()
-  return (
-    <ButtonGroup>
-      <Button
-        aria-label={t('fit_to_width')}
-        bsSize="large"
-        bsStyle={null}
-        className="btn-secondary-info btn-secondary"
-        onClick={() => setZoom('fit-width')}
-      >
-        <Icon type="arrows-h" />
-      </Button>
-      <Button
-        aria-label={t('fit_to_height')}
-        bsSize="large"
-        bsStyle={null}
-        className="btn-secondary-info btn-secondary"
-        onClick={() => setZoom('fit-height')}
-      >
-        <Icon type="arrows-v" />
-      </Button>
-      <Button
-        aria-label={t('zoom_in')}
-        bsSize="large"
-        bsStyle={null}
-        className="btn-secondary-info btn-secondary"
-        onClick={() => setZoom('zoom-in')}
-      >
-        <Icon type="search-plus" />
-      </Button>
-      <Button
-        aria-label={t('zoom_out')}
-        bsSize="large"
-        bsStyle={null}
-        className="btn-secondary-info btn-secondary"
-        onClick={() => setZoom('zoom-out')}
-      >
-        <Icon type="search-minus" />
-      </Button>
-    </ButtonGroup>
-  )
-}
-
-PdfViewerControls.propTypes = {
-  setZoom: PropTypes.func.isRequired,
-}
-
-export default memo(PdfViewerControls)

services/web/frontend/js/features/pdf-preview/hooks/use-mouse-wheel-zoom.ts

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react'
 import PDFJSWrapper from '../util/pdf-js-wrapper'
-import { useFeatureFlag } from '@/shared/context/split-test-context'
 
 // We need this to work for both a traditional mouse wheel and a touchpad "pinch to zoom".
 // From experimentation, trackpads tend to fire a lot of events with small deltaY's where
@@ -15,8 +14,6 @@ export default function useMouseWheelZoom(
   pdfJsWrapper: PDFJSWrapper | null | undefined,
   setScale: (scale: string) => void
 ) {
-  const isEnabled = useFeatureFlag('pdf-controls')
-
   const isZoomingRef = useRef(false)
 
   const performZoom = useCallback(
@@ -62,7 +59,7 @@ export default function useMouseWheelZoom(
   )
 
   useEffect(() => {
-    if (pdfJsWrapper && isEnabled) {
+    if (pdfJsWrapper) {
       const wheelListener = (event: WheelEvent) => {
         if (event.metaKey || event.ctrlKey) {
           event.preventDefault()
@@ -85,5 +82,5 @@ export default function useMouseWheelZoom(
         pdfJsWrapper.container.removeEventListener('wheel', wheelListener)
       }
     }
-  }, [pdfJsWrapper, setScale, isEnabled, performZoom])
+  }, [pdfJsWrapper, setScale, performZoom])
 }

services/web/frontend/stylesheets/app/editor/pdf.less

@@ -210,52 +210,6 @@
   }
 }
 
-// TODO: remove this block once the new pdfjs toolbar is fully rolled out
-.pdfjs-controls {
-  position: absolute;
-  padding: @line-height-computed / 2;
-  top: 0;
-  left: 0;
-  display: inline-block;
-  z-index: 10; // above the PDF viewer
-
-  .btn-group {
-    transition:
-      opacity 0.5s ease,
-      visibility 0 linear 0.5s;
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &:focus-within,
-  &:hover {
-    // make .pdfjs-controls and its children visible when it or any of its descendants are focused
-    .btn-group {
-      transition: none;
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  &:hover,
-  &.flash {
-    .btn-group {
-      transition: none;
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  i.fa-arrows-h {
-    border-right: 2px solid @content-primary;
-    border-left: 2px solid @content-primary;
-  }
-  i.fa-arrows-v {
-    border-top: 2px solid @content-primary;
-    border-bottom: 2px solid @content-primary;
-  }
-}
-
 .pdfjs-viewer-controls {
   display: flex;
   align-items: center;