Bug 1543581 - Align threads list with UI specs r=fvsch
authornagpalm7 <nagpalm7@gmail.com>
Thu, 11 Apr 2019 13:23:55 +0000
changeset 469010 a2299c65e793deb9a70a09d71adf48c6f7ffaef7
parent 469009 da3353f475f63ae929522fef23623c19871e48c1
child 469011 0bdbbafc5e2af4cc164643fa2317f3f1e36de860
push id35856
push usercsabou@mozilla.com
push dateFri, 12 Apr 2019 03:19:48 +0000
treeherdermozilla-central@940684cd1065 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfvsch
bugs1543581, 8149
milestone68.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 1543581 - Align threads list with UI specs r=fvsch Fixes [[ https://github.com/firefox-devtools/debugger/issues/8149 | Bug 8149 ]] Threads list after the changes look like. {F1255266} Differential Revision: https://phabricator.services.mozilla.com/D26419
devtools/client/debugger/src/components/SecondaryPanes/Workers.css
--- a/devtools/client/debugger/src/components/SecondaryPanes/Workers.css
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Workers.css
@@ -1,59 +1,64 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
+.workers-list {
+  padding: 4px 0;
+}
+
 .workers-list * {
+  -moz-user-select: none;
   user-select: none;
 }
 
 .workers-list > .worker {
-  font-size: 1rem;
+  font-size: inherit;
   color: var(--theme-content-color1);
-  padding: 0 0.5em;
-  line-height: 25px;
+  padding: 2px 6px;
+  padding-inline-start: 20px;
+  line-height: 16px;
   position: relative;
   cursor: pointer;
   display: flex;
+  align-items: center;
 }
 
-.workers-list .worker:hover {
+.workers-list > .worker:hover {
   background-color: var(--search-overlays-semitransparent);
 }
 
-.workers-list .worker.selected {
+.workers-list > .worker.selected {
   background-color: var(--tab-line-selected-color);
 }
 
 .workers-list .icon {
-  align-self: center;
+  flex: none;
   margin-inline-end: 4px;
-  margin-inline-start: 2px;
 }
 
-.workers-list .icon .img.worker {
-  margin-top: -1px;
-}
-
-.workers-list .icon .img.file {
-  margin-top: -2px;
+.workers-list .img {
+  display: block;
 }
 
 .workers-list .label {
   display: inline-block;
   flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .workers-list .pause-badge {
-  align-self: center;
+  flex: none;
+  margin-inline-start: 4px;
 }
 
-.workers-list .worker.selected {
+.workers-list > .worker.selected {
   background: var(--theme-selection-background);
-  color: white;
+  color: var(--theme-selection-color);
 }
 
-.workers-list .selected .img.file,
-.workers-list .selected .img.worker,
-.workers-list .selected .pause-badge .img.pause {
-  background: white;
+.workers-list > .worker.selected .img {
+  background-color: currentColor;
 }