Add origin views to the Security panel.

Source/devtools/front_end/security/originView.css

Index: Source/devtools/front_end/security/originView.css
diff --git a/Source/devtools/front_end/security/originView.css b/Source/devtools/front_end/security/originView.css
new file mode 100644
index 0000000000000000000000000000000000000000..4326037188850d7887d033ed3b01c76acc6a453d
--- /dev/null
+++ b/Source/devtools/front_end/security/originView.css
@@ -0,0 +1,57 @@
+/* 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 h1 {

[dgozman, 2015/08/21 19:44:37]

We usually use div with specific class which reflects the purpose/content of the
element rather than it's visual (like h1 does).

[lgarron, 2015/08/21 21:50:07]

I've removed the use of `h1` and `h2` in the origin view.

+    font-weight: normal;
+    font-size: 1.25em;
+    margin-top: 0.5em;
+    margin-bottom: 0.25em;
+}
+
+.security-origin-view h2 {
+    font-size: 1em;
+    margin-top: 0.5em;
+}
+
+.security-origin-view table.details-table {

[dgozman, 2015/08/21 19:44:37]

Looking at the screenshot, you don't really need a table. Just add two divs to
each row, with left div having fixed width.

[lgarron, 2015/08/21 21:50:07]

A table seems very straightforward to me. How would I do line wraps using divs?

+    border-collapse: collapse;
+}
+
+.security-origin-view table.details-table td {
+    padding: 3px 0.5em;
+    vertical-align: top;

[dgozman, 2015/08/21 19:44:37]

Use the modern display:flex and align-items:center.

[lgarron, 2015/08/21 21:50:07]

(Will do if I change to divs.)

+}
+
+.security-origin-view table.details-table td:first-child {
+    color: rgb(140, 140, 140);
+    text-align: right;
+    width: 96px;
+}
+
+.security-origin-view table.details-table .san-entry {
+    display: block;
+}