Reorganize span detail components

Author: tiffon

.eslintrc

@@ -22,6 +22,7 @@
     "jsx-a11y/no-static-element-interactions": 1,
     "jsx-a11y/href-no-hash": 0,
     "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/interactive-supports-focus": 0,
 
     /* react */
     "react/jsx-filename-extension": 0,

src/components/App/App.css

@@ -24,6 +24,21 @@ THE SOFTWARE.
   height: 100%;
 }
 
+.u-no-float {
+  float: none;
+}
+
+.u-cursor-pointer {
+  cursor: pointer;
+}
+
+/* override semantic UI webkit scrollbar styling (keep the other scroll styling) */
+body ::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 7px;
+  height: 7px;
+}
+
 a {
   color: #11939A;
 }
@@ -70,7 +85,7 @@ a:hover {
 }
 
 .ui.compact.table td {
-  padding: 0.1em 0.5em;
+  padding: 0.2em 0.5em;
 }
 
 .ui.table td.light-grey {

src/components/TracePage/TraceTimelineViewer/SpanDetail.js

@@ -0,0 +1,67 @@
+/*
+Copyright (c) 2017 Uber Technologies, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+.AccordianKeyValues {
+  margin: 0.3em 0;
+  text-overflow: ellipsis;
+}
+
+.AccordianKeyValues.is-compact {
+  margin: 0;
+}
+
+.AccordianKeyValues--header {
+  cursor: pointer;
+  overflow: hidden;
+  margin: 0 1px;
+  padding: 0.25em 0.1em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.AccordianKeyValues--header:hover {
+  background: #eee;
+}
+
+.AccordianKeyValues--header.is-high-contrast:hover {
+  background: #ddd;
+}
+
+.AccordianKeyValues--summary {
+  display: inline;
+  list-style: none;
+  padding: 0;
+}
+
+.AccordianKeyValues--summaryItem {
+  display: inline;
+  margin-left: 0.7em;
+}
+
+.AccordianKeyValues--summaryLabel {
+  color: #777;
+}
+
+.AccordianKeyValues--summaryDelim {
+  color: #aaa;
+  padding: 0 0.1em;
+}