Bug 1635401 - Part 4: Fix about:debugging link appearance r=jdescottes
authorBelén Albeza <balbeza@mozilla.com>
Wed, 13 May 2020 12:20:32 +0000
changeset 529838 3a030dbe34448f0815d22b470960281bf1a87c63
parent 529837 1141a5933cc0becf72f5ffc42144fe84fb8126b8
child 529839 3fd37ce08d60bd447db9a78a94080db245c3729f
push id37416
push usercsabou@mozilla.com
push dateThu, 14 May 2020 16:15:31 +0000
treeherdermozilla-central@80ba3f3cfaf9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1635401
milestone78.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 1635401 - Part 4: Fix about:debugging link appearance r=jdescottes Depends on D74668 Differential Revision: https://phabricator.services.mozilla.com/D74679
devtools/client/application/src/components/service-workers/Registration.css
devtools/client/application/src/components/service-workers/RegistrationList.css
devtools/client/application/src/components/service-workers/RegistrationList.js
devtools/client/application/src/components/service-workers/WorkersPage.css
devtools/client/application/src/components/service-workers/WorkersPage.js
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationList.test.js.snap
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap
--- a/devtools/client/application/src/components/service-workers/Registration.css
+++ b/devtools/client/application/src/components/service-workers/Registration.css
@@ -12,16 +12,19 @@
  *
  *  +----------------------------+----------------+
  *  | Registration scope         | Unregister_btn |
  *  +---+----------+-------------+----------------|
  */
 .registration__header {
   display: grid;
   grid-template-columns: 1fr auto;
+  /* make the row min height the same size of the Unregister button,
+     so we avoid a shifting movement when the button is not displayed */
+  grid-template-rows: minmax(calc(var(--base-unit) * 6), auto);
   grid-column-gap: calc(4 * var(--base-unit));
   align-items: center;
 }
 
 .registration__scope {
   font-size: var(--title-10-font-size);
   font-weight: var(--title-10-font-weight);
   text-overflow: ellipsis;
--- a/devtools/client/application/src/components/service-workers/RegistrationList.css
+++ b/devtools/client/application/src/components/service-workers/RegistrationList.css
@@ -1,19 +1,31 @@
 /* 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/. */
 
 .aboutdebugging-plug {
-  text-align: right;
-  padding: 1rem 0;
+  padding-block-start: calc(var(--base-unit) * 3);
+  border-block-start: 1px solid var(--separator-color);
+
+  /* display flex to handle showing the icon with ::before */
+  display: flex;
+  flex-direction: row;
+  column-gap: calc(var(--base-unit) * 2);
+  align-items: center;
+  font-size: var(--body-10-font-size);
+  font-weight: var(--body-10-font-weight);
 }
 
-.aboutdebugging-plug__link {
-  margin: 0;
+.aboutdebugging-plug::before {
+    display: inline-block;
+    width: calc(var(--base-unit) * 4);
+    height: calc(var(--base-unit) * 4);
+    content: "";
+    background-image: url(chrome://browser/skin/developer.svg)
 }
 
 .registrations-container {
   flex-grow: 1;
 }
 
 .registrations-container__list {
   padding-inline-start: 0;
--- a/devtools/client/application/src/components/service-workers/RegistrationList.js
+++ b/devtools/client/application/src/components/service-workers/RegistrationList.js
@@ -10,16 +10,17 @@ const {
   createFactory,
   PureComponent,
 } = require("devtools/client/shared/vendor/react");
 const {
   a,
   article,
   footer,
   h1,
+  p,
   ul,
 } = require("devtools/client/shared/vendor/react-dom-factories");
 
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
 const Types = require("devtools/client/application/src/types/index");
 const Registration = createFactory(
@@ -61,25 +62,29 @@ class RegistrationList extends PureCompo
               key: registration.id,
               isDebugEnabled: canDebugWorkers,
               registration,
               className: "registrations-container__item",
             })
           )
         )
       ),
-      Localized(
-        {
-          id: "serviceworker-list-aboutdebugging",
-          key: "serviceworkerlist-footer",
-          a: a({
-            className: "aboutdebugging-plug__link",
-            onClick: () => openTrustedLink("about:debugging#workers"),
-          }),
-        },
-        footer({ className: "aboutdebugging-plug" })
+
+      footer(
+        { className: "aboutdebugging-plug" },
+        Localized(
+          {
+            id: "serviceworker-list-aboutdebugging",
+            key: "serviceworkerlist-footer",
+            a: a({
+              className: "aboutdebugging-plug__link",
+              onClick: () => openTrustedLink("about:debugging#workers"),
+            }),
+          },
+          p({})
+        )
       ),
     ];
   }
 }
 
 // Exports
 module.exports = RegistrationList;
