diff --git a/devtools/client/application/src/components/service-workers/Registration.css b/devtools/client/application/src/components/service-workers/Registration.css index 0fafbf16685f..26277868e7b7 100644 --- a/devtools/client/application/src/components/service-workers/Registration.css +++ b/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 */ - 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); + grid-area: scope; } .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) { diff --git a/devtools/client/application/src/components/service-workers/Registration.js b/devtools/client/application/src/components/service-workers/Registration.js index 0bfd100c677e..703ceaa9048d 100644 --- a/devtools/client/application/src/components/service-workers/Registration.js +++ b/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( - { className: "registration__header" }, - scope, - aside({}, unregisterButton) - ), - lastUpdated ? p({}, lastUpdated) : null, + header({ className: "registration__header" }, scope, lastUpdated), + aside({ className: "registration__controls" }, unregisterButton), // render list of workers ul( { className: "registration__workers" }, diff --git a/devtools/client/application/src/components/service-workers/Worker.css b/devtools/client/application/src/components/service-workers/Worker.css index cdf8377fab6d..acd857b1972c 100644 --- a/devtools/client/application/src/components/service-workers/Worker.css +++ b/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
+
pair elements */ +.worker__data > *:nth-child(n + 3) { + margin-block-start: calc(var(--base-unit) * 2); } .worker__link-start, diff --git a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap index c7247745328e..b7f7a59132d5 100644 --- a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap +++ b/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
- SCOPE 123 - - +
+