Bug 1635403 - Part 2: Place the unregister button in different locations depending on layout r=jdescottes

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

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

@@ -2,28 +2,70 @@
  * 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 a registration is
+ *
+ *  +------+----------------------+----------------+
+ *  | Header - scope + timestamp  | Unregister_btn |
+ *  +------+----------------------+----------------|
+ *  | worker 1                                     |
+    | worker 2                                     |
+    | ...                                          |
+    +----------------------------------------------+
+    |                              Unregister btn  |
+    +----------------------------------------------+
+ */
+
 .registration {
   line-height: 1.5;
   font-size: var(--body-10-font-size);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: minmax(calc(var(--base-unit) * 6), auto) 1fr auto;
+  grid-column-gap: calc(4 * var(--base-unit));
+  grid-row-gap: calc(2 * var(--base-unit));
+  grid-template-areas: "header          header-controls"
+                       "workers         workers"
+                       "footer-controls footer-controls";
+}
+
+/* vertical layout */
+@media(max-width: 700px) {
+  .registration__controls {
+    grid-area: footer-controls;
+    justify-self: end;
+  }
+}
+
+/* wide layout */
+@media(min-width: 701px) {
+  .registration__controls {
+    grid-area: header-controls;
+  }
 }
 
-/*
- * The current layout of a registration header is
- *
- *  +----------------------------+----------------+
- *  | Registration scope         | Unregister_btn |
- *  +---+----------+-------------+----------------|
- */
 .registration__header {
+  grid-area: header;
+
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-areas: "icon      scope"
+                       "timestamp timestamp";
+  grid-template-columns: auto 1fr;
   /* 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));
+  grid-column-gap: calc(var(--base-unit) * 2);
   align-items: center;
 }
 
+.registration__header::before {
+  display: inline-block;
+  width: calc(var(--base-unit) * 4);
+  height: calc(var(--base-unit) * 4);
+  content: "";
+  background-image: url(chrome://devtools/skin/images/debugging-workers.svg);
+}
+
 .registration__scope {
   font-size: var(--title-10-font-size);
   font-weight: var(--title-10-font-weight);
@@ -31,30 +73,20 @@
   overflow: hidden;
   white-space: nowrap;
   user-select: text;
+  margin: 0;
 
-  /* display flex to handle showing the icon with ::before */
+  grid-area: scope;
-  display: flex;
-  flex-direction: row;
-  column-gap: calc(var(--base-unit) * 2);
-  align-items: center;
-}
-
-.registration__scope::before {
-  display: inline-block;
-  width: calc(var(--base-unit) * 4);
-  height: calc(var(--base-unit) * 4);
-  content: "";
-  background-image: url(chrome://devtools/skin/images/debugging-workers.svg);
 }
 
 .registration__updated-time {
   color: var(--theme-text-color-alt);
+  grid-area: timestamp;
 }
 
 .registration__workers {
+  grid-area: workers;
   list-style-type: none;
   padding: 0;
-  margin: calc(2 * var(--base-unit)) 0 0 0;
 }
 
 .registration__workers-item:not(:first-child) {

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

@@ -16,10 +16,10 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const {
   article,
   aside,
+  h2,
   header,
   li,
   p,
-  span,
   time,
   ul,
 } = require("devtools/client/shared/vendor/react-dom-factories");
@@ -102,11 +102,11 @@ class Registration extends PureComponent {
             $date: registration.lastUpdateTime / 1000,
             time: time({ className: "js-sw-updated" }),
           },
-          span({ className: "registration__updated-time" })
+          p({ className: "registration__updated-time" })
         )
       : null;
 
-    const scope = span(
+    const scope = h2(
       {
         title: registration.scope,
         className: "registration__scope js-sw-scope",
@@ -118,12 +118,8 @@ class Registration extends PureComponent {
       { className: className ? className : "" },
       article(
         { className: "registration js-sw-container" },
-        header(
+        header({ className: "registration__header" }, scope, lastUpdated),
-          { className: "registration__header" },
+        aside({ className: "registration__controls" }, unregisterButton),
-          scope,
-          aside({}, unregisterButton)
-        ),
-        lastUpdated ? p({}, lastUpdated) : null,
         // render list of workers
         ul(
           { className: "registration__workers" },

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

@@ -33,7 +33,12 @@
 }
 
 .worker__data > * {
-  margin: calc(var(--base-unit) * 2) 0 0 0;
+  margin: 0;
+}
+
+/* skip the first <dt> + <dd> pair elements */
+.worker__data > *:nth-child(n + 3) {
+  margin-block-start: calc(var(--base-unit) * 2);
 }
 
 .worker__link-start,

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

@@ -10,23 +10,25 @@ exports[`Registration Renders the expected snapshot for a registration with a wo
     <header
       className="registration__header"
     >
-      <span
+      <h2
         className="registration__scope js-sw-scope"
         title="SCOPE 123"
       >
         SCOPE 123
-      </span>
+      </h2>
-      <aside>
-        <Localized
-          id="serviceworker-worker-unregister"
-        >
-          <UIButton
-            className="js-unregister-button"
-            onClick={[Function]}
-          />
-        </Localized>
-      </aside>
     </header>
+    <aside
+      className="registration__controls"
+    >
+      <Localized
+        id="serviceworker-worker-unregister"
+      >
+        <UIButton
+          className="js-unregister-button"
+          onClick={[Function]}
+        />
+      </Localized>
+    </aside>
     <ul
       className="registration__workers"
     >
@@ -62,23 +64,25 @@ exports[`Registration Renders the expected snapshot for a registration with mult
     <header
       className="registration__header"
     >
-      <span
+      <h2
         className="registration__scope js-sw-scope"
         title="SCOPE 123"
       >
         SCOPE 123
-      </span>
+      </h2>
-      <aside>
-        <Localized
-          id="serviceworker-worker-unregister"
-        >
-          <UIButton
-            className="js-unregister-button"
-            onClick={[Function]}
-          />
-        </Localized>
-      </aside>
     </header>
+    <aside
+      className="registration__controls"
+    >
+      <Localized
+        id="serviceworker-worker-unregister"
+      >
+        <UIButton
+          className="js-unregister-button"
+          onClick={[Function]}
+        />
+      </Localized>
+    </aside>
     <ul
       className="registration__workers"
     >
@@ -131,23 +135,25 @@ exports[`Registration Renders the expected snapshot when sw debugging is disable
     <header
       className="registration__header"
     >
-      <span
+      <h2
         className="registration__scope js-sw-scope"
         title="SCOPE 123"
       >
         SCOPE 123
-      </span>
+      </h2>
-      <aside>
-        <Localized
-          id="serviceworker-worker-unregister"
-        >
-          <UIButton
-            className="js-unregister-button"
-            onClick={[Function]}
-          />
-        </Localized>
-      </aside>
     </header>
+    <aside
+      className="registration__controls"
+    >
+      <Localized
+        id="serviceworker-worker-unregister"
+      >
+        <UIButton
+          className="js-unregister-button"
+          onClick={[Function]}
+        />
+      </Localized>
+    </aside>
     <ul
       className="registration__workers"
     >