Bug 1537988 - Improve spacing and icons for workers r=jlast
authorDavid Walsh <dwalsh@mozilla.com>
Fri, 29 Mar 2019 14:05:40 +0000
changeset 466846 c6b7f090b90ac0616e46e82e14af60a9cf3b186d
parent 466845 b9eba27b9cf664c30de177ef19da91361130c17e
child 466847 92cfc564dbffe32ed1a6501bdddd8e8ea9bdf604
push id112603
push usernerli@mozilla.com
push dateSat, 30 Mar 2019 09:35:57 +0000
treeherdermozilla-inbound@7c3183c56eb6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjlast
bugs1537988
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 1537988 - Improve spacing and icons for workers r=jlast Improves spacing and alignment for workers in the right pane and sources tree. Also changes the Main thread icon to be document in the worker pane. Differential Revision: https://phabricator.services.mozilla.com/D25121
devtools/client/debugger/new/src/components/PrimaryPanes/Sources.css
devtools/client/debugger/new/src/components/SecondaryPanes/Worker.js
devtools/client/debugger/new/src/components/SecondaryPanes/Workers.css
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/Sources.css
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/Sources.css
@@ -228,11 +228,22 @@
 .sources-list .tree-node[data-expandable="false"] .tree-indent:last-of-type {
   margin-inline-end: 0;
 }
 
 .thread-header {
   margin-top: 10px;
 }
 
+.thread-header .img.worker,
+.thread-header .img.file {
+  margin-top: -1px;
+  margin-inline-end: 4px;
+  margin-inline-start: 2px;
+}
+
+.thread-header .img.file {
+  margin-top: -2px;
+}
+
 .thread-header .label {
   line-height: 15px;
 }
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Worker.js
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Worker.js
@@ -26,30 +26,29 @@ export class Worker extends Component<Pr
   onSelectThread = () => {
     const { thread } = this.props;
     this.props.selectThread(thread.actor);
   };
 
   render() {
     const { currentThread, isPaused, thread } = this.props;
 
-    const label = isWorker(thread)
-      ? getDisplayName(thread)
-      : L10N.getStr("mainThread");
+    const worker = isWorker(thread);
+    const label = worker ? getDisplayName(thread) : L10N.getStr("mainThread");
 
     return (
       <div
         className={classnames("worker", {
           selected: thread.actor == currentThread
         })}
         key={thread.actor}
         onClick={this.onSelectThread}
       >
         <div className="icon">
-          <AccessibleImage className={isWorker ? "worker" : "file"} />
+          <AccessibleImage className={worker ? "worker" : "file"} />
         </div>
         <div className="label">{label}</div>
         {isPaused ? (
           <div className="pause-badge">
             <AccessibleImage className="pause" />
           </div>
         ) : null}
       </div>
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Workers.css
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Workers.css
@@ -21,16 +21,26 @@
 }
 
 .workers-list .worker.selected {
   background-color: var(--tab-line-selected-color);
 }
 
 .workers-list .icon {
   align-self: center;
+  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 .label {
   display: inline-block;
   flex-grow: 1;
 }
 
 .workers-list .pause-badge {