Some minor refactoring

Author: tbranyen

packages/diffhtml-devtools/shared/scripts/bridge.js

@@ -244,7 +244,7 @@ export default function devTools(Internals) {
     await setExtension(true);
 
     // Start keep-alive in case we disconnect.
-    //keepAlive();
+    keepAlive();
 
     // Call existing cached tasks.
     if (cacheTask.length) {

packages/diffhtml-devtools/shared/scripts/components/split-view.js

@@ -18,11 +18,13 @@ class DevtoolsSplitView extends WebComponent {
         display: flex;
         flex: 1;
         flex-direction: row;
+        height: 100%;
       }
 
       .split-view {
         display: flex;
         width: 100%;
+        height: 100%;
       }
     `;
   }

packages/diffhtml-devtools/shared/scripts/components/transaction-detail.js

@@ -4,13 +4,9 @@ import PropTypes from 'prop-types';
 
 const { keys } = Object;
 
-class DevtoolsTransactionRow extends WebComponent {
+class DevtoolsTransactionDetail extends WebComponent {
   static propTypes = {
-    index: PropTypes.number,
     transaction: PropTypes.object,
-    stateName: PropTypes.string,
-    startTime: PropTypes.number,
-    endTime: PropTypes.number,
   }
 
   render() {
@@ -291,4 +287,4 @@ class DevtoolsTransactionRow extends WebComponent {
   }
 }
 
-customElements.define('devtools-transaction-row', DevtoolsTransactionRow);
+customElements.define('devtools-transaction-detail', DevtoolsTransactionDetail);

packages/diffhtml-devtools/shared/scripts/components/transaction-row.js

@@ -28,7 +28,6 @@ class DevtoolsTransactionRow extends WebComponent {
 
     const {
       domNode = '',
-      markup = {},
       aborted = false,
       promises = [],
       surpressedCount,
@@ -43,18 +42,18 @@ class DevtoolsTransactionRow extends WebComponent {
       }
     });
 
-    const fps = endTime ? 1000 / (endTime - startTime) : Infinity;
-
     return html`
       <link rel="stylesheet" href="/styles/theme.css">
       <style>${this.styles()}</style>
 
       <td class="center aligned">
-        ${surpressedCount}
+        ${Boolean(surpressedCount) && html`
+          <i class="icon plus" />
+        `}
+
         ${unnecessaryRender && transaction.completed && html`
           <div
             data-tooltip="Nothing changed, unnecessary render!"
-            data-position="right center"
           >
             <i class="icon warning sign yellow" />
           </div>

packages/diffhtml-devtools/shared/scripts/index.js

@@ -73,8 +73,6 @@ const inspect = selector => chrome.devtools.inspectedWindow.eval(
   `inspect($$('${selector}')[0])`
 );
 
-const refresh = () => location.reload();
-
 const clearEntries = () => {
   assign(state, {
     inProgress: [],
@@ -88,7 +86,7 @@ const fadeIn = el => {
   return new Promise(resolve => el.animate([
     { opacity: 0 },
     { opacity: 1 },
-  ], { duration: 240 }).onfinish = resolve)
+  ], { duration: 140 }).onfinish = resolve)
     .then(() => {
       el.style.opacity = 1;
     });

packages/diffhtml-devtools/shared/scripts/panels/mounts.js

@@ -125,24 +125,23 @@ class DevtoolsMountsPanel extends WebComponent {
   }
 
   addedElement(domNode) {
-    console.log(domNode);
-    //return new Promise(resolve => {
-    //  domNode.animate([
-    //    { background: 'transparent' },
-    //    { background: 'green' },
-    //    { background: 'transparent' },
-    //  ], { duration: 200 }).onfinish = resolve;
-    //});
+    return new Promise(resolve => {
+      domNode.animate([
+        { background: 'transparent' },
+        { background: '#E1FFE1' },
+        { background: 'transparent' },
+      ], { duration: 200 }).onfinish = resolve;
+    });
   }
 
   removedElement(domNode) {
-    //return new Promise(resolve => {
-    //  domNode.animate([
-    //    { background: 'transparent' },
-    //    { background: 'red' },
-    //    { background: 'transparent' },
-    //  ], { duration: 200 }).onfinish = resolve;
-    //});
+    return new Promise(resolve => {
+      domNode.animate([
+        { background: 'transparent' },
+        { background: '#FFE1E1' },
+        { background: 'transparent' },
+      ], { duration: 200 }).onfinish = resolve;
+    });
   }
 
   renderVTree(vTree) {

packages/diffhtml-devtools/shared/scripts/panels/transactions.js

@@ -26,7 +26,7 @@ class DevtoolsTransactionsPanel extends WebComponent {
   }
 
   render() {
-    const { inspect, clearEntries, inProgress, completed } = this.props;
+    const { clearEntries, inProgress, completed } = this.props;
     const { expandedIndex, isExpanded, autoScroll } = this.state;
     const { toggleAutoscroll } = this;
 
@@ -124,13 +124,17 @@ class DevtoolsTransactionsPanel extends WebComponent {
                 <tbody>
                   <tr class="missing">
                     <td colspan="11">
-                      No transactions
+                      No renders
                     </td>
                   </tr>
                 </tbody>
               `}
             </table>
           `}
+
+          ${expandedIndex !== -1 && html`
+            <i class="icon close" onClick=${this.toggleExpanded(-1)}></i>
+          `}
         </div>
       </div>
     `;

packages/diffhtml-devtools/shared/styles/index.css

@@ -1,4 +1,5 @@
 @import "/styles/theme.css";
+@import "/styles/tooltip.css";
 
 body, main {
   color: #333;
@@ -20,13 +21,13 @@ body::-webkit-scrollbar {
   width: 5px;
   position: absolute;
 }
- 
+
 body::-webkit-scrollbar-track {
   background: #ddd;
 }
- 
+
 body::-webkit-scrollbar-thumb {
-  background: #666; 
+  background: #666;
 }
 
 h1:first-child {

packages/diffhtml-devtools/shared/styles/theme.css

@@ -1,5 +1,6 @@
 @import '/node_modules/semantic-ui-css/semantic.min.css';
 @import '/node_modules/semantic-ui-icon/icon.min.css';
+@import "/styles/tooltip.css";
 
 .ui.inverted.input > input {
   background: #3E3E3E;

packages/diffhtml/lib/tasks/sync-trees.js

@@ -51,9 +51,9 @@ export default function syncTrees(/** @type {Transaction} */ transaction) {
     StateCache.delete(domNode);
     StateCache.set(createNode(newTree), transaction.state);
   }
-  // Otherwise only diff the children.
-  else if (newTree) {
-    transaction.patches = syncTree(oldTree || null, newTree, []);
+  // Synchronize the top level elements.
+  else {
+    transaction.patches = syncTree(oldTree || null, newTree || null, []);
   }
 
   measure('sync trees');