Bug 1635401 - Part 3: Fix registration scope appearance r=jdescottes
authorBelén Albeza <balbeza@mozilla.com>
Tue, 12 May 2020 15:49:02 +0000
changeset 529837 1141a5933cc0becf72f5ffc42144fe84fb8126b8
parent 529836 28529c0faf8f52387d1777c64ce83904a869a2d4
child 529838 3a030dbe34448f0815d22b470960281bf1a87c63
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 3: Fix registration scope appearance r=jdescottes Depends on D74659 Differential Revision: https://phabricator.services.mozilla.com/D74668
devtools/client/application/src/components/service-workers/Registration.css
devtools/client/application/src/components/service-workers/Registration.js
devtools/client/application/test/browser/browser_application_panel_list-multiple-workers-same-registration.js
devtools/client/application/test/browser/browser_application_panel_list-single-worker.js
devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js
--- a/devtools/client/application/src/components/service-workers/Registration.css
+++ b/devtools/client/application/src/components/service-workers/Registration.css
@@ -2,17 +2,16 @@
  * 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/. */
 
 .registration {
   line-height: 1.5;
   font-size: var(--body-10-font-size);
 }
 
-
 /*
  * The current layout of a registration header is
  *
  *  +----------------------------+----------------+
  *  | Registration scope         | Unregister_btn |
  *  +---+----------+-------------+----------------|
  */
 .registration__header {
@@ -24,16 +23,30 @@
 
 .registration__scope {
   font-size: var(--title-10-font-size);
   font-weight: var(--title-10-font-weight);
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   user-select: text;
+
+  /* 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);
 }
 
 .registration__updated-time {
   color: var(--theme-text-color-alt);
 }
 
 .registration__workers {
   list-style-type: none;
--- a/devtools/client/application/src/components/service-workers/Registration.js
+++ b/devtools/client/application/src/components/service-workers/Registration.js
@@ -69,17 +69,19 @@ class Registration extends PureComponent
     const { workers } = this.props.registration;
     return workers.some(
       x => x.state === Ci.nsIServiceWorkerInfo.STATE_ACTIVATED
     );
   }
 
   formatScope(scope) {
     const [, remainder] = getUnicodeUrl(scope).split("://");
-    return remainder || scope;
+    // remove the last slash from the url, if present
+    // or return the full scope if there's no remainder
+    return remainder ? remainder.replace(/\/$/, "") : scope;
   }
 
   render() {
     const { registration, isDebugEnabled, className } = this.props;
 
     const unregisterButton = this.isActive()
       ? Localized(
           { id: "serviceworker-worker-unregister" },
--- a/devtools/client/application/test/browser/browser_application_panel_list-multiple-workers-same-registration.js
+++ b/devtools/client/application/test/browser/browser_application_panel_list-multiple-workers-same-registration.js
@@ -20,17 +20,17 @@ add_task(async function() {
   await waitUntil(() => {
     registrationContainer = getWorkerContainers(doc)[0];
     return registrationContainer.querySelector(".js-unregister-button");
   });
 
   const scopeEl = registrationContainer.querySelector(".js-sw-scope");
   const expectedScope =
     "example.com/browser/devtools/client/application/test/" +
-    "browser/resources/service-workers/";
+    "browser/resources/service-workers";
   ok(
     scopeEl.textContent.startsWith(expectedScope),
     "Registration has the expected scope"
   );
 
   // check the workers data
   // note that the worker from WORKER2_URL will appear second in the list with
   // the "installed" state
--- a/devtools/client/application/test/browser/browser_application_panel_list-single-worker.js
+++ b/devtools/client/application/test/browser/browser_application_panel_list-single-worker.js
@@ -32,17 +32,17 @@ add_task(async function() {
   await waitUntil(() => {
     workerContainer = getWorkerContainers(doc)[0];
     return workerContainer.querySelector(".js-unregister-button");
   });
 
   const scopeEl = workerContainer.querySelector(".js-sw-scope");
   const expectedScope =
     "example.com/browser/devtools/client/application/test/" +
-    "browser/resources/service-workers/";
+    "browser/resources/service-workers";
   ok(
     scopeEl.textContent.startsWith(expectedScope),
     "Service worker has the expected scope"
   );
 
   const updatedEl = workerContainer.querySelector(".js-sw-updated");
   ok(
     updatedEl.textContent.includes(`${new Date().getFullYear()}`),
--- a/devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js
+++ b/devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js
@@ -48,9 +48,25 @@ describe("Registration", () => {
       Registration({
         isDebugEnabled: false,
         registration: REGISTRATION_SINGLE_WORKER,
       })
     );
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("Removes the ending forward slash from the scope, when present", () => {
+    const registration = Object.assign({}, REGISTRATION_SINGLE_WORKER, {
+      scope: "https://example.com/something/",
+    });
+
+    const wrapper = shallow(
+      Registration({
+        isDebugEnabled: false,
+        registration: registration,
+      })
+    );
+
+    const scopeEl = wrapper.find(".js-sw-scope");
+    expect(scopeEl.text()).toBe("example.com/something");
+  });
 });