mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1635401 - Part 2: add colored dot to mark service worker state r=jdescottes 

Differential Revision: https://phabricator.services.mozilla.com/D74659
This commit is contained in:
Belén Albeza 2020-05-12 15:47:54 +00:00
Родитель e87e86bf59
Коммит d55a12f74c
12 изменённых файлов: 78 добавлений и 41 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

6
devtools/client/application/src/components/service-workers/Registration.js
Просмотреть файл

@ -4,6 +4,8 @@
"use strict";
const { Ci } = require("chrome");
const {
createFactory,
PureComponent,
@ -65,7 +67,9 @@ class Registration extends PureComponent {
isActive() {
const { workers } = this.props.registration;
return workers.some(x => x.isActive);
return workers.some(
x => x.state === Ci.nsIServiceWorkerInfo.STATE_ACTIVATED
);
}
formatScope(scope) {

28
devtools/client/application/src/components/service-workers/Worker.css
Просмотреть файл

@ -43,4 +43,32 @@
.worker__status {
text-transform: capitalize;
--status-bg-color: transparent;
--status-border-color: transparent;
}
.worker__status::before {
content: "";
margin-inline-end: var(--base-unit);
width: calc(var(--base-unit) * 2);
height: calc(var(--base-unit) * 2);
display: inline-block;
background: var(--status-bg-color);
border: 1px solid var(--status-border-color);
border-radius: 100%;
}
.worker__status--active {
--status-bg-color: var(--green-60);
--status-border-color: var(--green-60);
}
.worker__status--waiting {
--status-bg-color: var(--theme-text-color-alt);
--status-border-color: var(--theme-text-color-alt);
}
.worker__status--installing, .worker__status--default {
--status-bg-color: transparent;
--status-border-color: var(--theme-text-color-alt);
}

27
devtools/client/application/src/components/service-workers/Worker.js
Просмотреть файл

@ -4,6 +4,8 @@
"use strict";
const { Ci } = require("chrome");
const {
createFactory,
PureComponent,
@ -85,7 +87,7 @@ class Worker extends PureComponent {
}
isActive() {
return this.props.worker.isActive;
return this.props.worker.state === Ci.nsIServiceWorkerInfo.STATE_ACTIVATED;
}
getLocalizedStatus() {
@ -99,6 +101,23 @@ class Worker extends PureComponent {
return this.props.worker.stateText;
}
getClassNameForStatus(baseClass) {
const { state } = this.props.worker;
switch (state) {
case Ci.nsIServiceWorkerInfo.STATE_PARSED:
case Ci.nsIServiceWorkerInfo.STATE_INSTALLING:
return "worker__status--installing";
case Ci.nsIServiceWorkerInfo.STATE_INSTALLED:
case Ci.nsIServiceWorkerInfo.STATE_ACTIVATING:
return "worker__status--waiting";
case Ci.nsIServiceWorkerInfo.STATE_ACTIVATED:
return "worker__status--active";
}
return "worker__status--default";
}
formatSource(source) {
const parts = source.split("/");
return getUnicodeUrlPath(parts[parts.length - 1]);
@ -160,6 +179,7 @@ class Worker extends PureComponent {
render() {
const { worker } = this.props;
const statusText = this.getLocalizedStatus();
const statusClassName = this.getClassNameForStatus();
return section(
{ className: "worker js-sw-worker" },
@ -187,7 +207,10 @@ class Worker extends PureComponent {
),
dd(
{},
span({ className: "js-worker-status worker__status" }, statusText),
span(
{ className: `js-worker-status worker__status ${statusClassName}` },
statusText
),
" ",
this.renderStartButton()
)

4
devtools/client/application/src/reducers/workers-state.js
Просмотреть файл

@ -4,8 +4,6 @@
"use strict";
const { Ci } = require("chrome");
const {
UPDATE_CAN_DEBUG_WORKERS,
UPDATE_WORKERS,
@ -27,8 +25,8 @@ function buildWorkerDataFromFronts({ registration, workers }) {
scope: registration.scope,
workers: workers.map(worker => ({
id: worker.id,
isActive: worker.state === Ci.nsIServiceWorkerInfo.STATE_ACTIVATED,
url: worker.url,
state: worker.state,
stateText: worker.stateText,
registrationFront: registration,
workerTargetFront: worker.workerTargetFront,

2
devtools/client/application/src/types/service-workers.js
Просмотреть файл

@ -8,7 +8,7 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const worker = {
id: PropTypes.string.isRequired,
isActive: PropTypes.bool.isRequired,
state: PropTypes.number.isRequired,
stateText: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
workerTargetFront: PropTypes.object,

4
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap
Просмотреть файл

@ -39,7 +39,6 @@ exports[`Registration Renders the expected snapshot for a registration with a wo
worker={
Object {
"id": "id-worker-1-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",
@ -92,7 +91,6 @@ exports[`Registration Renders the expected snapshot for a registration with mult
worker={
Object {
"id": "id-worker-1-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",
@ -110,7 +108,6 @@ exports[`Registration Renders the expected snapshot for a registration with mult
worker={
Object {
"id": "id-worker-2-example",
"isActive": false,
"state": 2,
"stateText": "installed",
"url": "http://example.com/worker.js",
@ -163,7 +160,6 @@ exports[`Registration Renders the expected snapshot when sw debugging is disable
worker={
Object {
"id": "id-worker-1-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",

4
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationList.test.js.snap
Просмотреть файл

@ -28,7 +28,6 @@ Array [
"workers": Array [
Object {
"id": "id-worker-1-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",
@ -85,7 +84,6 @@ Array [
"workers": Array [
Object {
"id": "id-worker-1-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",
@ -107,7 +105,6 @@ Array [
"workers": Array [
Object {
"id": "id-worker-2-example",
"isActive": false,
"state": 2,
"stateText": "installed",
"url": "http://example.com/worker.js",
@ -129,7 +126,6 @@ Array [
"workers": Array [
Object {
"id": "id-worker-3-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",

6
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Worker.test.js.snap
Просмотреть файл

@ -47,7 +47,7 @@ exports[`Worker Renders the expected snapshot for a non-active worker 1`] = `
</Localized>
<dd>
<span
className="js-worker-status worker__status"
className="js-worker-status worker__status worker__status--waiting"
>
installed
</span>
@ -104,7 +104,7 @@ exports[`Worker Renders the expected snapshot for a running worker 1`] = `
</Localized>
<dd>
<span
className="js-worker-status worker__status"
className="js-worker-status worker__status worker__status--active"
>
serviceworker-worker-status-running
</span>
@ -161,7 +161,7 @@ exports[`Worker Renders the expected snapshot for a stopped worker 1`] = `
</Localized>
<dd>
<span
className="js-worker-status worker__status"
className="js-worker-status worker__status worker__status--active"
>
serviceworker-worker-status-stopped
</span>

6
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap
Просмотреть файл

@ -15,7 +15,6 @@ exports[`WorkersPage filters out workers from diferent domains 1`] = `
"workers": Array [
Object {
"id": "id-worker-1-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",
@ -30,7 +29,6 @@ exports[`WorkersPage filters out workers from diferent domains 1`] = `
"workers": Array [
Object {
"id": "id-worker-2-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",
@ -67,7 +65,6 @@ exports[`WorkersPage it renders a list with a single element if there's just 1 w
"workers": Array [
Object {
"id": "id-worker-1-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",
@ -96,7 +93,6 @@ exports[`WorkersPage renders a list with multiple elements when there are multip
"workers": Array [
Object {
"id": "id-worker-1-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",
@ -111,7 +107,6 @@ exports[`WorkersPage renders a list with multiple elements when there are multip
"workers": Array [
Object {
"id": "id-worker-2-example",
"isActive": false,
"state": 2,
"stateText": "installed",
"url": "http://example.com/worker.js",
@ -126,7 +121,6 @@ exports[`WorkersPage renders a list with multiple elements when there are multip
"workers": Array [
Object {
"id": "id-worker-3-example",
"isActive": true,
"state": 4,
"stateText": "activated",
"url": "http://example.com/worker.js",

14
devtools/client/application/test/node/fixtures/Chrome.js
Просмотреть файл

@ -6,6 +6,18 @@
module.exports = {
Cc: {},
Ci: {},
Ci: {
// sw states from
// mozilla-central/source/dom/interfaces/base/nsIServiceWorkerManager.idl
nsIServiceWorkerInfo: {
STATE_PARSED: 0,
STATE_INSTALLING: 1,
STATE_INSTALLED: 2,
STATE_ACTIVATING: 3,
STATE_ACTIVATED: 4,
STATE_REDUNDANT: 5,
STATE_UNKNOWN: 6,
},
},
Cu: {},
};

14
devtools/client/application/test/node/fixtures/data/constants.js
Просмотреть файл

@ -11,7 +11,6 @@ const EMPTY_WORKER_LIST = [];
const WORKER_RUNNING = {
id: "id-worker-1-example",
isActive: true,
workerTargetFront: true,
url: "http://example.com/worker.js",
state: 4,
@ -20,7 +19,6 @@ const WORKER_RUNNING = {
const WORKER_STOPPED = {
id: "id-worker-1-example",
isActive: true,
workerTargetFront: false,
url: "http://example.com/worker.js",
state: 4,
@ -29,7 +27,6 @@ const WORKER_STOPPED = {
const WORKER_WAITING = {
id: "id-worker-1-example",
isActive: false,
workerTargetFront: false,
url: "http://example.com/worker.js",
state: 2,
@ -43,7 +40,6 @@ const REGISTRATION_SINGLE_WORKER = {
workers: [
{
id: "id-worker-1-example",
isActive: true,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 4,
@ -59,7 +55,6 @@ const REGISTRATION_MULTIPLE_WORKERS = {
workers: [
{
id: "id-worker-1-example",
isActive: true,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 4,
@ -67,7 +62,6 @@ const REGISTRATION_MULTIPLE_WORKERS = {
},
{
id: "id-worker-2-example",
isActive: false,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 2,
@ -84,7 +78,6 @@ const SINGLE_WORKER_DEFAULT_DOMAIN_LIST = [
workers: [
{
id: "id-worker-1-example",
isActive: true,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 4,
@ -102,7 +95,6 @@ const SINGLE_WORKER_DIFFERENT_DOMAIN_LIST = [
workers: [
{
id: "id-worker-1-example",
isActive: true,
workerTargetFront: "",
url: "http://different-example.com/worker.js",
state: 4,
@ -120,7 +112,6 @@ const MULTIPLE_WORKER_LIST = [
workers: [
{
id: "id-worker-1-example",
isActive: true,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 4,
@ -135,7 +126,6 @@ const MULTIPLE_WORKER_LIST = [
workers: [
{
id: "id-worker-2-example",
isActive: false,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 2,
@ -150,7 +140,6 @@ const MULTIPLE_WORKER_LIST = [
workers: [
{
id: "id-worker-3-example",
isActive: true,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 4,
@ -168,7 +157,6 @@ const MULTIPLE_WORKER_MIXED_DOMAINS_LIST = [
workers: [
{
id: "id-worker-1-example",
isActive: true,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 4,
@ -183,7 +171,6 @@ const MULTIPLE_WORKER_MIXED_DOMAINS_LIST = [
workers: [
{
id: "id-worker-2-example",
isActive: true,
workerTargetFront: "",
url: "http://example.com/worker.js",
state: 4,
@ -198,7 +185,6 @@ const MULTIPLE_WORKER_MIXED_DOMAINS_LIST = [
workers: [
{
id: "id-worker-3-example",
isActive: true,
workerTargetFront: "",
url: "http://different-example.com/worker.js",
state: 4,

4
devtools/client/application/test/xpcshell/test_workers_reducer.js
Просмотреть файл

@ -72,18 +72,18 @@ add_task(async function() {
workers: [
{
id: "w1",
isActive: true,
url: "https://example.com/w1.js",
workerTargetFront: rawData[0].workers[0].workerTargetFront,
registrationFront: rawData[0].registration,
state: Ci.nsIServiceWorkerInfo.STATE_ACTIVATED,
stateText: "activated",
},
{
id: "w2",
isActive: false,
url: "https://example.com/w2.js",
workerTargetFront: undefined,
registrationFront: rawData[0].registration,
state: Ci.nsIServiceWorkerInfo.STATE_INSTALLED,
stateText: "installed",
},
],