Style updates and icons.

Author: Tony Nedyalkov

src/network/network_style.css

@@ -115,7 +115,7 @@
 
 .network-log-url-list li:last-child,
 .network-graph-row:last-child
-{ 
+{
   border-bottom-width: 1px;
 }
 
@@ -249,7 +249,6 @@
 .network-details-view
 {
   height: 100%;
-  padding: 0 5px;
   box-sizing: border-box;
   overflow: auto;
 }
@@ -281,7 +280,7 @@
 
 .network-details-view .header-token-type-name
 {
-  color: #149CBD;
+  color: #5555aa;
 }
 
 .network-details-view .http-token-type-boundary
@@ -297,6 +296,16 @@
   color: #808080;
 }
 
+.network-detail-overlay\.wrap-detail-view::before
+{
+  background-image: url("../ui-images/icons/icon_wrap_text.png");
+}
+
+.network-detail-overlay\.view-raw::before
+{
+  background-image: url("../ui-images/icons/icon_hidedefaults.png");
+}
+
 .network-details-view pre,
 .network-details-view p
 {
@@ -324,6 +333,7 @@
 .network-details-view p
 {
   font: 11px "menu";
+  margin: 6px;
 }
 
 .network-details-view table
@@ -345,6 +355,8 @@
 .network-details-view th
 {
   vertical-align: top;
+  padding: 4px 10px;
+  border-right: 1px solid #fff;
 }
 
 .network-details-view th
@@ -353,22 +365,38 @@
   white-space: nowrap;
 }
 
+.network-details-view th .not-content
+{
+  padding: 0px;
+  font-style: normal;
+  border-collapse: collapse;
+  color: #808080;
+  cursor: default;
+  display: block;
+  font-weight: normal;
+}
+
 .network-details-view th:first-child,
 .network-details-view td:first-child
 {
   width: 20%;
-  padding-right: 30px;
+  padding-left: 0px;
+}
+
+.network-details-view tr:nth-child(even)
+{
+  background-color: rgba(0, 0, 0, 0.03);
 }
 
 .network-details-view hr
 {
   border: none;
-  border-top: 1px solid #a4a4a4;
+  border-top: 1px solid #ccc;
   margin: 7px 0 -8px 0;
 }
 
-.network-details-view div.header {
-  margin: 0 0 0 -5px; /* todo: 10px 0 10px -5px; looks better to me but is inconsistent with dom panel headers */
+.response-summary + div .header {
+  border-top-width: 1px;
 }
 
 .request-crafter h2,
@@ -501,7 +529,7 @@
   border-radius: 3px;
 }
 
-/* the value of the padding property of this selector 
+/* the value of the padding property of this selector
    is read out in network_templates.js */
 .network-tooltip-legend .time_data
 {

src/ui-images/icons/icon_close.png

@@ -39,7 +39,7 @@
   padding: 4px 5px 1px 5px;
 }
 
-.sortable-table > tr > td.align-justify 
+.sortable-table > tr > td.align-justify
 {
   text-align: justify;
 }
@@ -53,12 +53,12 @@
 .network-log-url-list li,
 .network-timeline-row,
 .network-graph-row
-{ 
+{
   border: 0 solid #f0f0f0;
 }
 
 .sortable-table > tr:last-child
-{ 
+{
   border-bottom-width: 1px;
 }
 

src/ui-images/icons/icon_wrap_text.png

@@ -404,18 +404,12 @@ styles
   padding: 0 5px;
 }
 
-header,
-div.header
-{
-  padding: 2px;
-  background-color: #fff;
-  border-bottom: 1px solid #fff;
-  border-bottom-color: #ccc;
-}
-
 container > div > header,
-div.header
+.header
 {
+  padding: 2px;
+  border: 0 solid #ccc;
+  border-bottom-width: 1px;
   line-height: 20px;
   background-color: #e9e9e9;
   background-image: -o-linear-gradient(-90deg,
@@ -425,9 +419,10 @@ div.header
                                     rgba(255, 255, 255, 0.45) 100%);
 }
 
-div.unfolded
+.unfolded + div header,
+.unfolded + div .header
 {
-  border-bottom: 1px solid #ccc;
+  border-top-width: 1px;
 }
 
 category header:hover input
@@ -446,13 +441,13 @@ header input,
   transition: 0.2s;
 }
 
-.unfolded > header
+.unfolded .foldable
 {
-  border-bottom-color: #d7d7d7;
+  padding: 5px;
 }
 
 .unfolded > header input,
-input.unfolded
+.unfolded > .header input
 {
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
@@ -771,7 +766,7 @@ breadcrumb span
 
 .js-dd-filter-container
 {
-  margin: 0 3px;  
+  margin: 0 3px;
 }
 
 .js-dd-filter
@@ -798,7 +793,7 @@ breadcrumb span
 
 .js-dd-visible
 {
-  opacity: 1; 
+  opacity: 1;
   -o-transition: opacity 0.5s;
   transition: opacity 0.5s;
 }
@@ -834,7 +829,7 @@ breadcrumb span
 }
 
 .cmd-line-runtimes cst-option
-{  
+{
   margin-bottom: 0;
 }
 
@@ -878,7 +873,7 @@ breadcrumb span
 }
 
 .cmd-line-runtimes cst-option:hover
-{  
+{
   background-color: #bbcef1;
   color: #000;
 }

src/ui-scripts/sortable_table/sortable_table.css

@@ -897,6 +897,7 @@ view-slider
 {
   display: block;
   position: absolute;
+  z-index: 2;
 }
 
 view-slider.vertical
@@ -1845,5 +1846,13 @@ info {
 {
   position: absolute;
   border: 1px solid #999;
-  box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.5);
+  box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.4),
+              0 2px 2px hsla(0, 0%, 0%, 0.3),
+              0 1px 1px hsla(0, 0%, 0%, 0.1);
+}
+
+#toolbar-to-cell-id-28,
+.network-details-view
+{
+  border-left-width: 0;
 }