From 3c011f007a5a7b9851959fe4c3aaaf5873605fa6 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Fri, 30 Oct 2020 17:00:32 +0100
Subject: [PATCH 1/2] Update path through DOM query selector

---
 apps/remix-ide/src/app/panels/tab-proxy.js | 43 +++++++++++++++++++++-
 1 file changed, 41 insertions(+), 2 deletions(-)

diff --git a/apps/remix-ide/src/app/panels/tab-proxy.js b/apps/remix-ide/src/app/panels/tab-proxy.js
index 019283d09c..ae66f52c11 100644
--- a/apps/remix-ide/src/app/panels/tab-proxy.js
+++ b/apps/remix-ide/src/app/panels/tab-proxy.js
@@ -14,6 +14,7 @@ export class TabProxy {
     this.data = {}
     this._view = {}
     this._handlers = {}
+    this.loadedTabs = []
 
     globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => {
     // update invert for all icons
@@ -136,9 +137,47 @@ export class TabProxy {
     if (this._handlers[name]) return
 
     var slash = name.split('/')
-    if (!title) {
-      title = name.indexOf('/') !== -1 ? slash[slash.length - 1] : name
+    const tabPath = slash.reverse()
+    const tempTitle = []
+
+    for(let i = 0; i < tabPath.length; i++) {
+      tempTitle.push(tabPath[i])
+      const formatPath = [...tempTitle].reverse()
+
+      if(!title) {
+        const index = this.loadedTabs.findIndex(({ title }) => title === formatPath.join('/'))
+
+        if (index === -1) {
+          title = formatPath.join('/')
+          const titleLength = formatPath.length
+          this.loadedTabs.push({
+            name,
+            title
+          })
+          formatPath.shift()
+          if (formatPath.length > 0) {
+            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('/')
+
+            duplicateTab.innerHTML = duplicateTitle
+            this.loadedTabs.push({
+              name: duplicateTabName,
+              title: duplicateTitle
+            })
+          }
+          break;
+        }
+      } else {
+        this.loadedTabs.push({
+          name,
+          title
+        })
+      }
     }
+
     this._view.filetabs.addTab({
       id: name,
       title,

From 3ac279b372a90219265691e22be0353aaf5637c2 Mon Sep 17 00:00:00 2001
From: ioedeveloper <daviddisu8@gmail.com>
Date: Fri, 30 Oct 2020 17:24:59 +0100
Subject: [PATCH 2/2] 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) {