Add origin views to the Security panel.

BUG=502118, 503170

Review URL: https://codereview.chromium.org/1301833003

git-svn-id: svn://svn.chromium.org/blink/trunk@201187 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/devtools.gypi

@@ -534,7 +534,9 @@
         ],
         'devtools_security_js_files': [
             'front_end/security/lockIcon.css',
+            'front_end/security/originView.css',
             'front_end/security/securityPanel.css',
+            'front_end/security/sidebar.css',
             'front_end/security/SecurityModel.js',
             'front_end/security/SecurityPanel.js',
         ],
@@ -767,6 +769,9 @@
             'front_end/Images/responsiveDesign_2x.png',
             'front_end/Images/searchNext.png',
             'front_end/Images/searchPrev.png',
+            'front_end/Images/securityPropertyInsecure.svg',
+            'front_end/Images/securityPropertySecure.svg',
+            'front_end/Images/securityPropertyWarning.svg',
             'front_end/Images/securityStateInsecure_2x.png',
             'front_end/Images/securityStateInsecure.png',
             'front_end/Images/securityStateNeutral_2x.png',

third_party/WebKit/Source/devtools/front_end/Images/securityPropertyInsecure.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48px"
+   height="48px"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg2"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="securityPropertyInsecure.svg">
+  <metadata
+     id="metadata13">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10000"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1173"
+     inkscape:window-height="1491"
+     id="namedview11"
+     showgrid="true"
+     inkscape:snap-global="true"
+     inkscape:zoom="6.9532167"
+     inkscape:cx="24"
+     inkscape:cy="21.966102"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4143" />
+  </sodipodi:namedview>
+  <defs
+     id="defs4" />
+  <path
+     style="fill:#d8463c;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
+     d="m 10,33 9,-9 -9,-9 5,-5 9,9 9,-9 5,5 -9,9 9,9 -5,5 -9,-9 -9,9 z"
+     id="path4145"
+     inkscape:connector-curvature="0" />
+  <g
+     id="Page-1"
+     stroke="none"
+     stroke-width="1"
+     fill="none"
+     fill-rule="evenodd" />
+</svg>

third_party/WebKit/Source/devtools/front_end/Images/securityPropertySecure.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="#000000"
+   height="24"
+   viewBox="0 0 24 24"
+   width="24"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="securityPropertySecure.svg">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1643"
+     inkscape:window-height="853"
+     id="namedview8"
+     showgrid="true"
+     inkscape:zoom="17.13151"
+     inkscape:cx="-1.5254237"
+     inkscape:cy="12"
+     inkscape:window-x="1245"
+     inkscape:window-y="786"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4140" />
+  </sodipodi:namedview>
+  <circle
+     style="fill:#1ac222;fill-opacity:1"
+     id="path4142"
+     cx="12"
+     cy="12"
+     r="7" />
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path4" />
+</svg>

third_party/WebKit/Source/devtools/front_end/Images/securityPropertyWarning.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48px"
+   height="48px"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg2"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="securityPropertyWarning.svg">
+  <metadata
+     id="metadata14">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1487"
+     inkscape:window-height="840"
+     id="namedview12"
+     showgrid="true"
+     inkscape:zoom="7.4692757"
+     inkscape:cx="21.565556"
+     inkscape:cy="24"
+     inkscape:window-x="1232"
+     inkscape:window-y="751"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4142" />
+  </sodipodi:namedview>
+  <defs
+     id="defs4" />
+  <g
+     id="Page-1"
+     stroke="none"
+     stroke-width="1"
+     fill="none"
+     fill-rule="evenodd">
+    <g
+       id="Material"
+       transform="translate(-64.000000, 0.000000)">
+      <g
+         id="ic_change_history_black_48px"
+         transform="translate(64.000000, 0.000000)">
+        <path
+           d="m 24,11.818633 -15.2267073,24.362734 30.4534143,0 L 24,11.818633 Z"
+           id="Shape"
+           inkscape:connector-curvature="0"
+           style="fill:#ffb003"
+           sodipodi:nodetypes="ccccc" />
+        <path
+           d="M0,0 L48,0 L48,48 L0,48 L0,0 L0,0 Z"
+           id="path10" />
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -3,7 +3,8 @@
  * found in the LICENSE file.
  */
 
