Bug fix/miscellaneous improvements (Azure#4206)

* Fix dotnet branding, add button for jumping to first active comment

* Improve showdocumentation buttons

* Make scrollbars independent between left and right review pane

Author: chidozieononiwu

src/dotnet/APIView/APIViewWeb/Client/css/site.scss

@@ -192,13 +192,18 @@ input[type="search"]::-webkit-search-cancel-button {
 #review-left {
     max-width: none;
     min-width: 10px;
+    height: auto;
+    overflow: auto;
+    max-height: 100vh;
 }
 
 #review-right {
     max-width: 100%;
     min-width: 100px;
-    overflow-x: auto;
+    height: auto;
+    overflow: auto;
     padding: 0px;
+    max-height: 100vh
 }
 /*---------------------------------------------------------------------*/
 
@@ -505,21 +510,6 @@ code {
     white-space: nowrap;
 }
 
-.btn-group {
-    .btn.active {
-        border-radius: .25rem !important;
-    }
-
-    .btn:not(.active) {
-        transform: scaleY(0.9);
-    }
-
-    .btn:hover {
-        border-radius: .25rem !important;
-        transform: scaleY(1);
-    }
-}
-
 .btn-primary {
     background-color: var(--link-color);
 }
@@ -817,7 +807,7 @@ code {
 .icon-comments {
     cursor: pointer;
     position: absolute;
-    right: 30px;
+    right: -25px;
 }
 
 .icon-chevron-right {
@@ -885,6 +875,9 @@ code {
     background: url(/icons/swagger-original.svg) center center no-repeat;
 }
 /*---------------------------------------------------------------------*/
+.invisible {
+    visibility: hidden;
+}
 
 .info-text {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -922,36 +915,36 @@ code {
     user-select: none;
 }
 
-.line-toggle-documentation-button:hover {
-    transform: scale(1);
-}
-
 .line-toggle-documentation-button {
-    display: inline-block;
-    width: 21px;
-    height: 21px;
-    line-height: 21px;
-    color: #fff !important;
+    display: block;
+    width: 100%;
+    height: 100%;
     text-align: center;
-    text-indent: 0;
     cursor: pointer;
-    background-color: #0366d6;
-    border-radius: 3px;
-    box-shadow: 0 1px 4px rgba(27, 31, 35, .15);
-    transition: transform .1s ease-in-out;
-    transform: scale(.8);
     user-select: none;
+    position: relative;
+}
+
+.line-toggle-documentation-button svg {
+    top: 0px;
+    left: 0px;
+}
+
+.line-toggle-documentation-button i {
+    position: absolute;
+    top: 25%;
+    left: 25%;
 }
 
 .line-details-button-cell {
     width: 22px;
     height: 22px;
     min-width: 22px;
     min-height: 22px;
+    padding: 0px;
 }
 
 .line-details {
-    border-right: 1px solid;
     border-right: 1px solid var(--border-color);
     background-color: var(--background-color);
     color: darkcyan;
@@ -972,7 +965,7 @@ code {
     vertical-align: middle;
 }
 
-.line-details td i{
+.row-fold-caret i {
     position: relative;
     left: 6px;
 }

src/dotnet/APIView/APIViewWeb/Client/src/comments.ts

@@ -190,6 +190,12 @@
     highlightCurrentRow(inlineRow);
   });
 
+  $("#jump-to-first-comment").on("click", function () {
+    var commentRows = $('.comment-row');
+    var displayedCommentRows = getDisplayedCommentRows(commentRows, false, true);
+    $(displayedCommentRows[0])[0].scrollIntoView();
+  });
+
   function highlightCurrentRow(rowElement: JQuery<HTMLElement> = $()) {
     if (location.hash.length < 1) return;
     var row = (rowElement.length > 0) ? rowElement : getCodeRow(location.hash.substring(1));
@@ -411,7 +417,7 @@
 
   function ensureMessageIconInDOM() {
     if (!MessageIconAddedToDom) {
-      $(".line-comment-button-cell").append(`<span class="icon icon-comments ` + INVISIBLE + `"><i class="far fa-comment-alt pt-1 pl-1"></i></span>`);
+      $(".comment-icon-cell").append(`<span class="icon icon-comments ` + INVISIBLE + `"><i class="far fa-comment-alt pt-1 pl-1"></i></span>`);
       MessageIconAddedToDom = true;
     }
   }
@@ -420,9 +426,33 @@
     getCodeRow(id).find(SEL_COMMENT_ICON).toggleClass(INVISIBLE, !show);
   }
 
+  function getDisplayedCommentRows(commentRows: JQuery<HTMLElement>, clearCommentAnchors = false, returnFirst = false) {
+    var displayedCommentRows: JQuery<HTMLElement>[] = [];
+    commentRows.each(function (index) {
+      if (clearCommentAnchors) {
+        $(this).find('.comment-thread-anchor').removeAttr("id");
+        $(this).find('.comment-navigation-buttons').empty();
+      }
+
+      if ($(this).hasClass("d-none")) {
+        return;
+      }
+
+      let commentHolder = $(this).find(".comment-holder").first();
+      if (commentHolder.hasClass("comments-resolved") && commentHolder.css("display") != "block") {
+        return;
+      }
+      displayedCommentRows.push($(this));
+      if (returnFirst) {
+        return false;
+      }
+    });
+    return displayedCommentRows
+  }
+
   function addCommentThreadNavigation(){
     var commentRows = $('.comment-row');
-    var displayedCommentRows: JQuery<HTMLElement>[] = [];
+    var displayedCommentRows = getDisplayedCommentRows(commentRows, true, false);
 
     commentRows.each(function (index) {
       $(this).find('.comment-thread-anchor').removeAttr("id");

src/dotnet/APIView/APIViewWeb/Client/src/review.ts

@@ -297,13 +297,17 @@ $(() => {
     if((e.target as HTMLInputElement).checked) {
       // show all documentation
       $(".code-line-documentation").removeClass('hidden-row');
-      $(TOGGLE_DOCUMENTATION).removeClass("icon-chevron-right");
-      $(TOGGLE_DOCUMENTATION).addClass("icon-chevron-up");
+      $(TOGGLE_DOCUMENTATION).children('i').removeClass("fa-square-plus");
+      $(TOGGLE_DOCUMENTATION).children('i').addClass("fa-square-minus");
+      $(TOGGLE_DOCUMENTATION).children('i').css("color", "darkorange");
+      $(TOGGLE_DOCUMENTATION).children('svg').removeClass("invisible");
     } else {
       // hide all documentation
       $(".code-line-documentation").addClass("hidden-row");
-      $(TOGGLE_DOCUMENTATION).removeClass("icon-chevron-up");
-      $(TOGGLE_DOCUMENTATION).addClass("icon-chevron-right");
+      $(TOGGLE_DOCUMENTATION).children('i').removeClass("fa-square-minus");
+      $(TOGGLE_DOCUMENTATION).children('i').addClass("fa-square-plus");
+      $(TOGGLE_DOCUMENTATION).children('i').css("color", "darkcyan");
+      $(TOGGLE_DOCUMENTATION).children('svg').addClass("invisible");
     }
   });
 
@@ -353,8 +357,16 @@ $(() => {
       $(codeLines[documentedBy[i] - 1]).toggleClass("hidden-row");
     }
 
-    $(this).toggleClass('icon-chevron-right');
-    $(this).toggleClass('icon-chevron-up');
+    $(this).children('i').toggleClass('fa-square-minus');
+    $(this).children('i').toggleClass('fa-square-plus');
+    if ($(this).children('i').hasClass('fa-square-plus')) {
+      $(this).children('i').css("color", "darkcyan");
+      $(this).children('svg').addClass("invisible");
+    }
+    else {
+      $(this).children('i').css("color", "darkorange");
+      $(this).children('svg').removeClass("invisible");
+    }
 
     // scroll button to center of screen, so that the line is visible after toggling folding
     $(this).get(0).scrollIntoView({ block: "center"});

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/Review.cshtml

@@ -50,13 +50,18 @@
                 @{
                     var popOverContent = $"<b>{Model.ActiveConversations}</b> active revision threads.<br><b>{Model.TotalActiveConversations}</b> total active threads.<br>"
                     + $"<b>Current Revision:</b> <em>{@Model.Revision.DisplayName}</em>";
-                                        @if (Model.DiffRevisionId != null)
+                    @if (Model.DiffRevisionId != null)
                     {
                         popOverContent += $"<br><b>Current Diff:</b> <em>{@Model.DiffRevision?.DisplayName}</em>";
                     }
-                                        <button type="button" class="btn btn-info btn-sm shadow-sm" data-placement="bottom" data-trigger="focus" data-toggle="popover" data-html="true" data-title="Page Info" data-content="@popOverContent">
-                                            <i class="far fa-comment-alt mr-2"></i><span class="badge badge-light">@Model.ActiveConversations / @Model.TotalActiveConversations</span>
-                                        </button>
+                    <div class="btn-group btn-group-sm shadow-sm" aria-label="Page Information">
+                        <button type="button" class="btn btn-info" id="jump-to-first-comment">
+                            <i class="far fa-comment-alt"></i>
+                        </button>
+                        <button type="button" class="btn btn-info" data-placement="bottom" data-trigger="focus" data-toggle="popover" data-html="true" data-title="Page Info" data-content="@popOverContent">
+                            <span class="badge badge-light">@Model.ActiveConversations / @Model.TotalActiveConversations</span>
+                        </button>
+                    </div>
                 }
             </div>
             <div class="my-1">

src/dotnet/APIView/APIViewWeb/Pages/Assemblies/_CodeLine.cshtml

@@ -71,15 +71,22 @@
     <td class="line-details">
         <table>
             <tr>
-                @if(userPreference.HideLineNumbers == true || Model.CodeLine.IsDocumentation)
+                @if(userPreference.HideLineNumbers == true)
                 {
                     var lineNumberClass = RemoveMultipleSpaces($"line-number d-none {lineClass}");
                     <td class="@lineNumberClass"><span>@Model.LineNumber</span></td>
                 }
                 else
                 {
                     var lineNumberClass = RemoveMultipleSpaces($"line-number {lineClass}");
-                    <td class="@lineNumberClass"><span>@Model.LineNumber</span></td>
+                    if (Model.CodeLine.IsDocumentation)
+                    {
+                        <td class="@lineNumberClass invisible"><span></span></td>
+                    }
+                    else
+                    {
+                        <td class="@lineNumberClass"><span>@Model.LineNumber</span></td>
+                    }
                 }
                 <td class="@lineDetailsClass comment-icon-cell">
                     @if (!isRemoved && Model.CodeLine.ElementId != null)
@@ -88,14 +95,25 @@
                     }
                     else
                     {
-                       <a class="line-comment-button" style="visibility: hidden;">+</a> // Added for visual consistency
+                        <a class="line-comment-button invisible">+</a>// Added for visual consistency
                     }
                 </td>
                 <td class="@lineDetailsClass">
                     @if(Model.DocumentedByLines?.Length  > 0)
                     {
-                        <span class="line-toggle-documentation-button icon-chevron-right" data-documented-by="[@String.Join(",",Model.DocumentedByLines)]">
-                            &nbsp;
+                        <span class="line-toggle-documentation-button" data-documented-by="[@String.Join(",",Model.DocumentedByLines)]">
+                            <svg height='23' width='23' class="invisible">
+                                <line x1='52%' y1='0' x2='52%' y2='30%' style='stroke:rgb(255,140,0);stroke-width:1.2' />
+                            </svg>
+                            <i class="fa-regular fa-square-plus"></i>
+                        </span>
+                    }
+                    @if (Model.CodeLine.IsDocumentation)
+                    {
+                        <span>
+                            <svg height='23' width='23'>
+                                <line x1='52%' y1='0' x2='52%' y2='100%' style='stroke:rgb(255,140,0);stroke-width:1.2' />
+                            </svg>
                         </span>
                     }
                 </td>

src/dotnet/APIView/APIViewWeb/Pages/Shared/_CommentThreadInnerPartial.cshtml

@@ -42,7 +42,7 @@
                         }
                         <li><h4 class="dropdown-header">Create GitHub Issue</h4></li>
                         <div class="px-4">
-                            <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-net" data-repo-language="c#">.Net</a>
+                            <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-net" data-repo-language="c#">.NET</a>
                             <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-java" data-repo-language="java">Java</a>
                             <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-python" data-repo-language="python">Python</a>
                             <a href="#" class="badge badge-light js-github" data-repo="azure-sdk-for-c" data-repo-language="c">C</a>