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 2de5ee2843c805842e3cd8adf8691590a7ea5452
parent 521689 d32fb97069395a70ccef11d4b9a037bb4604c46c
child 521691 5b06a29334b8f96ab458bea01dcf70645936a9c5
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;