From da4c16cbb35911a90eaf2c8945c7d8b9c1f2aea0 Mon Sep 17 00:00:00 2001
From: Bernhard Caspar <b.caspar.ext@itsonix.eu>
Date: Tue, 9 Feb 2021 17:46:25 +0100
Subject: [PATCH 1/2] Improve context name display

---
 packages/devtool-extenstion/extension/core/hook.js  | 13 +++++++------
 .../src/containers/Sidebar/index.scss               |  4 ++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/devtool-extenstion/extension/core/hook.js b/packages/devtool-extenstion/extension/core/hook.js
index ea5f845..53f2c54 100644
--- a/packages/devtool-extenstion/extension/core/hook.js
+++ b/packages/devtool-extenstion/extension/core/hook.js
@@ -174,14 +174,15 @@ export function installHook(target) {
       fiberNodeToDebug.context[debugId] &&
       node.pendingProps.value === fiberNodeToDebug.context[debugId].value
     );
-
+  
+    const displayName =  node.pendingProps.displayName || node.type._context.displayName;
+    const value = node.pendingProps.value;
+    const debugName = value && (Object.keys(value).slice(0, 3).join(", ") + (value.length > 3 ? " ..." : ""));
+    
     fiberNodeToDebugCopy.context[debugId] = {
       valueChanged,
-      value: node.pendingProps.value,
-      displayName:
-        node.pendingProps.displayName ||
-        node.type._context.displayName ||
-        debugId,
+      value,
+      displayName: displayName || debugName || debugId,
     };
   };
 
diff --git a/packages/devtool-extenstion/src/containers/Sidebar/index.scss b/packages/devtool-extenstion/src/containers/Sidebar/index.scss
index 3ed49d1..97b8bc4 100644
--- a/packages/devtool-extenstion/src/containers/Sidebar/index.scss
+++ b/packages/devtool-extenstion/src/containers/Sidebar/index.scss
@@ -3,7 +3,7 @@ aside {
   flex-direction: column;
   background-color: var(--sidebar-bg-color);
   border-right: 1px solid var(--border-color);
-  width: 250px;
+  width: 275px;
 
   .filters {
     align-items: center;
@@ -32,7 +32,7 @@ aside {
       font-size: 0.9rem;
       padding: 1rem 1rem 1.5rem;
       position: relative;
-      word-break: break-all;
+      overflow-wrap: break-word;
 
       &:hover,
       &.selected {

From 7b91874bc1b2cedb48bff410f7a45f0062866d98 Mon Sep 17 00:00:00 2001
From: Bernhard Caspar <b.caspar.ext@itsonix.eu>
Date: Wed, 10 Feb 2021 11:15:26 +0100
Subject: [PATCH 2/2] Add object detection

---
 packages/devtool-extenstion/extension/core/hook.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/devtool-extenstion/extension/core/hook.js b/packages/devtool-extenstion/extension/core/hook.js
index 53f2c54..f9006d6 100644
--- a/packages/devtool-extenstion/extension/core/hook.js
+++ b/packages/devtool-extenstion/extension/core/hook.js
@@ -176,8 +176,10 @@ export function installHook(target) {
     );
   
     const displayName =  node.pendingProps.displayName || node.type._context.displayName;
+
     const value = node.pendingProps.value;
-    const debugName = value && (Object.keys(value).slice(0, 3).join(", ") + (value.length > 3 ? " ..." : ""));
+    const valueIsObject = value && !Array.isArray(value) && typeof value === 'object';
+    const debugName = valueIsObject && (Object.keys(value).slice(0, 3).join(", ") + (value.length > 3 ? " ..." : ""));
     
     fiberNodeToDebugCopy.context[debugId] = {
       valueChanged,