Add draggable col width

fixes #97
MisterPhilip · Mar 1, 2020 · e057a17 · e057a17
1 parent 19ee3ab
commit e057a17
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/devtools/panel.html b/src/devtools/panel.html
@@ -5,6 +5,9 @@
     <link rel="stylesheet" type="text/css" href="./panel.css" />
     <style type="text/css" id="settingsStyles"></style>
     <style type="text/css" id="filterStyles"></style>
+    <style type="text/css" id="cellWidthStyles">
+        .request-details tbody > tr > td:first-of-type { width: 14rem; }
+    </style>
 </head>
 <body>
     <header>

diff --git a/src/devtools/panel.js b/src/devtools/panel.js
@@ -129,7 +129,7 @@ window.Omnibug = (() => {
     });
     d.addEventListener("click", function (e) {
         if (settings.contextMenuBeta) {
-            if (e.target.hasAttribute("data-context-menu") || (e.target.parentNode && e.target.parentNode.hasAttribute("data-context-menu"))) {
+            if (e.target.hasAttribute("data-context-menu") || (e.target.parentNode && e.target.parentNode.hasAttribute && e.target.parentNode.hasAttribute("data-context-menu"))) {
                 let item = (e.target.hasAttribute("data-context-menu")) ? e.target : e.target.parentNode,
                     action = item.getAttribute("data-context-menu"),
                     parameterKey = item.getAttribute("data-parameter");
@@ -185,6 +185,25 @@ window.Omnibug = (() => {
             });
         }
     });
+    requestPanel.addEventListener("mousedown", (event) => {
+        if (event.target.tagName === "TD" && !event.target.classList.contains("parameter-value")) {
+            event.preventDefault();
+            let stylesheet = d.getElementById("cellWidthStyles"),
+                originalWidth = event.target.getBoundingClientRect().width,
+                offset = event.clientX;
+            let moveHandler = (event) => {
+                let width = originalWidth + (event.clientX - offset);
+                stylesheet.sheet.deleteRule(0);
+                stylesheet.sheet.insertRule(`.request-details tbody > tr > td:first-of-type { width: ${width > 25 ? width : 25}px; }`);
+            };
+            d.addEventListener("mousemove", moveHandler, true);
+            requestPanel.addEventListener("mouseup", (event) => {
+                d.removeEventListener("mousemove", moveHandler, true);
+                requestPanel.mouseup = null;
+            }, true);
+
+        }
+    });
 
     // Toasts
     document.getElementById("toasts").addEventListener("click", (event) => {

diff --git a/src/devtools/panel.scss b/src/devtools/panel.scss
@@ -193,6 +193,19 @@ nav.navbar {
     width: 14em;
     font-weight: 600;
     padding-left: .3em;
+    &::after {
+        content: " ";
+        width: 5px;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        cursor: w-resize;
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+    }
+  }
+  .parameter-value {
+      padding-left: 5px;
   }
 }
 .request-details:last-of-type {
@@ -201,7 +214,7 @@ nav.navbar {
   }
 }
 .request-details[open] {
-  > summary {
+  > summary { 
     border-bottom: 0;
   }
 }
@@ -394,6 +407,9 @@ body.dark {
     background-color: #555;
     color: #ddd;
   }
+  .request tbody > tr > td:first-of-type {
+      border-right: 1px solid rgba(255, 255, 255, 0.1);
+  }
 
   .request-details > summary {
     background-color: #3a3a3a;