Bug 1635403 - Part 4: Do not push about:debugging plug to the bottom r=jdescottes

Depends on D75573

Differential Revision: https://phabricator.services.mozilla.com/D75576

devtools/client/application/application.css

@@ -26,7 +26,6 @@
 @import "resource://devtools/client/application/src/components/service-workers/RegistrationList.css";
 @import "resource://devtools/client/application/src/components/service-workers/RegistrationListEmpty.css";
 @import "resource://devtools/client/application/src/components/service-workers/Worker.css";
-@import "resource://devtools/client/application/src/components/service-workers/WorkersPage.css";
 @import "resource://devtools/client/application/src/components/ui/UIButton.css";
 
 html,

devtools/client/application/src/components/routing/PageSwitcher.css

@@ -9,12 +9,12 @@
 
 .app-page {
   padding: calc(var(--base-unit) * 3) calc(var(--base-unit) * 8);
-  display: grid;
   user-select: none;
   overflow-y: auto;
 }
 
 .app-page--empty {
+  display: grid;
   align-items: center;
   justify-content: center;
   font-size: var(--body-10-font-size);

devtools/client/application/src/components/service-workers/RegistrationList.css

@@ -10,7 +10,7 @@
   display: flex;
   flex-direction: row;
   column-gap: calc(var(--base-unit) * 2);
-  align-items: center;
+  align-items: baseline;
   font-size: var(--body-10-font-size);
   font-weight: var(--body-10-font-weight);
 }
@@ -20,7 +20,13 @@
   width: calc(var(--base-unit) * 4);
   height: calc(var(--base-unit) * 4);
   content: "";
-  background-image: url(chrome://browser/skin/developer.svg)
+  background-image: url(chrome://browser/skin/developer.svg);
+  /* the icon size is taller than the line-height of the text. Since the
+     text can occupy multiple lines, and we want to keep the icon aligned
+     with respect to the first line, instead of align-items: center in
+     .aboutdebugging-plug, we use baseline, and fine tune the position here. */
+  position: relative;
+  top: 3px;
 }
 
 .registrations-container {

devtools/client/application/src/components/service-workers/WorkersPage.css

@@ -1,21 +0,0 @@
-/* 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/. *
-
-/*
- * The current layout of the workers page is
- *
- *  +---------------------------------------------+
- *  | (header) "Service workers"                  |
- *  +---------------------------------------------+
- *  | Service worker 1                            |
- *  |   (...)                                     |
- *  | Service worker N           (see Worker.css) |
- *  +---------------------------------------------+
- *  |                     Link to about:debugging |
- *  +---------------------------------------------+
- */
-
- .app-page--workers {
-   grid-template-rows: 1fr auto;
- }

devtools/client/application/src/components/service-workers/WorkersPage.js

@@ -44,7 +44,7 @@ class WorkersPage extends PureComponent {
     return section(
       {
         className: `app-page js-service-workers-page ${
-          isListEmpty ? "app-page--empty" : "app-page--workers"
+          isListEmpty ? "app-page--empty" : ""
         }`,
       },
       isListEmpty

devtools/client/application/src/components/service-workers/moz.build

@@ -11,6 +11,5 @@ DevToolsModules(
     'RegistrationListEmpty.js',
     'Worker.css',
     'Worker.js',
-    'WorkersPage.css',
     'WorkersPage.js',
 )

devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`WorkersPage filters out workers from diferent domains 1`] = `
 <section
-  className="app-page js-service-workers-page app-page--workers"
+  className="app-page js-service-workers-page "
 >
   <RegistrationList
     canDebugWorkers={true}
@@ -52,7 +52,7 @@ exports[`WorkersPage filters out workers from different domains and renders an e
 
 exports[`WorkersPage it renders a list with a single element if there's just 1 worker 1`] = `
 <section
-  className="app-page js-service-workers-page app-page--workers"
+  className="app-page js-service-workers-page "
 >
   <RegistrationList
     canDebugWorkers={true}
@@ -80,7 +80,7 @@ exports[`WorkersPage it renders a list with a single element if there's just 1 w
 
 exports[`WorkersPage renders a list with multiple elements when there are multiple workers 1`] = `
 <section
-  className="app-page js-service-workers-page app-page--workers"
+  className="app-page js-service-workers-page "
 >
   <RegistrationList
     canDebugWorkers={true}