From 7a91ae4044db22c7d42e69fba0d0e6e547096317 Mon Sep 17 00:00:00 2001
From: dleblanccyr <danielleleb12@gmail.com>
Date: Thu, 15 Aug 2019 19:15:48 +0000
Subject: [PATCH] Bug 1572085 - Adds functionality to show long hex. r=johannh

Differential Revision: https://phabricator.services.mozilla.com/D41599

--HG--
extra : moz-landing-system : lando
---
 .../content/components/info-item.css          | 21 +++++++++++++++++++
 .../content/components/info-item.js           |  3 +++
 2 files changed, 24 insertions(+)

diff --git a/toolkit/components/certviewer/content/components/info-item.css b/toolkit/components/certviewer/content/components/info-item.css
index 4909723cd20c..2c20e0371021 100644
--- a/toolkit/components/certviewer/content/components/info-item.css
+++ b/toolkit/components/certviewer/content/components/info-item.css
@@ -7,6 +7,10 @@
   display: contents;
 }
 
+:host * {
+  padding: 1px 0;
+}
+
 label {
   text-align: right;
   margin-inline-end: 0;
@@ -27,6 +31,23 @@ label:dir(rtl) {
   white-space: nowrap;
 }
 
+.long-hex:hover {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: rgba(0, 0, 0, 0.06);
+  padding: 0px;
+}
+
+.long-hex-open {
+  white-space: normal;
+}
+
+:host(.value) *,
+:host(.method) *,
+:host(.padding) * {
+  padding-bottom: 10px;
+}
+
 :host(.value) *,
 :host(.method) *,
 :host(.padding) * {
diff --git a/toolkit/components/certviewer/content/components/info-item.js b/toolkit/components/certviewer/content/components/info-item.js
index d87e51c590c0..3f5e26bd0a18 100644
--- a/toolkit/components/certviewer/content/components/info-item.js
+++ b/toolkit/components/certviewer/content/components/info-item.js
@@ -39,6 +39,9 @@ export class InfoItem extends HTMLElement {
     // TODO: Use Fluent-friendly condition.
     if (this.item.label === "Modulus") {
       info.classList.add("long-hex");
+      this.addEventListener("click", () => {
+        info.classList.toggle("long-hex-open");
+      });
     }
   }
 }