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

Backed out changeset 5ba65c3ad1ff (bug 1496400) for failing devtools' browser_parsable_css.js. CLOSED TREE 

--HG--
extra : rebase_source : f4fce12617b893898023e65d528aa5d9c9b3e716
This commit is contained in:
Sebastian Hengst 2018-10-19 17:17:05 +03:00
Родитель 405c07ddc3
Коммит 3bec943cf1
21 изменённых файлов: 94 добавлений и 304 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

1
devtools/client/aboutdebugging-new/index.html
Просмотреть файл

@ -5,6 +5,7 @@
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" type="text/css"/>
<link rel="stylesheet" href="chrome://devtools/content/aboutdebugging-new/aboutdebugging.css"/>
<script type="application/javascript" src="resource://devtools/client/aboutdebugging-new/initializer.js"></script>
</head>

250
devtools/client/aboutdebugging-new/src/base.css
Просмотреть файл

@ -1,250 +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/. */
:root {
/* Colors from common.css */
--bg-color: #f9f9fa; /* --in-content-background-color */
--text-color: #0c0c0d; /* --in-content-text-color */
--border-color: #d7d7db; /* --in-content-border-color */
--box-background: #fff;
--box-background-hover: #ebebeb;
--box-border-color: #d7d7db;
--category-background-hover: rgba(12,12,13,0.1);
--category-text: rgba(12,12,13);
--category-text-selected: #0a84ff;
--link-color: #0a8dff;
--link-color-active: #003eaa;
--link-color-hover: #0060df;
/* Colors from Photon */
--success-50: #30e60b;
--warning-50: #ffe900;
--error-50: #ff0039;
--highlight-50: #0a84ff;
--grey-30: #d7d7db; /* for ui, no special semantic */
/* Global layout vars */
--page-width: 664px;
--base-distance: 4px;
/* Global styles */
--base-font-style: message-box;
--base-font-size: 15px; /* root font of 11px * 1.36em = 15px */
--base-line-height: 1.8;
--micro-font-size: 11px;
/*
* Variables particular to about:debugging
*/
--alt-heading-icon-size: calc(var(--base-distance) * 6);
--alt-heading-icon-gap: var(--base-distance);
}
/*
* Reset some tags
*/
html {
font: var(--base-font-style);
}
body {
margin: 0;
padding: 0;
color: var(--text-color);
font-size: var(--base-font-size);
background: var(--bg-color);
}
dd {
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-color-hover);
}
a:active {
color: var(--link-color-active);
}
/*
* Utils
*/
/* text that needs to be cut with … */
.ellipsis-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
* Typography
*/
/* Main style for heading (i.e. h1) */
.main-heading {
font-size: 2.5em;
font-weight: lighter;
line-height: 1.2;
color: var(--in-content-text-color);
margin: 0;
margin-bottom: .5em;
}
/* Main style for a subheading (i.e. h2) */
.main-subheading {
line-height: 1.4em;
font-weight: 600;
}
/* Alternative style for a heading (i.e. h1) */
.alt-heading {
font-weight: 300;
font-size: 1.46em;
line-height: 1.2; /* odd value - from common.inc.css */
margin-block-start: 0;
margin-block-end: calc(var(--base-distance) * 4);
}
/* Alternative style for a subheading (i.e. h2). It features an icon */
/* +--------+-------------+
* | [Icon] | Lorem ipsum |
* +--------+-------------+
*/
.alt-subheading {
margin-block-start: calc(var(--base-distance) * 4);
font-weight: 600;
font-size: 1.14em;
line-height: 1.4em; /* odd value - from common.inc.css */
display: grid;
grid-template-columns: var(--alt-heading-icon-size) 1fr;
grid-column-gap: var(--alt-heading-icon-gap);
align-items: center;
}
.alt-subheading__icon {
width: 100%;
fill: currentColor;
-moz-context-properties: fill;
}
/*
* Layout elements
*/
/* for horizontal rules / separators */
.separator {
border-style: solid none none none;
border-color: var(--border-color);
}
/* adds breathing space to the separator */
.separator--breathe {
margin: calc(var(--base-distance) * 4) 0;
}
/* a series of button-like elements, layed out horizontally */
.toolbar {
display: flex;
column-gap: var(--base-distance);
}
/*
Form controls
*/
.default-button, .default-input {
box-sizing: border-box;
font-size: 1em;
}
/* standard, normal button */
.default-button, .default-select {
-moz-appearance: none;
font-size: 1em;
color: var(--text-color);
background-color: var(--page-background);
margin: 0;
height: calc(var(--base-distance) * 8); /* Note: this is from Photon, not common.css */
padding-inline-start: calc(var(--base-distance) * 5);
padding-inline-end: calc(var(--base-distance) * 5);
border: 1px solid var(--box-border-color);
border-radius: calc(var(--base-distance) / 2);
}
.default-button:enabled:hover {
background: var(--box-background-hover)
}
/* smaller size for a default button */
.default-button--micro {
padding-inline-start: calc(2 * var(--base-distance));
padding-inline-end: calc(2 * var(--base-distance));
font-size: var(--micro-font-size);
height: calc(var(--base-distance) * 6);
}
/* standard inputs */
.default-input {
line-height: unset;
padding: 0 calc(var(--base-distance) * 2);
height: 100%;
border: 1px solid var(--box-border-color);
border-radius: 2px;
color: var(--text-color);
background-color: var(--box-background);
}
/*
* Other UI components
*/
/*
* A small, colored badge.
* NOTE: styles borrowed from Photon's micro buttons (there aren't badges)
*/
.badge {
font-size: var(--micro-font-size);
background: var(--grey-30);
border-radius: calc(var(--base-distance) / 2);
padding: var(--base-distance) calc(2 * var(--base-distance));
}
.badge--info {
background: var(--highlight-50);
}
.badge--success {
background: var(--success-50);
}
.badge--warning {
background: var(--yellow-50);
}
.badge--error {
background: var(--error-50);
}

