From d59c9d0beb63fccff84903c555b51f4391d1c94b Mon Sep 17 00:00:00 2001
From: Cata <cat2608@gmail.com>
Date: Fri, 22 Dec 2023 16:38:23 +0000
Subject: [PATCH] fix: correct visibility toggling of details section
 [HEAD-1172] (#418)

* fix(suggestion-details): correct visibility toggling of details section

- Resolved an issue where the suggestion details section in the webview was not properly toggling visibility.
- Replaced the previous inline styling method with a CSS class.

* fix: cache elements references to minimize repetitive DOM queries

* chore: add CHANGELOG Snyk Code webview fixes
---
 CHANGELOG.md                                      |  7 +++++++
 .../suggestion/codeSuggestionWebviewProvider.ts   |  2 +-
 .../suggestion/codeSuggestionWebviewScript.ts     | 15 +++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fef392b7a..1606a95f5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Snyk Security - Code and Open Source Dependencies Changelog
 
+## [2.2.1]
+
+### Fixed
+
+- Snyk Code: Optimized performance by caching DOM element references in `suggestion-details`. This minimizes repetitive DOM queries, enhancing the responsiveness and efficiency of the webview.
+- Snyk Code: Corrected the visibility toggling behavior in the `#suggestion-details` section. Replaced inline styling with CSS class-based approach.
+
 ## [2.2.0]
 
 ### Added
diff --git a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts
index b54ce499c..def7b6614 100644
--- a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts
+++ b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewProvider.ts
@@ -291,7 +291,7 @@ export class CodeSuggestionWebviewProvider
           </div>
         </section>
 
-        <section class="delimiter-top">
+        <section class="delimiter-top suggestion-details-content">
           <div id="suggestion-details" class="suggestion-details"></div>
         </section>
         <section class="actions row no-padding-top">
diff --git a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts
index d15eb5ba1..9370c9534 100644
--- a/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts
+++ b/src/snyk/snykCode/views/suggestion/codeSuggestionWebviewScript.ts
@@ -58,6 +58,12 @@ declare const acquireVsCodeApi: any;
 
   const vscode = acquireVsCodeApi();
 
+  const elements = {
+    readMoreBtn: document.querySelector('.read-more-btn') as HTMLElement,
+    suggestionDetails: document.querySelector('#suggestion-details') as HTMLElement,
+    suggestionDetailsContent: document.querySelector('.suggestion-details-content') as HTMLElement,
+  };
+
   let isReadMoreBtnEventBound = false;
 
   function navigateToUrl(url: string) {
@@ -321,17 +327,18 @@ declare const acquireVsCodeApi: any;
   }
 
   function showSuggestionDetails(suggestion: Suggestion) {
-    const suggestionDetails = document.querySelector('#suggestion-details') as HTMLElement;
-    const readMoreBtn = document.querySelector('.read-more-btn') as HTMLElement;
+    const { suggestionDetails, readMoreBtn, suggestionDetailsContent } = elements;
 
     if (!suggestion || !suggestion.text || !suggestionDetails || !readMoreBtn) {
+      readMoreBtn.classList.add('hidden');
+      suggestionDetailsContent.classList.add('hidden');
       return;
     }
 
     suggestionDetails.innerHTML = suggestion.text;
     suggestionDetails.classList.add('collapsed');
-
-    readMoreBtn.style.display = 'block';
+    readMoreBtn.classList.remove('hidden');
+    suggestionDetailsContent.classList.remove('hidden');
 
     if (!isReadMoreBtnEventBound) {
       readMoreBtn.addEventListener('click', () => {