From 690a86a153f0f67e7e92015cf4b88021512c243e Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Fri, 30 Oct 2020 17:24:59 +0100
Subject: [PATCH] Display least path difference in title of tabs

---
 apps/remix-ide/src/app/panels/tab-proxy.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index ae66f52c11..b5be530bf3 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -159,13 +159,18 @@ export class TabProxy {
             const duplicateTabName = this.loadedTabs.find(({ title }) => title === formatPath.join('/')).name
             const duplicateTabPath = duplicateTabName.split('/')
             const duplicateTabFormatPath = [...duplicateTabPath].reverse()
-            const duplicateTab = document.querySelector(`[title="${duplicateTabName}"] > span`)
-            const duplicateTitle = duplicateTabFormatPath.slice(0, titleLength).reverse().join('/')
+            const duplicateTabTitle = duplicateTabFormatPath.slice(0, titleLength).reverse().join('/')
 
-            duplicateTab.innerHTML = duplicateTitle
             this.loadedTabs.push({
               name: duplicateTabName,
-              title: duplicateTitle
+              title: duplicateTabTitle
+            })
+            this._view.filetabs.removeTab(duplicateTabName)
+            this._view.filetabs.addTab({
+              id: duplicateTabName,
+              title: duplicateTabTitle,
+              icon,
+              tooltip: duplicateTabName
             })
           }
           break;
@@ -192,6 +197,7 @@ export class TabProxy {
     this._view.filetabs.removeTab(name)
     delete this._handlers[name]
     this.switchToActiveTab()
+    this.loadedTabs = this.loadedTabs.filter(tab => tab.name !== name)
   }
 
   addHandler (type, fn) {