37
devtools/client/aboutdebugging-new/src/components/App.css
Просмотреть файл

@ -53,7 +53,38 @@
width: var(--page-width);
}
.page__section {
margin-block-end: calc(var(--base-distance) * 12);
--section-inline-margin: calc(var(--alt-heading-icon-size) + var(--alt-heading-icon-gap));
.page__title {
/* from common */
font-weight: 300;
font-size: 1.46em;
line-height: 1.3;
margin-block-end: calc(var(--base-distance) * 4);
}
.page__section {
/* from common */
margin-block-end: calc(var(--base-distance) * 12);
--icon-size: calc(var(--base-distance) * 6);
--icon-gap: var(--base-distance);
--section-inline-margin: calc(var(--icon-size) + var(--icon-gap));
}
.page__section__title {
/* from common */
margin-block-start: calc(var(--base-distance) * 4);
font-weight: 600;
font-size: 1.14em;
display: grid;
grid-template-columns: var(--icon-size) 1fr;
grid-column-gap: var(--icon-gap);
align-items: center;
}
.page__section__icon {
width: 100%;
fill: currentColor;
-moz-context-properties: fill;
}

3
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
Просмотреть файл

@ -2,9 +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/. */
/* NOTE: refactor these two rules into a more generic component if we ever need
a main heading with an icon */
.runtime-info {
align-items: center;
display: flex;

2
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
Просмотреть файл

@ -29,7 +29,7 @@ class RuntimeInfo extends PureComponent {
return dom.h1(
{
className: "main-heading runtime-info",
className: "runtime-info",
},
dom.img(
{

4
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
Просмотреть файл

@ -166,7 +166,7 @@ class ConnectPage extends PureComponent {
title: "Via Network Location",
},
NetworkLocationsList({ dispatch, networkLocations }),
dom.hr({ className: "separator separator--breathe" }),
dom.hr({ className: "separator" }),
NetworkLocationsForm({ dispatch }),
)
);
@ -183,7 +183,7 @@ class ConnectPage extends PureComponent {
},
dom.h1(
{
className: "alt-heading",
className: "page__title"
},
"Connect a Device"
)

4
devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
Просмотреть файл

@ -25,11 +25,11 @@ class ConnectSection extends PureComponent {
},
dom.h2(
{
className: "alt-subheading",
className: "page__section__title",
},
dom.img(
{
className: "alt-subheading__icon",
className: "page__section__icon",
src: this.props.icon,
}
),

4
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
Просмотреть файл

@ -53,7 +53,7 @@ class NetworkLocationsForm extends PureComponent {
),
dom.input({
id: "about-debugging-network-locations-host-input",
className: "default-input js-network-form-input",
className: "std-input js-network-form-input",
placeholder: "localhost:6080",
type: "text",
value: this.state.value,
@ -68,7 +68,7 @@ class NetworkLocationsForm extends PureComponent {
},
dom.button(
{
className: "default-button js-network-form-submit-button",
className: "std-button js-network-form-submit-button",
},
"Add"
)

2
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
Просмотреть файл

@ -42,7 +42,7 @@ class NetworkLocationsList extends PureComponent {
},
dom.button(
{
className: "default-button js-network-location-remove-button",
className: "std-button js-network-location-remove-button",
onClick: () => {
this.props.dispatch(Actions.removeNetworkLocation(location));
},

6
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
Просмотреть файл

@ -16,16 +16,14 @@
*/
.debug-target-item {
display: grid;
grid-template-columns: calc(var(--base-distance) * 10) auto max-content;
grid-template-columns: 54px auto max-content;
grid-template-rows: auto auto;
grid-row-gap: calc(var(--base-distance) * 5);
grid-column-gap: calc(var(--base-distance) * 2);
grid-row-gap: 20px;
}
.debug-target-item__icon {
height: 36px;
width: 36px;
justify-self: center;
}
.debug-target-item__info {

2
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
Просмотреть файл

@ -48,7 +48,7 @@ class DebugTargetPane extends PureComponent {
className: "js-debug-target-pane",
},
dom.h2(
{ className: "main-subheading" },
{},
dom.a(
{
className: "debug-target-pane__title js-debug-target-pane-title" +

2
devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js
Просмотреть файл

@ -37,7 +37,7 @@ class InspectAction extends PureComponent {
dom.button(
{
onClick: e => this.inspect(),
className: "default-button",
className: "aboutdebugging-button",
},
"Inspect"
)

9
devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js
Просмотреть файл

@ -61,7 +61,7 @@ class ServiceWorkerAction extends PureComponent {
_renderButton(label, onClick) {
return dom.button(
{
className: "default-button",
className: "aboutdebugging-button",
onClick: e => onClick(),
},
label,
@ -69,12 +69,7 @@ class ServiceWorkerAction extends PureComponent {
}
render() {
return dom.div(
{
className: "toolbar",
},
this._renderAction()
);
return dom.div({}, this._renderAction());
}
}

8
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAction.js
Просмотреть файл

@ -40,9 +40,7 @@ class TemporaryExtensionAction extends PureComponent {
const { dispatch, target } = this.props;
return dom.div(
{
className: "toolbar",
},
{},
InspectAction({ dispatch, target }),
Localized(
{
@ -50,7 +48,7 @@ class TemporaryExtensionAction extends PureComponent {
},
dom.button(
{
className: "default-button",
className: "aboutdebugging-button",
onClick: e => this.reload(),
},
"Reload",
@ -62,7 +60,7 @@ class TemporaryExtensionAction extends PureComponent {
},
dom.button(
{
className: "default-button js-temporary-extension-remove-button",
className: "aboutdebugging-button js-temporary-extension-remove-button",
onClick: e => this.remove(),
},
"Remove",

2
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
Просмотреть файл

@ -37,7 +37,7 @@ class TemporaryExtensionInstaller extends PureComponent {
},
dom.button(
{
className: "default-button js-temporary-extension-install-button",
className: "aboutdebugging-button js-temporary-extension-install-button",
onClick: e => this.install(),
},
"Load Temporary Add-on…"

33
devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css
Просмотреть файл

@ -17,11 +17,36 @@
* +----------------+--------------------+
* | detail name dt | detail value dd |
* +----------------+--------------------+
* | [status] |
* +----------------+
*/
.worker-detail {
display: grid;
grid-template-columns: calc(var(--base-distance) * 15) auto;
margin-block-start: var(--base-distance);
grid-template-columns: 60px auto;
margin-block-start: 4px;
}
/*
* worker-detail__status has a ui like badge and the color change by the status.
* For now, the background-color of running status is palegreen, stopped is lightgrey
* though, might be changed since this is not Photon color.
*/
.worker-detail__status {
border-style: solid;
border-width: 1px;
box-sizing: border-box;
display: inline-block;
font-size: var(--worker-status-font-size);
margin-block-start: 6px;
padding-block-start: 2px;
padding-block-end: 2px;
text-align: center;
}
.worker-detail__status--running {
border-color: limegreen;
background-color: palegreen;
}
.worker-detail__status--stopped {
border-color: grey;
background-color: lightgrey;
}

17
devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
Просмотреть файл

@ -69,18 +69,13 @@ class WorkerDetail extends PureComponent {
const status = this.props.target.details.status.toLowerCase();
const ftlId = this.getStatusFtlId(status);
return dom.dt(
{},
Localized(
{
id: ftlId,
return Localized(
{
className: `worker-detail__status worker-detail__status--${ status }`,
},
dom.div(
},
dom.span(
{
className: `badge ${status === "running" ? "badge--success" : ""}`,
},
status
)
status
)
);
}

2
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
Просмотреть файл

@ -122,7 +122,7 @@ class Sidebar extends PureComponent {
name: "Connect",
})
),
dom.hr({ className: "separator" }),
dom.hr(),
this.renderAdbAddonStatus(),
this.renderDevices()
)

7
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
Просмотреть файл

@ -3,9 +3,10 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
.sidebar-item {
--sidebar-text-color: var(--category-text);
--sidebar-selected-color: var(--category-text-selected);
--sidebar-background-hover: var(--category-background-hover);
/* Import css variables from common.css */
--sidebar-text-color: var(--in-content-category-text);
--sidebar-selected-color: var(--in-content-category-text-selected);
--sidebar-background-hover: var(--in-content-category-background-hover);
}
.sidebar-item {

2
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
Просмотреть файл

@ -40,7 +40,7 @@ class SidebarRuntimeItem extends PureComponent {
},
dom.button(
{
className: "default-button default-button--micro",
className: "sidebar-item__connect-button",
onClick: () => {
const { dispatch, runtimeId } = this.props;
dispatch(Actions.connectRuntime(runtimeId));

1
devtools/client/aboutdebugging-new/src/moz.build
Просмотреть файл

@ -11,7 +11,6 @@ DIRS += [
]
DevToolsModules(
'base.css',
'constants.js',
'create-store.js',
'types.js',