Fixed text wrap bug in extension panel

src/backend/agent.js

@@ -1,17 +1,20 @@
 // @flow
 
 import EventEmitter from 'events';
+import { __DEBUG__ } from '../constants';
 
 import type { RendererID, RendererInterface } from './types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
-  console.log(
-    `%cAgent %c${methodName}`,
-    'color: purple; font-weight: bold;',
-    'font-weight: bold;',
-    ...args
-  );
+  if (__DEBUG__) {
+    console.log(
+      `%cAgent %c${methodName}`,
+      'color: purple; font-weight: bold;',
+      'font-weight: bold;',
+      ...args
+    );
+  }
 };
 
 export default class Agent extends EventEmitter {

src/constants.js

@@ -3,3 +3,5 @@
 export const TREE_OPERATION_ADD = 1;
 export const TREE_OPERATION_REMOVE = 2;
 export const TREE_OPERATION_RESET_CHILDREN = 3;
+
+export const __DEBUG__ = false;

src/devtools/store.js

@@ -7,17 +7,20 @@ import {
   TREE_OPERATION_RESET_CHILDREN,
 } from '../constants';
 import { utfDecodeString } from '../utils';
+import { __DEBUG__ } from '../constants';
 
 import type { Element, ElementType } from './types';
 import type { Bridge } from '../types';
 
 const debug = (methodName, ...args) => {
-  console.log(
-    `%cStore %c${methodName}`,
-    'color: green; font-weight: bold;',
-    'font-weight: bold;',
-    ...args
-  );
+  if (__DEBUG__) {
+    console.log(
+      `%cStore %c${methodName}`,
+      'color: green; font-weight: bold;',
+      'font-weight: bold;',
+      ...args
+    );
+  }
 };
 
 /**

src/devtools/views/Element.css

@@ -3,6 +3,7 @@
   border-radius: 0.25em;
   cursor: pointer;
   position: relative;
+  white-space: nowrap;
 }
 .Element:hover {
   background-color: var(--color-state03);