--- a/devtools/client/application/src/components/service-workers/WorkersPage.css
+++ b/devtools/client/application/src/components/service-workers/WorkersPage.css
@@ -10,8 +10,12 @@
  *  +---------------------------------------------+
  *  | Service worker 1                            |
  *  |   (...)                                     |
  *  | Service worker N           (see Worker.css) |
  *  +---------------------------------------------+
  *  |                     Link to about:debugging |
  *  +---------------------------------------------+
  */
+
+ .app-page--workers {
+   grid-template-rows: 1fr auto;
+ }
\ No newline at end of file
--- a/devtools/client/application/src/components/service-workers/WorkersPage.js
+++ b/devtools/client/application/src/components/service-workers/WorkersPage.js
@@ -39,17 +39,17 @@ class WorkersPage extends PureComponent 
     const domainWorkers = registrations.filter(
       x => x.workers.length > 0 && new URL(x.workers[0].url).hostname === domain
     );
     const isListEmpty = domainWorkers.length === 0;
 
     return section(
       {
         className: `app-page js-service-workers-page ${
-          isListEmpty ? "app-page--empty" : ""
+          isListEmpty ? "app-page--empty" : "app-page--workers"
         }`,
       },
       isListEmpty
         ? RegistrationListEmpty({})
         : RegistrationList({
             canDebugWorkers,
             registrations: domainWorkers,
           })
--- a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationList.test.js.snap
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationList.test.js.snap
@@ -34,30 +34,32 @@ Array [
                 "workerTargetFront": "",
               },
             ],
           }
         }
       />
     </ul>
   </article>,
-  <Localized
-    a={
-      <a
-        className="aboutdebugging-plug__link"
-        onClick={[Function]}
-      />
-    }
-    id="serviceworker-list-aboutdebugging"
-    key="serviceworkerlist-footer"
+  <footer
+    className="aboutdebugging-plug"
   >
-    <footer
-      className="aboutdebugging-plug"
-    />
-  </Localized>,
+    <Localized
+      a={
+        <a
+          className="aboutdebugging-plug__link"
+          onClick={[Function]}
+        />
+      }
+      id="serviceworker-list-aboutdebugging"
+      key="serviceworkerlist-footer"
+    >
+      <p />
+    </Localized>
+  </footer>,
 ]
 `;
 
 exports[`RegistrationList renders the expected snapshot for a multiple registration list 1`] = `
 Array [
   <article
     className="registrations-container"
     key="registrations-container"
@@ -132,24 +134,26 @@ Array [
                 "workerTargetFront": "",
               },
             ],
           }
         }
       />
     </ul>
   </article>,
-  <Localized
-    a={
-      <a
-        className="aboutdebugging-plug__link"
-        onClick={[Function]}
-      />
-    }
-    id="serviceworker-list-aboutdebugging"
-    key="serviceworkerlist-footer"
+  <footer
+    className="aboutdebugging-plug"
   >
-    <footer
-      className="aboutdebugging-plug"
-    />
-  </Localized>,
+    <Localized
+      a={
+        <a
+          className="aboutdebugging-plug__link"
+          onClick={[Function]}
+        />
+      }
+      id="serviceworker-list-aboutdebugging"
+      key="serviceworkerlist-footer"
+    >
+      <p />
+    </Localized>
+  </footer>,
 ]
 `;
--- a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WorkersPage filters out workers from diferent domains 1`] = `
 <section
-  className="app-page js-service-workers-page "
+  className="app-page js-service-workers-page app-page--workers"
 >
   <RegistrationList
     canDebugWorkers={true}
     registrations={
       Array [
         Object {
           "id": "id-reg-1-example",
           "registrationFront": "",
@@ -47,17 +47,17 @@ exports[`WorkersPage filters out workers
   className="app-page js-service-workers-page app-page--empty"
 >
   <RegistrationListEmpty />
 </section>
 `;
 
 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 "
+  className="app-page js-service-workers-page app-page--workers"
 >
   <RegistrationList
     canDebugWorkers={true}
     registrations={
       Array [
         Object {
           "id": "id-reg-1-example",
           "registrationFront": "",
@@ -75,17 +75,17 @@ exports[`WorkersPage it renders a list w
       ]
     }
   />
 </section>
 `;
 
 exports[`WorkersPage renders a list with multiple elements when there are multiple workers 1`] = `
 <section
-  className="app-page js-service-workers-page "
+  className="app-page js-service-workers-page app-page--workers"
 >
   <RegistrationList
     canDebugWorkers={true}
     registrations={
       Array [
         Object {
           "id": "id-reg-1-example",
           "registrationFront": "",