From e057a17af267e03e7da86ec410fcdf83ba6db30a Mon Sep 17 00:00:00 2001 From: Philip Lawrence Date: Sun, 1 Mar 2020 01:47:28 -0700 Subject: [PATCH] Add draggable col width fixes #97 --- src/devtools/panel.html | 3 +++ src/devtools/panel.js | 21 ++++++++++++++++++++- src/devtools/panel.scss | 18 +++++++++++++++++- 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/devtools/panel.html b/src/devtools/panel.html index f5d82535..ed3d837f 100644 --- a/src/devtools/panel.html +++ b/src/devtools/panel.html @@ -5,6 +5,9 @@ +
diff --git a/src/devtools/panel.js b/src/devtools/panel.js index cdef5d2b..b43020a2 100644 --- 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 index 3ccbcd57..9df8811f 100644 --- 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;