[devtools] Make links look like links

This patch adds a createTextLink method to create
text links and uses it in the security > origin view to
link to the network pane. It also adds "show more" and
"show less" classes for to the text link.

Bug: chromium:977423
Change-Id: If5ff95e5d26af3a20680e93e23e110b912a41de4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1789531
Commit-Queue: Jan Scheffler <janscheffler@google.com>
Reviewed-by: Yang Guo <yangguo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699635}

third_party/blink/renderer/devtools/front_end/security/SecurityPanel.js

@@ -799,16 +799,17 @@ Security.SecurityOriginView = class extends UI.VBox {
     originDisplay.appendChild(Security.SecurityPanel.createHighlightedUrl(origin, originState.securityState));
 
     const originNetworkDiv = titleSection.createChild('div', 'view-network-button');
-    const originNetworkButton = UI.createTextButton('View requests in Network Panel', e => {
+    const originNetworkLink = originNetworkDiv.createChild('span', 'devtools-link origin-button');
+    originNetworkLink.textContent = ls`View requests in Network Panel`;
+    originNetworkLink.addEventListener('click', e => {
       e.consume();
       const parsedURL = new Common.ParsedURL(origin);
       Network.NetworkPanel.revealAndFilter([
         {filterType: Network.NetworkLogView.FilterType.Domain, filterValue: parsedURL.host},
         {filterType: Network.NetworkLogView.FilterType.Scheme, filterValue: parsedURL.scheme}
       ]);
-    }, 'origin-button');
-    UI.ARIAUtils.markAsLink(originNetworkButton);
-    originNetworkDiv.appendChild(originNetworkButton);
+    });
+    UI.ARIAUtils.markAsLink(originNetworkLink);
 
     if (originState.securityDetails) {
       const connectionSection = this.element.createChild('div', 'origin-view-section');
@@ -976,13 +977,19 @@ Security.SecurityOriginView = class extends UI.VBox {
         function toggleSANTruncation() {
           if (sanDiv.classList.contains('truncated-san')) {
             sanDiv.classList.remove('truncated-san');
+            truncatedSANToggle.classList.remove('show-more');
+            truncatedSANToggle.classList.add('show-less');
             truncatedSANToggle.textContent = ls`Show less`;
           } else {
             sanDiv.classList.add('truncated-san');
+            truncatedSANToggle.classList.add('show-more');
+            truncatedSANToggle.classList.remove('show-less');
             truncatedSANToggle.textContent = ls`Show more (${sanList.length} total)`;
           }
         }
-        const truncatedSANToggle = UI.createTextButton(ls`Show more (${sanList.length} total)`, toggleSANTruncation);
+
+        const truncatedSANToggle = sanDiv.createChild('span', 'devtools-link');
+        truncatedSANToggle.addEventListener('click', toggleSANTruncation);
         sanDiv.appendChild(truncatedSANToggle);
         toggleSANTruncation();
       }

third_party/blink/renderer/devtools/front_end/security/mainView.css

@@ -141,6 +141,7 @@
 
 .security-certificate-button {
     margin-top: 8px;
+    margin-left: 0;
 }
 
 .security-explanation .security-property {

third_party/blink/renderer/devtools/front_end/security/originView.css

@@ -39,7 +39,7 @@
 
 .security-origin-view .origin-display {
     font-size: 12px;
-    padding-left: 38px;
+    padding-left: 32px;
     display: flex;
     align-items: center;
 }
@@ -52,7 +52,7 @@
     display: inline-block;
     vertical-align: middle;
     position: absolute;
-    left: 16px;
+    left: 13px;
 }
 
 .security-origin-view .origin-view-section-title {
@@ -118,8 +118,29 @@
 
 .origin-button {
     margin-top: 4px;
+    margin-left: 0;
 }
 
 .origin-view-section:last-child  {
     border-bottom:none;
 }
+
+.devtools-link {
+    display: inline-flex;
+}
+
+.devtools-link.show-less:after,
+.devtools-link.show-more:after {
+    content: '';
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+    border-top-color:rgb(17, 85, 204);
+    align-self: center;
+    transform: translateY(25%);
+    margin-left: 8px;
+}
+
+.devtools-link.show-less:after {
+    transform: rotate(180deg) translateY(25%);
+}
\ No newline at end of file

third_party/blink/renderer/devtools/front_end/security/security_strings.grdp

@@ -129,6 +129,9 @@
   <message name="IDS_DEVTOOLS_d42c8bbf1d0f4a65f4dec450f2bc4439" desc="Text in Security Panel of the Security panel">
     Key exchange
   </message>
+  <message name="IDS_DEVTOOLS_daa52ee980b16f68bc0d3a9b5cc8deb7" desc="Text in Security Panel of the Security panel">
+    View requests in Network Panel
+  </message>
   <message name="IDS_DEVTOOLS_decb9f523d4cf5dc037b61cb555e6bf3" desc="Not secure div text content in Security Panel of the Security panel">
     Not secure
   </message>

third_party/blink/web_tests/http/tests/devtools/security/origin-view-ct-compliance-expected.txt

@@ -26,9 +26,9 @@ foo.test
             </SPAN>
         </DIV>
         <DIV class=view-network-button >
-            <BUTTON class=origin-button text-button type=button role=link >
+            <SPAN class=devtools-link origin-button role=link >
 View requests in Network Panel
-            </BUTTON>
+            </SPAN>
         </DIV>
     </DIV>
     <DIV class=origin-view-section >

third_party/blink/web_tests/http/tests/devtools/security/origin-view-noncryptographic-secure-origin-expected.txt

@@ -26,9 +26,9 @@ test
             </SPAN>
         </DIV>
         <DIV class=view-network-button >
-            <BUTTON class=origin-button text-button type=button role=link >
+            <SPAN class=devtools-link origin-button role=link >
 View requests in Network Panel
-            </BUTTON>
+            </SPAN>
         </DIV>
     </DIV>
     <DIV class=origin-view-section >

third_party/blink/web_tests/http/tests/devtools/security/origin-view-then-interstitial-expected.txt

@@ -54,9 +54,9 @@ foo.test
             </SPAN>
         </DIV>
         <DIV class=view-network-button >
-            <BUTTON class=origin-button text-button type=button role=link >
+            <SPAN class=devtools-link origin-button role=link >
 View requests in Network Panel
-            </BUTTON>
+            </SPAN>
         </DIV>
     </DIV>
     <DIV class=origin-view-section >

third_party/blink/web_tests/http/tests/devtools/security/security-details-updated-with-security-state-expected.txt

@@ -70,9 +70,9 @@ foo.test
             </SPAN>
         </DIV>
         <DIV class=view-network-button >
-            <BUTTON class=origin-button text-button type=button role=link >
+            <SPAN class=devtools-link origin-button role=link >
 View requests in Network Panel
-            </BUTTON>
+            </SPAN>
         </DIV>
     </DIV>
     <DIV class=origin-view-section >