-.lock-icon {
+.lock-icon,
+.security-property {
     background-size: cover;
     height: 16px;
     width: 16px;
@@ -52,7 +53,18 @@
     }
 }
 
-.sidebar-tree-item .lock-icon {
-    float: left;
-    margin-right: 2px;
-}
+.security-property-insecure {
+    background-image: url(Images/securityPropertyInsecure.svg);
+}
+
\ No newline at end of file
+.security-property-neutral {
+    background-image: url(Images/securityPropertyWarning.svg);
+}
+
+.security-property-warning {
+    background-image: url(Images/securityPropertyWarning.svg);
+}
+
+.security-property-secure {
+    background-image: url(Images/securityPropertySecure.svg);
+}

third_party/WebKit/Source/devtools/front_end/security/module.json

@@ -16,6 +16,8 @@
     ],
     "resources": [
         "lockIcon.css",
-        "securityPanel.css"
+        "originView.css",
+        "securityPanel.css",
+        "sidebar.css"
     ]
 }

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.
+ */
+
+.security-origin-view {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    display: block;
+    -webkit-user-select: text;
+}
+
+.security-origin-view .origin-view-section {
+    padding: 0.5em 1.5em 1.5em;
+    border-bottom: 1px solid rgb(230, 230, 230);
+}
+
+.security-origin-view .title-section {
+    padding-bottom: 1.5em;
+}
+
+.security-origin-view .origin-display .security-property {
+    margin: -1px 2px 0px 0px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.security-origin-view .origin-view-title {
+    font-size: 1.25em;
+    margin-top: 0.5em;
+    margin-bottom: 0.25em;
+}
+
+.security-origin-view .origin-view-section-title {
+    font-weight: bold;
+    font-size: 1em;
+    margin-top: 0.5em;
+    margin-bottom: 0.25em;
+}
+
+.security-origin-view .details-table-row {
+    display: flex;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-top: 6px;
+}
+
+.security-origin-view .details-table-row > div {
+    align-items: flex-start;
+}
+
+.security-origin-view .details-table-row > div:first-child {
+    color: rgb(140, 140, 140);
+    width: 7em;
+    margin-right: 1em;
+    flex: none;
+    display: flex;
+    justify-content: flex-end;
+}
+.security-origin-view .details-table-row > div:nth-child(2) {
+    flex: auto;
+    white-space: normal;
+}
+
+.security-origin-view .details-table .san-entry {
+    display: block;
+}

third_party/WebKit/Source/devtools/front_end/security/sidebar.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.
+ */
+
+.tree-outline {
+  padding: 0;
+}
+
+.tree-outline .security-main-view-sidebar-tree-item {
+  border-bottom: 1px solid rgb(230, 230, 230);
+  padding-top: 0;
+}
+
+.tree-outline .security-main-view-sidebar-tree-item .icon,
+.tree-outline .security-main-view-sidebar-tree-item .titles {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+}
+
+.tree-outline .security-sidebar-origins {
+    padding: 1px 8px 6px 8px;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+    color: rgb(90, 90, 90);
+}
+.tree-outline ol {
+  padding-left: 0;
+}
+
+.tree-outline li::before {
+  content: none;
+}
+
+.tree-outline .security-main-view-sidebar-tree-item,
+.tree-outline .security-sidebar-origins,
+.tree-outline .sidebar-tree-section + .children > .sidebar-tree-item {
+  padding-left: 16px;
+}
+
+.tree-outline .sidebar-tree-item .lock-icon,
+.tree-outline .sidebar-tree-item .security-property {
+    float: left;
+    margin-right: 2px;
+}