Bug 1534548 - Align header labels left, show sorting icon; r=Honza
authorlenka <lpelechova@mozilla.com>
Wed, 13 Mar 2019 10:39:30 +0000
changeset 521690 2de5ee2843c8
parent 521689 d32fb9706939
child 521691 5b06a29334b8
push id10867
push userdvarga@mozilla.com
push dateThu, 14 Mar 2019 15:20:45 +0000
treeherdermozilla-beta@abad13547875 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1534548
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1534548 - Align header labels left, show sorting icon; r=Honza Differential Revision: https://phabricator.services.mozilla.com/D23119
devtools/client/netmonitor/src/assets/styles/RequestList.css
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -107,49 +107,59 @@
   border-image: linear-gradient(transparent 15%,
                                 var(--theme-splitter-color) 15%,
                                 var(--theme-splitter-color) 85%,
                                 transparent 85%) 1 1;
   border-width: 0;
   border-inline-start-width: 1px;
   width: 100%;
   min-height: 23px;
-  text-align: center;
+  text-align: left;
   color: inherit;
   padding: 1px 4px;
 }
 
 .requests-list-header-button::-moz-focus-inner {
   border: 0;
   padding: 0;
 }
 
 .requests-list-header-button:hover {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
 .requests-list-header-button > .button-text {
   display: inline-block;
-  text-align: center;
+  text-align: left;
   vertical-align: middle;
-  /* Align button text to center */
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .requests-list-header-button > .button-icon {
-  display: inline-block;
+  /* display icon only when column sorted otherwise display:none */
+  display: none;
   width: 7px;
   height: 4px;
   margin-inline-start: 3px;
   margin-inline-end: 6px;
   vertical-align: middle;
 }
 
+.requests-list-header-button[data-sorted] > .button-icon {
+  /* display icon only when column sorted */
+  display: inline-block;
+}
+
+.requests-list-header-button[data-sorted] > .button-text {
+  /* when sorted - adjust width to fit the icon inside the button */
+  width: calc(100% - 11px);
+}
+
 .requests-list-header-button[data-sorted=ascending] > .button-icon {
   background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
 }
 
 .requests-list-header-button[data-sorted=descending] > .button-icon {
   background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
 }
 
@@ -258,17 +268,16 @@
 .requests-list-domain.requests-list-column {
   text-align: start;
 }
 
 .requests-security-state-icon {
   display: inline-block;
   width: 16px;
   height: 16px;
-  margin: 0 4px;
   vertical-align: text-bottom;
   background-position: center;
   background-repeat: no-repeat;
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 .request-list-item.selected .requests-security-state-icon {
@@ -304,18 +313,26 @@
   background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg);
   background-repeat: no-repeat;
 }
 
 .selected .tracking-resource {
   filter: brightness(500%);
 }
 
-.request-list-item .requests-list-cause.requests-list-column {
-  padding-left: 5px;
+.request-list-item .requests-list-column {
+  padding-inline-start: 4px;
+}
+
+.request-list-item .requests-list-waterfall {
+  padding-inline-start: 0px;
+}
+
+.request-list-item .status-code {
+  margin-inline-start: 0px;
 }
 
 .requests-list-cause-stack {
   display: inline-block;
   background-color: var(--theme-body-color-alt);
   color: var(--theme-body-background);
   font-size: 8px;
   font-weight: bold;