cleaned up styling on navbar again; there were mult overlapping style settings. Is now nested inside of state-container as it should be. Also added a console.log to background script import action to try to see what tabsObj looks like.

Author: jrosengrant

src/app/styles/layout/_stateContainer.scss

@@ -19,16 +19,6 @@
   box-shadow: none;
 }
 
-.state-container .navbar {
-  background-color: $background-color;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  height: 30px;
-  position: static;
-}
-
 .state-container .main-navbar {
   background-color: $background-color;
   display: flex;
@@ -58,15 +48,6 @@
   height: 35px;
 }
 
-.navbar {
-  // prevent navbar from scrolling with state/tree display
-  position: sticky;
-  top: 40px; //JR 12.16.23 @12:15pm: this hardcoding is not best practice, should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar
-  left: 0px;
-  z-index: 1;
-  @extend %disable-highlight;
-}
-
 .no-data-message {
   color: $text-color;
   font: normal 13px $text-font-stack;
@@ -125,12 +106,17 @@
   }
 
   .navbar {
-    background-color: $navbar-color;
+    background-color: $background-color;
     display: flex;
     flex-direction: row;
-    justify-content: start;
+    justify-content: flex-start;
     align-items: center;
     height: 30px;
+    position: sticky;
+    top: 40px; //JR 12.16.23 @12:15pm: this hardcoding is not best practice, should revisit to figure out a more dynamic way of sticking the navbar to the bottom of the main-navbar
+    left: 0px;
+    z-index: 1;
+    @extend %disable-highlight;
   }
 
   .main-navbar {

src/extension/background.js

@@ -207,6 +207,7 @@ chrome.runtime.onConnect.addListener((port) => {
     switch (action) {
       case 'import': // create a snapshot property on tabId and set equal to tabs object
         // may need do something like filter payload from stateless
+        console.log('background import action tabsObj: ', tabsObj);
         tabsObj[tabId].snapshots = payload.snapshots; // reset snapshots to page last state recorded
         // tabsObj[tabId].hierarchy = savedSnapshot.hierarchy; // why don't we just use hierarchy? Because it breaks everything...
         tabsObj[tabId].hierarchy.children = payload.hierarchy.children; // resets hierarchy to last state recorded