Permalink
Browse files

Merge pull request #71 from operasoftware/task_DFL_3295_Network_Detai…

…ls_overhaul_styling

Network Details Style tweaks.
  • Loading branch information...
2 parents 6fc9a99 + cbcc5ec commit 5855309929e36048fc4d411b388550f198e40124 Daniel Herzog committed Sep 18, 2012
@@ -130,17 +130,17 @@ templates._request = function(request, is_last, do_raw)
var settings = window.settings["network-detail-overlay"];
var expanded = settings.get("expand-requests");
var show_header = is_relevant;
- var show_headers = is_relevant && expanded;
- var show_body = show_headers;
+ var show_content = is_relevant && expanded;
return [
"div",
show_header ? templates._headline(false, expanded) : [],
- ["div",
- show_headers ? templates._request_headers(request, do_raw) : [],
- show_body ? templates._request_body(request, do_raw) : [],
- "class", "foldable"
- ],
+ show_content ?
+ ["div",
+ templates._request_headers(request, do_raw),
+ templates._request_body(request, do_raw),
+ "class", "foldable"
+ ] : [],
"class", (expanded ? "unfolded" : "")
];
};
@@ -152,16 +152,18 @@ templates._response = function(response, is_last, do_raw)
var show_header = response.logger_entry_touched_network;
var show_headers = expanded && response.logger_entry_touched_network;
var show_body = !show_header || (show_header && expanded);
+ var show_content = show_headers || show_body;
return [
"div",
show_header ? this._headline(true, expanded) : [],
- ["div",
- show_headers ? this._response_headers(response, do_raw) : [],
- show_body ? this._response_body(response, do_raw, is_last) : [],
- "class", "foldable"
- ],
- "class", (expanded ? "unfolded" : "")
+ show_content ?
+ ["div",
+ show_headers ? this._response_headers(response, do_raw) : [],
+ show_body ? this._response_body(response, do_raw, is_last) : [],
+ "class", "foldable"
+ ] : [],
+ "class", (show_header && expanded ? "unfolded" : "")
];
};
@@ -170,8 +172,7 @@ templates._headline = function(is_response, is_unfolded)
var headline = [
"div",
["input",
- "type", "button",
- "class", is_unfolded ? "unfolded" : ""
+ "type", "button"
],
is_response ? ui_strings.S_NETWORK_REQUEST_DETAIL_RESPONSE_TITLE
: ui_strings.S_NETWORK_REQUEST_DETAIL_REQUEST_TITLE,
@@ -1,4 +1,4 @@
-/* Network log / Overview */
+/* Network log / Overview */
.network_logger
{
@@ -115,13 +115,14 @@
.network-log-url-list li:last-child,
.network-graph-row:last-child
-{
+{
border-bottom-width: 1px;
}
-.network-data-container .sortable-table > tr.header:first-child
+.network-data-container .sortable-table > tr.table-header:first-child
{
border-width: 0;
+ background: none;
color: #808080;
}
@@ -239,7 +240,6 @@
.network-detail-overlay > .table
{
- padding: 0 5px;
box-sizing: border-box;
}
@@ -271,7 +271,7 @@
.network-detail-overlay .header-token-type-name
{
- color: #149CBD;
+ color: #cc0033;
}
.network-detail-overlay .http-token-type-boundary
@@ -287,8 +287,17 @@
color: #808080;
}
-.network-detail-overlay pre,
-.network-detail-overlay p
+.network-detail-overlay\.wrap-detail-view::before
+{
+ background-image: url("../ui-images/icons/icon_wrap_text.png");
+}
+
+.network-detail-overlay\.view-parsed::before
+{
+ background-image: url("../ui-images/icons/icon_view_raw.png");
+}
+
+.network-detail-overlay pre
{
margin: 0;
}
@@ -312,6 +321,12 @@
max-width: 100%;
}
+.network-detail-overlay p,
+.network-detail-overlay .foldable
+{
+ margin: 6px 8px;
+}
+
.network-detail-overlay table
{
border-collapse: collapse;
@@ -331,6 +346,8 @@
.network-detail-overlay th
{
vertical-align: top;
+ padding: 4px 10px;
+ border-right: 1px solid #fff;
}
.network-detail-overlay th
@@ -339,23 +356,37 @@
white-space: nowrap;
}
+.network-detail-overlay .not-content
+{
+ padding: 0;
+ font-style: normal;
+ color: #808080;
+ cursor: default;
+ font-weight: normal;
+}
+
.network-detail-overlay th:first-child,
.network-detail-overlay td:first-child
{
width: 20%;
- padding-right: 30px;
+ padding-left: 0;
+}
+
+.network-detail-overlay tr:nth-child(even)
+{
+ background-color: rgba(0, 0, 0, 0.03);
}
.network-detail-overlay hr
{
border: none;
- border-top: 1px solid #a4a4a4;
+ border-top: 1px solid #ccc;
margin: 7px 0 -8px 0;
}
-.network-detail-overlay div.header
+.network-detail-overlay .table > div:first-of-type .header
{
- margin: 0 0 0 -5px; /* todo: 10px 0 10px -5px; looks better to me but is inconsistent with dom panel headers */
+ border-top-width: 1px;
}
.request-crafter h2,
@@ -488,7 +519,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
{
@@ -909,7 +909,7 @@ cls.NetworkDetailOverlayView.create_ui_widgets = function()
},
// key-label map
{
- "view-parsed": ui_strings.S_NETWORK_RAW_VIEW_LABEL,
+ "view-parsed": ui_strings.S_NETWORK_PARSED_VIEW_LABEL,
"wrap-detail-view": ui_strings.S_NETWORK_WRAP_LINES_LABEL
}
);
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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;
}
@@ -106,8 +106,8 @@ th.sort-column
/* Table headers */
-.sortable-table > tr.header,
-.sortable-table > tr.header:hover
+.sortable-table > tr.table-header,
+.sortable-table > tr.table-header:hover
{
background-color: #e9e9e9;
background-image: -o-linear-gradient(-90deg,
@@ -119,9 +119,9 @@ th.sort-column
font-weight: normal;
}
-.sortable-table > tr.header,
-.sortable-table > tr.header:hover,
-.sortable-table > tr.header:active,
+.sortable-table > tr.table-header,
+.sortable-table > tr.table-header:hover,
+.sortable-table > tr.table-header:active,
.sortable-table > .sortable-table-group-header,
.sortable-table > .sortable-table-group-header:hover,
.sortable-table > .sortable-table-group-header:active
@@ -153,7 +153,7 @@ th.sort-column
border-color: #6c94d3;
}
-.sortable-table > tr.header > th:not(.sortable-table-group-header):active
+.sortable-table > tr.table-header > th:not(.sortable-table-group-header):active
{
background-color: rgba(0, 0, 0, 0.06);
}
@@ -463,7 +463,7 @@ templates.sortable_table_header = function(tabledef, cols, sortby, reversed)
"data-column-id", c,
].concat(tabledef.columns[c].sorter ? ["handler", "sortable-table-sort"] : [])
}),
- "class", "header"
+ "class", "table-header"
];
}
@@ -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,
@@ -430,6 +424,11 @@ div.unfolded
border-bottom: 1px solid #ccc;
}
+div.unfolded:last-child
+{
+ border-bottom-width: 0;
+}
+
category header:hover input
{
opacity: 1;
@@ -446,13 +445,8 @@ header input,
transition: 0.2s;
}
-.unfolded > header
-{
- border-bottom-color: #d7d7d7;
-}
-
.unfolded > header input,
-input.unfolded
+.unfolded > .header input
{
-o-transform: rotate(90deg);
transform: rotate(90deg);
@@ -771,7 +765,7 @@ breadcrumb span
.js-dd-filter-container
{
- margin: 0 3px;
+ margin: 0 3px;
}
.js-dd-filter
@@ -798,7 +792,7 @@ breadcrumb span
.js-dd-visible
{
- opacity: 1;
+ opacity: 1;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
@@ -834,7 +828,7 @@ breadcrumb span
}
.cmd-line-runtimes cst-option
-{
+{
margin-bottom: 0;
}
@@ -878,7 +872,7 @@ breadcrumb span
}
.cmd-line-runtimes cst-option:hover
-{
+{
background-color: #bbcef1;
color: #000;
}
View
@@ -1845,5 +1845,6 @@ 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.30),
+ 0 2px 2px hsla(0, 0%, 0%, 0.25)
}

0 comments on commit 5855309

Please sign in to comment.