DevTools Security panel: Update the origin view to match the latest Material specs.

third_party/WebKit/Source/devtools/front_end/security/originView.css

 /* Copyright (c) 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
-.title-section {
-    padding: 12px 0;
-    border-bottom: 1px solid rgb(230, 230, 230);
-}
-
 .security-origin-view {
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
     display: block;
     -webkit-user-select: text;
 }
 
-.security-origin-view .origin-view-section {
-    border-bottom: 1px solid rgb(230, 230, 230);
-    padding: 12px 6px 12px 18px;
+.title-section {
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
 }
 
-.security-origin-view .origin-display {
-    font-size: 15px;
-    padding-left: 38px;
-    display: flex;
-    align-items: center;
+.origin-display {
+    font-size: 14px;
 }
 
-.title-section > .link {
-    padding: 6px 0 0 39px
+.origin-display .security-property {
+    display: inline-block;
+    vertical-align: middle;
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
 }
 
-.security-origin-view .origin-display .security-property {
-    display: inline-block;
-    vertical-align: middle;
-    position: absolute;
-    left: 18px;
+.title-section > .network-button {
+    margin: 8px 0px 4px;
 }
 
-.security-origin-view .origin-view-section-title {
-    margin-bottom: 10px;
-    padding-left: 18px;
+.origin-view-section {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+    padding: 12px 16px;
 }
 
-.security-origin-view .details-table-row {
-    display: flex;
-    white-space: nowrap;
-    overflow: hidden;
-    line-height: 22px;
+.origin-view-section-title {
+    margin-bottom: 4px;
 }
 
-.security-origin-view .details-table-row > div {
-    align-items: flex-start;
+.details-table-row {
+    display: flex;
+    padding: 2px 0px;
 }
 
-.security-origin-view .details-table-row > div:first-child {
-    color: rgb(140, 140, 140);
-    width: 128px;
-    margin-right: 1em;
+.details-table-row > div:first-child {
+    color: rgba(0, 0, 0, 0.55);
+    width: 80px;
+    margin-right: 16px;
     flex: none;
     display: flex;
     justify-content: flex-end;
 }
-.security-origin-view .details-table-row > div:nth-child(2) {
-    flex: auto;
-    white-space: normal;
+
+.sct-details .details-table-row > div:first-child {
+    width: 128px;
 }
 
-.security-origin-view .sct-details .details-table .details-table-row:last-child div:last-child {
-    border-bottom: 1px solid rgb(230, 230, 230);
+.sct-details .details-table .details-table-row:last-child div:last-child {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
     padding-bottom: 10px;
 }
 
-.security-origin-view .sct-details .details-table:last-child .details-table-row:last-child div:last-child {
+.sct-details .details-table:last-child .details-table-row:last-child div:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }
 
-.security-origin-view .sct-toggle {
-    padding-left: 143px;
-    padding-top: 5px;
+.sct-toggle {
+    padding-left: 98px;
 }
 
-.security-origin-view .details-table .empty-san {
-    color: rgb(140, 140, 140);
+.details-table .empty-san {
+    color: rgba(0, 0, 0, 0.55);
 }
 
-.security-origin-view .details-table .san-entry {
+.details-table .san-entry {
     display: block;
+    height: 16px;
 }
 
-.security-origin-view .truncated-san .truncated-entry {
+.truncated-san .truncated-entry {
     display: none;
 }
 
 .security-certificate-button {
     margin-top: 4px;
 }
+
+.first-inspected-response {
+    color: rgba(0, 0, 0, 0.55);
+    border-bottom: none;
+}