on the side

ChartingSpace/TimeMachine.js

@@ -603,12 +603,12 @@ function newTimeMachine () {
     if (description !== undefined) {
       label = description
     }
-    printLabel(label, position.x + 15, position.y - 10, opacity, fontSize)
+    printLabel(label, position.x + 20, position.y - 10, opacity, fontSize)
 
     if (icon !== undefined) {
       if (icon.canDrawIcon === true) {
         browserCanvasContext.drawImage(
-        icon, position.x - 0,
+        icon, position.x + 5,
         position.y - 22,
         imageSize,
         imageSize)
@@ -637,6 +637,8 @@ function newTimeMachine () {
       }
     }
 
+    drawTab(0, 0, exchangeMarkets.size * 40, 90, thisObject.container)
+
     const INTER_EXCHANGE_SPACE = 60
     const INTER_MARKET_SPACE = -100
 
@@ -653,14 +655,14 @@ function newTimeMachine () {
         if (icon.canDrawIcon === true) {
           browserCanvasContext.drawImage(
           icon,
-          -15 + xOffSet,
+          -20 + xOffSet,
            -43,
           imageSize,
           imageSize)
         }
       }
 
-      printLabel(exchangeMarket.exchangeName, -0 + xOffSet, -30, opacity, fontSize)
+      printLabel(exchangeMarket.exchangeName, -5 + xOffSet, -30, opacity, fontSize, UI_COLOR.GREY)
 
       position.x = position.x + INTER_EXCHANGE_SPACE
 
@@ -676,7 +678,7 @@ function newTimeMachine () {
         }
       }
 
-      printLabel(exchangeMarket.marketName, -5 + xOffSet, -10, opacity, fontSize)
+      printLabel(exchangeMarket.marketName, -5 + xOffSet, -10, opacity, fontSize, UI_COLOR.GREY)
 
       icon = exchangeMarket.quotedAssetIcon
       if (icon !== undefined) {
@@ -694,6 +696,53 @@ function newTimeMachine () {
 
       browserCanvasContext.restore()
     })
+
+    function drawTab (x, y, width, height, container) {
+      const GRADIENT = 0
+      const X_OFFSET = -3
+      const Y_OFFSET = 13
+      const TAB_CORNERS_RADIUS = 5
+
+      let point = {
+        x: x,
+        y: y
+      }
+      point = transformThisPoint(point, container)
+
+      let point1 = {
+        x: point.x + X_OFFSET,
+        y: point.y + Y_OFFSET
+      }
+
+      let point2 = {
+        x: point.x + X_OFFSET,
+        y: point.y + height + Y_OFFSET
+      }
+
+      let point3 = {
+        x: point.x - width + X_OFFSET,
+        y: point.y + height - GRADIENT + Y_OFFSET
+      }
+
+      let point4 = {
+        x: point.x - width + X_OFFSET,
+        y: point.y + GRADIENT + Y_OFFSET
+      }
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.moveTo(point1.x, point1.y)
+      browserCanvasContext.lineTo(point2.x, point2.y)
+      browserCanvasContext.lineTo(point3.x, point3.y)
+      browserCanvasContext.arc(point3.x, point3.y - TAB_CORNERS_RADIUS, TAB_CORNERS_RADIUS, 0.5 * Math.PI, 1.0 * Math.PI)
+      // browserCanvasContext.lineTo(point4.x, point4.y)
+      browserCanvasContext.arc(point4.x, point4.y + TAB_CORNERS_RADIUS, TAB_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI)
+      browserCanvasContext.closePath()
+      browserCanvasContext.lineWidth = 1
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ''
+      browserCanvasContext.stroke()
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
+      browserCanvasContext.fill()
+    }
   }
 
   function recalculateCoordinateSystem () {