From fffa23a9e36e2682a562b7aa4b3b4a2c5b18e5ee Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 28 Oct 2021 17:25:25 +0200
Subject: [PATCH] add scroll functionality

---
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.css | 21 +++++++++++++++++---
 libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx | 19 ++++++++++++------
 package.json                                 |  2 +-
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
index 08462647ec..bd49390eb2 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.css
@@ -40,9 +40,24 @@
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
 }
-.editor-f1 {
+.tab-scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    width: 95%;
+}
+.left-icon {
+    width: 5%;
     height: 49px;
 }
-.editor-zoom {
-    height: 49px;
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.tab-scroll::-webkit-scrollbar {
+    display: none;
+}
+  
+  /* Hide scrollbar for IE, Edge and Firefox */
+.tab-scroll {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
 }
diff --git a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
index 0c2980116b..b187fb382c 100644
--- a/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
+++ b/libs/remix-ui/tabs/src/lib/remix-ui-tabs.tsx
@@ -21,12 +21,19 @@ export interface TabsUIApi {
 export const TabsUI = (props: TabsUIProps) => {
   const [selectedIndex, setSelectedIndex] = useState(-1)
   const currentIndexRef = useRef(-1)
+  const tabsRef = useRef({})
+
+  useEffect(() => {
+    if (props.tabs[selectedIndex]) {
+      tabsRef.current[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }
+  }, [selectedIndex])
 
   const renderTab = (tab, index) => {
     const classNameImg = 'my-1 mr-1 text-dark ' + tab.iconClass
     const classNameTab = 'nav-item nav-link tab' + (index === selectedIndex ? ' active' : '')
     return (
-      <div className={classNameTab} title={tab.tooltip}>
+      <div ref={el => { tabsRef.current[index] = el }} className={classNameTab} title={tab.tooltip}>
         {tab.icon ? (<img className="my-1 mr-1 iconImage" src={tab.icon} />) : (<i className={classNameImg}></i>)}
         <span className="title-tabs">{tab.title}</span>
         <span className="close-tabs" onClick={() => props.onClose(index)}>
@@ -53,12 +60,12 @@ export const TabsUI = (props: TabsUIProps) => {
 
   return (
     <div className="remix-ui-tabs header nav nav-tabs">
-      <div className="d-flex flex-row justify-content-center align-items-center editor-zoom" title="Zoom in/out">
-        <span data-id="tabProxyZoomOut" className="btn btn-sm px-1 fas fa-search-minus text-dark" onClick={() => props.onZoomOut()}></span>
-        <span data-id="tabProxyZoomIn" className="btn btn-sm px-1 fas fa-search-plus text-dark" onClick={() => props.onZoomIn()}></span>
+      <div className="d-flex flex-row justify-content-center align-items-center left-icon">
+        <span data-id="tabProxyZoomOut" className="btn btn-sm px-1 fas fa-search-minus text-dark" title="Zoom out" onClick={() => props.onZoomOut()}></span>
+        <span data-id="tabProxyZoomIn" className="btn btn-sm px-1 fas fa-search-plus text-dark" title="Zoom in" onClick={() => props.onZoomIn()}></span>
+        <i className="d-flex flex-row justify-content-center align-items-center far fa-sliders-v px-1" title="press F1 when focusing the editor to show advanced configuration settings"></i>
       </div>
-      <i className="d-flex flex-row justify-content-center align-items-center far fa-sliders-v px-1 editor-f1" title="press F1 when focusing the editor to show advanced configuration settings"></i>
-      <Tabs selectedIndex={selectedIndex} onSelect={index => { props.onSelect(index); setSelectedIndex(index); currentIndexRef.current = index }} >
+      <Tabs className="tab-scroll" selectedIndex={selectedIndex} onSelect={index => { props.onSelect(index); setSelectedIndex(index); currentIndexRef.current = index }} >
         <TabList>{props.tabs.map((tab, i) => <Tab key={tab.name}>{renderTab(tab, i)}</Tab>)}</TabList>
         {props.tabs.map((tab) => <TabPanel key={tab.name} ></TabPanel>)}
       </Tabs>
diff --git a/package.json b/package.json
index 593867260f..833e460dfd 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
     "nightwatch_local_editor": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/editor.spec.js --env=chrome",
     "nightwatch_local_compiler": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/compiler_api.test.js --env=chrome",
     "nightwatch_local_txListener": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/txListener.test.js --env=chrome",
-    "nightwatch_local_fileManager": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/fileManager_api.spec.js --env=chrome",
+    "nightwatch_local_fileManager": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/fileManager_api.spec.js --env=firefox",
     "nightwatch_local_runAndDeploy": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/runAndDeploy.js --env=chrome-runAndDeploy",
     "nightwatch_local_url": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/url.spec.js --env=chrome",
     "nightwatch_local_verticalIconscontextmenu": "npm run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/verticalIconsPanel.spec.js --env=chrome",