From 11902fefd15e42cb4864a03daeec6c78b700bdd0 Mon Sep 17 00:00:00 2001
From: Shweelan Samson <shweelan@genieacs.com>
Date: Fri, 12 Oct 2018 00:20:27 +0300
Subject: [PATCH] Prevent all parameters overflow

---
 client/components/all-parameters.js |  8 ++++-
 client/components/parameter.js      | 12 ++++---
 client/css/app.css                  |  9 ++++++
 client/long-text-component.js       | 50 ++++++++++++++++++++---------
 4 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/client/components/all-parameters.js b/client/components/all-parameters.js
index 8ed6ce7..3403299 100644
--- a/client/components/all-parameters.js
+++ b/client/components/all-parameters.js
@@ -3,6 +3,7 @@
 import m from "mithril";
 import * as components from "../components";
 import * as taskQueue from "../task-queue";
+import longTextComponent from "../long-text-component";
 
 function escapeRegExp(str) {
   return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
@@ -101,7 +102,12 @@ const component = {
           )
         );
 
-        return m("tr", attrs, m("td.left", k), m("td.right", val));
+        return m(
+          "tr",
+          attrs,
+          m("td.left", m(longTextComponent, { text: k })),
+          m("td.right", val)
+        );
       });
 
     return m(
diff --git a/client/components/parameter.js b/client/components/parameter.js
index f4ee24b..d03c5d8 100644
--- a/client/components/parameter.js
+++ b/client/components/parameter.js
@@ -6,6 +6,7 @@ import * as store from "../store";
 import * as expression from "../../common/expression";
 import memoize from "../../common/memoize";
 import timeAgo from "../timeago";
+import longTextComponent from "../long-text-component";
 
 const memoizedParse = memoize(expression.parse);
 
@@ -69,9 +70,12 @@ const component = {
       );
     }
 
-    const el = m(
-      "span.parameter-value",
+    const el = m(longTextComponent, { text: value });
+
+    return m(
+      "span",
       {
+        class: "parameter-value",
         onmouseover: e => {
           e.redraw = false;
           // Don't update any child element
@@ -82,11 +86,9 @@ const component = {
           }
         }
       },
-      value,
+      el,
       edit
     );
-
-    return el;
   }
 };
 
diff --git a/client/css/app.css b/client/css/app.css
index 16a00fc..e6f448d 100644
--- a/client/css/app.css
+++ b/client/css/app.css
@@ -538,10 +538,13 @@ span.na {
 
     & > table {
       width: 100%;
+      table-layout: fixed;
       border-spacing: 0;
       & > tbody {
         & > tr {
           & > td {
+            overflow: hidden;
+            white-space: nowrap;
             border-bottom: 1px dotted var(--color1);
           }
           transition: background-color var(--fade);
@@ -550,6 +553,9 @@ span.na {
           }
 
           & > td.left {
+            & > * {
+              max-width: 100%;
+            }
           }
           & > td.right {
             text-align: right;
@@ -644,6 +650,9 @@ span.long-text {
   text-overflow: ellipsis;
   white-space: nowrap;
   max-width: 400px;
+}
+
+span.long-text-overflowed {
   cursor: pointer;
   &:hover {
     text-decoration: underline;
diff --git a/client/long-text-component.js b/client/long-text-component.js
index d884d91..07afb32 100644
--- a/client/long-text-component.js
+++ b/client/long-text-component.js
@@ -8,25 +8,45 @@ const component = {
     const text = vnode.attrs.text;
     const element = vnode.attrs.element || "span";
 
+    function overflowed(_vnode) {
+      if (_vnode.dom.classList.contains("long-text-overflowed")) return;
+      _vnode.dom.classList.add("long-text-overflowed");
+      _vnode.dom.onclick = e => {
+        overlay.open(() => {
+          return m("textarea.long-text", {
+            value: text,
+            cols: 80,
+            rows: 24,
+            readonly: "",
+            oncreate: vnode2 => {
+              vnode2.dom.focus();
+              vnode2.dom.select();
+            }
+          });
+        });
+        // prevent index page selection
+        e.stopPropagation();
+        m.redraw();
+      };
+    }
+
     return m(
       element,
       {
+        oncreate: vnode2 => {
+          if (vnode2.dom.clientWidth !== vnode2.dom.scrollWidth)
+            overflowed(vnode2);
+        },
+        onupdate: vnode2 => {
+          if (vnode2.dom.clientWidth === vnode2.dom.scrollWidth) {
+            vnode2.dom.classList.remove("long-text-overflowed");
+            vnode2.dom.onclick = null;
+          } else {
+            overflowed(vnode2);
+          }
+        },
         class: "long-text",
-        title: text,
-        onclick: () => {
-          overlay.open(() => {
-            return m("textarea.long-text", {
-              value: text,
-              cols: 80,
-              rows: 24,
-              readonly: "",
-              oncreate: vnode2 => {
-                vnode2.dom.focus();
-                vnode2.dom.select();
-              }
-            });
-          });
-        }
+        title: text
       },
       text
     );