Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-22 09:45:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out changeset 4dd499946b35 (bug 1557694) for causing failures in browser_parsable_css.js CLOSED TREE

Browse Source
This commit is contained in:
Mihai Alexandru Michis 2019-07-22 17:51:14 +03:00
parent 70e1a770b5
commit a4db5efa81
10 changed files with 55 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
devtools/client/application/application.css
View File

@ -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,

10
devtools/client/application/src/base.css
View File

@ -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;

4
devtools/client/application/src/components/Worker.css
View File

@ -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 > * {

52
devtools/client/application/src/components/Worker.js
View File

@ -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
)
)
);

4
devtools/client/application/src/components/moz.build
View File

@ -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',

71
devtools/client/application/src/components/ui/UIButton.css
View File

@ -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);
}

33
devtools/client/application/src/components/ui/UIButton.js
View File

@ -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;

8
devtools/client/application/src/components/ui/moz.build
View File

@ -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',
)

15
devtools/client/application/test/browser/browser_application_panel_debug-service-worker.js
View File

@ -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");

33
devtools/client/application/test/browser/browser_application_panel_start-service-worker.js
View File

@ -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);