зеркало из https://github.com/mozilla/gecko-dev.git
Backed out changeset 4dd499946b35 (bug 1557694) for causing failures in browser_parsable_css.js CLOSED TREE
This commit is contained in:
Родитель
70e1a770b5
Коммит
a4db5efa81
|
@ -14,7 +14,14 @@
|
|||
@import "resource://devtools/client/application/src/components/Worker.css";
|
||||
@import "resource://devtools/client/application/src/components/WorkerList.css";
|
||||
@import "resource://devtools/client/application/src/components/WorkerListEmpty.css";
|
||||
@import "resource://devtools/client/application/src/components/ui/UIButton.css";
|
||||
|
||||
|
||||
/*
|
||||
* Reset
|
||||
*/
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
|
|
|
@ -5,9 +5,6 @@
|
|||
:root {
|
||||
/* Typography from Photon */
|
||||
/* See https://firefox-dev.tools/photon/visuals/typography.html */
|
||||
--caption-10-font-size: 11px;
|
||||
--caption-10-font-weight: 400;
|
||||
--caption-10-font-weight-bold: 700;
|
||||
--body-10-font-size: 13px;
|
||||
--body-10-font-weight: 400;
|
||||
--body-20-font-size: 15px;
|
||||
|
@ -30,19 +27,12 @@
|
|||
|
||||
/* Global layout vars */
|
||||
--base-unit: 4px;
|
||||
|
||||
/* extra, raw colors */
|
||||
--blue-50-a30: rgba(10, 132, 255, 0.3);
|
||||
}
|
||||
|
||||
/*
|
||||
* Reset some tags
|
||||
*/
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
* | "Source" | script_name debug_link |
|
||||
| | "Updated" update_time |
|
||||
* |--------------+-------------+----------------|
|
||||
* | "Status" | status start_button |
|
||||
* | "Status" | status start_link |
|
||||
* +---+----------+-------------+----------------|
|
||||
*/
|
||||
|
||||
|
@ -62,7 +62,7 @@
|
|||
.worker__data {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 1rem;
|
||||
grid-column-gap: 1rem;
|
||||
}
|
||||
|
||||
.worker__data > * {
|
||||
|
|
|
@ -8,11 +8,11 @@ const {
|
|||
createFactory,
|
||||
Component,
|
||||
} = require("devtools/client/shared/vendor/react");
|
||||
|
||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
|
||||
const {
|
||||
a,
|
||||
br,
|
||||
button,
|
||||
dd,
|
||||
dl,
|
||||
dt,
|
||||
|
@ -22,7 +22,6 @@ const {
|
|||
span,
|
||||
time,
|
||||
} = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
const {
|
||||
getUnicodeUrl,
|
||||
getUnicodeUrlPath,
|
||||
|
@ -31,8 +30,6 @@ const {
|
|||
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
|
||||
const Localized = createFactory(FluentReact.Localized);
|
||||
|
||||
const UIButton = createFactory(require("./ui/UIButton"));
|
||||
|
||||
loader.lazyRequireGetter(
|
||||
this,
|
||||
"DebuggerClient",
|
||||
|
@ -139,51 +136,50 @@ class Worker extends Component {
|
|||
return getUnicodeUrlPath(parts[parts.length - 1]);
|
||||
}
|
||||
|
||||
renderDebugButton() {
|
||||
renderDebugLink() {
|
||||
const { isDebugEnabled } = this.props;
|
||||
|
||||
const isDisabled = !this.isRunning() || !isDebugEnabled;
|
||||
const shallDisableLink = !this.isRunning() || !isDebugEnabled;
|
||||
const linkClass = shallDisableLink ? "disabled-link" : "";
|
||||
|
||||
const localizationId = isDebugEnabled
|
||||
? "serviceworker-worker-debug"
|
||||
: "serviceworker-worker-debug-forbidden";
|
||||
|
||||
return Localized(
|
||||
const link = Localized(
|
||||
{
|
||||
id: localizationId,
|
||||
// The localized title is only displayed if the debug link is disabled.
|
||||
attrs: {
|
||||
title: isDisabled,
|
||||
title: shallDisableLink,
|
||||
},
|
||||
},
|
||||
UIButton({
|
||||
onClick: this.debug,
|
||||
className: `js-debug-button`,
|
||||
disabled: isDisabled,
|
||||
size: "micro",
|
||||
a({
|
||||
onClick: !shallDisableLink ? this.debug : null,
|
||||
className: `${linkClass} worker__link-debug js-link-debug`,
|
||||
})
|
||||
);
|
||||
return link;
|
||||
}
|
||||
|
||||
renderStartButton() {
|
||||
renderStartLink() {
|
||||
const { isDebugEnabled } = this.props;
|
||||
const isDisabled = !isDebugEnabled;
|
||||
const linkClass = !isDebugEnabled ? "disabled-link" : "";
|
||||
|
||||
return Localized(
|
||||
const link = Localized(
|
||||
{
|
||||
id: "serviceworker-worker-start2",
|
||||
// The localized title is only displayed if the debug link is disabled.
|
||||
attrs: {
|
||||
title: !isDisabled,
|
||||
title: !isDebugEnabled,
|
||||
},
|
||||
},
|
||||
UIButton({
|
||||
a({
|
||||
onClick: this.start,
|
||||
className: `js-start-button`,
|
||||
disabled: isDisabled,
|
||||
size: "micro",
|
||||
className: `worker__link-start js-link-start ${linkClass}`,
|
||||
})
|
||||
);
|
||||
return link;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
@ -193,9 +189,11 @@ class Worker extends Component {
|
|||
const unregisterButton = this.isActive()
|
||||
? Localized(
|
||||
{ id: "serviceworker-worker-unregister" },
|
||||
UIButton({
|
||||
button({
|
||||
onClick: this.unregister,
|
||||
className: "worker__unregister-button js-unregister-button",
|
||||
className:
|
||||
"devtools-button worker__unregister-button js-unregister-button",
|
||||
"data-standalone": true,
|
||||
})
|
||||
)
|
||||
: null;
|
||||
|
@ -239,8 +237,7 @@ class Worker extends Component {
|
|||
},
|
||||
this.formatSource(worker.url)
|
||||
),
|
||||
" ",
|
||||
this.renderDebugButton(),
|
||||
this.renderDebugLink(),
|
||||
lastUpdated ? br({}) : null,
|
||||
lastUpdated ? lastUpdated : null
|
||||
),
|
||||
|
@ -254,8 +251,7 @@ class Worker extends Component {
|
|||
{ id: "serviceworker-worker-status-" + status },
|
||||
span({ className: "js-worker-status" })
|
||||
),
|
||||
" ",
|
||||
!this.isRunning() ? this.renderStartButton() : null
|
||||
!this.isRunning() ? this.renderStartLink() : null
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
|
@ -2,10 +2,6 @@
|
|||
# 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/.
|
||||
|
||||
DIRS += [
|
||||
'ui',
|
||||
]
|
||||
|
||||
DevToolsModules(
|
||||
'App.css',
|
||||
'App.js',
|
||||
|
|
|
@ -1,71 +0,0 @@
|
|||
/* these styles com from Photon. Keep in mind that the "default" style is not used
|
||||
in panels, and we should use the "micro" instead for default, stand-alone buttons. */
|
||||
|
||||
:root.theme-light {
|
||||
--button-text-color: var(--grey-90);
|
||||
--button-text-hover-color: var(--grey-90);
|
||||
--button-text-pressed-color: var(--grey-90);
|
||||
--button-background-color: var(--grey-90-a10);
|
||||
--button-background-hover-color: var(--grey-90-a20);
|
||||
--button-background-pressed-color: var(--grey-90-a30);
|
||||
}
|
||||
|
||||
:root.theme-dark {
|
||||
--button-text-color: var(--grey-40);
|
||||
--button-text-hover-color: var(--grey-30);
|
||||
--button-text-pressed-color: var(--grey-30);
|
||||
--button-background-color: var(--grey-10-a20);
|
||||
--button-background-hover-color: var(--grey-10-a25);
|
||||
--button-background-pressed-color: var(--grey-10-a30);
|
||||
}
|
||||
|
||||
.ui-button {
|
||||
-moz-appearance: none;
|
||||
transition: background-color 0.05s ease-in-out;
|
||||
|
||||
margin: 0;
|
||||
height: calc(var(--base-unit) * 6);
|
||||
padding-inline-start: calc(2 * var(--base-unit));
|
||||
padding-inline-end: calc(2 * var(--base-unit));
|
||||
border: none;
|
||||
border-radius: calc(var(--base-unit) / 2);
|
||||
|
||||
color: var(--button-text-color);
|
||||
background: var(--button-background-color);
|
||||
font-size: var(--caption-10-font-size);
|
||||
}
|
||||
|
||||
.ui-button:-moz-focusring {
|
||||
outline: none;
|
||||
}
|
||||
.ui-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-button:not(:disabled):hover {
|
||||
background: var(--button-background-hover-color);
|
||||
color: var(--button-text-hover-color);
|
||||
}
|
||||
|
||||
.ui-button:not(:disabled):active {
|
||||
background: var(--button-background-pressed-color);
|
||||
color: var(--button-text-pressed-color);
|
||||
}
|
||||
|
||||
.ui-button:focus {
|
||||
box-shadow: 0 0 0 1px var(--blue-50) inset,
|
||||
0 0 0 1px var(--blue-50),
|
||||
0 0 0 4px var(--blue-50-a30);
|
||||
}
|
||||
|
||||
.ui-button:disabled {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* Note: this "micro" variant here is not the same as the "micro" variant
|
||||
in Photon docs (since we are using that one for our default size) */
|
||||
.ui-button--micro {
|
||||
height: auto;
|
||||
padding: calc(var(--base-unit) * 0.5) var(--base-unit);
|
||||
}
|
|
@ -1,33 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
const { PureComponent } = require("devtools/client/shared/vendor/react");
|
||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
const { button } = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
class UIButton extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
size: PropTypes.oneOf(["micro"]),
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, disabled, onClick, size } = this.props;
|
||||
const sizeClass = size ? `ui-button--${size}` : "";
|
||||
|
||||
return button(
|
||||
{
|
||||
className: `ui-button ${className || ""} ${sizeClass}`,
|
||||
onClick,
|
||||
disabled,
|
||||
},
|
||||
this.props.children
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = UIButton;
|
|
@ -1,8 +0,0 @@
|
|||
# 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/.
|
||||
|
||||
DevToolsModules(
|
||||
'UIButton.css',
|
||||
'UIButton.js',
|
||||
)
|
|
@ -27,17 +27,16 @@ add_task(async function() {
|
|||
await waitUntil(() => getWorkerContainers(doc).length === 1);
|
||||
|
||||
const container = getWorkerContainers(doc)[0];
|
||||
info("Wait until the debug button is displayed and enabled");
|
||||
await waitUntil(() => {
|
||||
const button = container.querySelector(".js-debug-button");
|
||||
return button && !button.disabled;
|
||||
});
|
||||
info("Wait until the debug link is displayed and enabled");
|
||||
await waitUntil(() =>
|
||||
container.querySelector(".js-link-debug:not(.worker__debug-link--disabled)")
|
||||
);
|
||||
|
||||
info("Click on the debug button and wait for the new toolbox to be ready");
|
||||
info("Click on the debug link and wait for the new toolbox to be ready");
|
||||
const onToolboxReady = gDevTools.once("toolbox-ready");
|
||||
|
||||
const debugButton = container.querySelector(".js-debug-button");
|
||||
debugButton.click();
|
||||
const debugLink = container.querySelector(".js-link-debug");
|
||||
debugLink.click();
|
||||
|
||||
const serviceWorkerToolbox = await onToolboxReady;
|
||||
await serviceWorkerToolbox.selectTool("jsdebugger");
|
||||
|
|
|
@ -26,22 +26,17 @@ add_task(async function() {
|
|||
info("Wait until the service worker appears in the application panel");
|
||||
await waitUntil(() => getWorkerContainers(doc).length === 1);
|
||||
|
||||
info("Wait until the start button is displayed and enabled");
|
||||
info("Wait until the start link is displayed and enabled");
|
||||
const container = getWorkerContainers(doc)[0];
|
||||
await waitUntil(() => {
|
||||
const button = container.querySelector(".js-start-button");
|
||||
return button && !button.disabled;
|
||||
});
|
||||
|
||||
info("Click the button and wait for the worker to start");
|
||||
const button = container.querySelector(".js-start-button");
|
||||
button.click();
|
||||
|
||||
info("Wait until status 'Running' is displayed");
|
||||
await waitUntil(() => {
|
||||
const statusEl = container.querySelector(".js-worker-status");
|
||||
return statusEl && statusEl.textContent === "Running";
|
||||
});
|
||||
await waitUntil(() =>
|
||||
container.querySelector(".js-link-start:not(.disabled-link)")
|
||||
);
|
||||
info("Click the link and wait for the worker to start");
|
||||
const link = container.querySelector(".js-link-start");
|
||||
link.click();
|
||||
await waitUntil(
|
||||
() => container.querySelector(".js-worker-status").textContent === "Running"
|
||||
);
|
||||
ok(true, "Worker status is 'Running'");
|
||||
|
||||
await unregisterAllWorkers(target.client);
|
||||
|
@ -64,12 +59,12 @@ add_task(async function() {
|
|||
info("Wait until the service worker appears in the application panel");
|
||||
await waitUntil(() => getWorkerContainers(doc).length === 1);
|
||||
|
||||
info("Wait until the start button is displayed");
|
||||
info("Wait until the start link is displayed");
|
||||
const container = getWorkerContainers(doc)[0];
|
||||
await waitUntil(() => container.querySelector(".js-start-button"));
|
||||
await waitUntil(() => container.querySelector(".js-link-start"));
|
||||
ok(
|
||||
container.querySelector(".js-start-button").disabled,
|
||||
"Start button is disabled"
|
||||
container.querySelector(".js-link-start.disabled-link"),
|
||||
"Start link is disabled"
|
||||
);
|
||||
|
||||
await unregisterAllWorkers(target.client);
|
||||
|
|
Загрузка…
Ссылка в новой задаче