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

Bug 1505124 - UX implementation for the Connect Page. r=daisuke,Ola 

Differential Revision: https://phabricator.services.mozilla.com/D21542

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Belén Albeza 2019-03-15 08:50:03 +00:00
Родитель fb8cd0751d
Коммит cf948bd6b9
23 изменённых файлов: 423 добавлений и 242 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@ -16,6 +16,7 @@
@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeActions.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
@import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";

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

@ -50,6 +50,7 @@
--body-20-font-weight: 700;
--caption-20-font-size: 13px;
--caption-20-font-weight: 400;
--caption-20-color: var(--grey-50);
--display-20-font-size: 36px;
--display-20-font-weight: 200;
--title-20-font-size: 17px;
@ -69,9 +70,10 @@
--message-font-size: 13px; /* Body 10 in Photon - https://design.firefox.com/photon/visuals/typography.html */
--button-font-size: var(--base-font-size);
--micro-font-size: 11px;
--monospace-font-family: monospace;
--card-separator-color: var(--grey-20);
/*
* Variables particular to about:debugging
*/
@ -127,7 +129,6 @@ p, h1 {
margin: 0;
}
/*
* Utils
*/
@ -149,6 +150,13 @@ p, h1 {
-moz-user-select: none;
}
/* Links that need to look like current text */
.undecorated-link,
.undecorated-link:hover {
text-decoration: none;
color: currentColor;
}
/*
* Typography
*/
@ -194,9 +202,8 @@ p, h1 {
/* 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 */
font-weight: var(--title-20-font-weight);
font-size: var(--title-20-font-size);
margin-block-start: 0;
margin-block-end: calc(var(--base-unit) * 4);
@ -254,20 +261,51 @@ Form controls
font-size: 1em;
}
/* standard, normal button */
.default-button {
/* Buttons from Photon */
.default-button, .primary-button {
-moz-appearance: none;
color: var(--grey-90); /* Note: this is from Photon Default button */
background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
font-size: var(--button-font-size); /* Note: this is from Photon Default button */
margin: 0;
height: calc(var(--base-unit) * 8); /* Note: this is from Photon, not common.css */
height: calc(var(--base-unit) * 8);
padding-inline-start: calc(var(--base-unit) * 5);
padding-inline-end: calc(var(--base-unit) * 5);
border: none;
border-radius: calc(var(--base-unit) / 2);
font-size: var(--button-font-size);
}
/* Disabled state for buttons from Photon */
.default-button:disabled, .primary-button:disabled {
opacity: 0.4;
}
/* Smaller variant size for buttons, from Photon */
.default-button--micro, .primary-button--micro {
padding-inline-start: calc(2 * var(--base-unit));
padding-inline-end: calc(2 * var(--base-unit));
font-size: var(--micro-font-size);
height: calc(var(--base-unit) * 6);
}
/* Photon button representing a primary action */
.primary-button {
color: var(--white-100);
background-color: var(--blue-60);
}
.primary-button:enabled:hover {
background-color: var(--blue-70);
}
.primary-button:enabled:active {
background-color: var(--blue-80);
}
/* Photon standard button */
.default-button {
color: var(--grey-90); /* Note: this is from Photon Default button */
background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
}
.default-button:enabled:hover {
@ -278,19 +316,7 @@ Form controls
background: var(--grey-90-a30); /* Note: this is from Photon Default button */
}
.default-button:disabled {
opacity: 0.4; /* Note: this is from Photon Default button */
}
/* smaller size for a default button */
.default-button--micro {
padding-inline-start: calc(2 * var(--base-unit));
padding-inline-end: calc(2 * var(--base-unit));
font-size: var(--micro-font-size);
height: calc(var(--base-unit) * 6);
}
/* ghost button. icon button with no background from Photon guidelines */
/* Photon ghost button. Icon button with no background */
.ghost-button {
border: none;
border-radius: calc(var(--base-unit) / 2);
@ -310,7 +336,7 @@ Form controls
background-color: var(--grey-40);
}
/* standard inputs */
/* Standard inputs */
.default-input {
line-height: unset;
padding: 0 calc(var(--base-unit) * 2);
@ -322,8 +348,8 @@ Form controls
background-color: var(--box-background);
}
/* Standard checkbox, from Photon */
.default-checkbox {
/* Note: this styles are from Photon, not common.css */
height: calc(var(--base-unit) * 4);
margin-inline-end: var(--base-unit);
width: calc(var(--base-unit) * 4);
@ -361,18 +387,15 @@ Form controls
}
/*
* Card style which is used in debug target item and so on.
* Card UI, from Photon
*/
.card {
background-color: var(--white-100); /* from common.inc.css */
border-radius: var(--base-unit); /* from common.inc.css */
box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
}
.undecorated-link,
.undecorated-link:hover {
text-decoration: none;
color: currentColor;
.card__heading {
font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
}

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

@ -53,8 +53,3 @@
.page {
max-width: var(--page-width);
}
.page__section {
margin-block-end: calc(var(--base-unit) * 12);
--section-inline-margin: calc(var(--alt-heading-icon-size) + var(--alt-heading-icon-gap));
}

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

@ -130,7 +130,7 @@ class App extends PureComponent {
return Switch(
{},
Route({
path: "/connect",
path: "/setup",
render: () => this.renderConnect(),
}),
Route({
@ -142,7 +142,7 @@ class App extends PureComponent {
// in this case maybe we'd like to do something else than a redirect.
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1509897
Route({
render: () => Redirect({ to: "/connect"}),
render: () => Redirect({ to: "/setup"}),
})
);
}

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

@ -2,10 +2,42 @@
* 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/. */
.connect-page__usb__toggle-button {
margin-top: calc(var(--base-unit) * 4);
}
.connect-page__disabled-section {
color: var(--grey-40);
}
.connect-page__breather {
margin-block-start: calc(var(--base-unit) * 6);
}
/*
* +--------+----------------------+
* | USB | |<button> |
* +--------+ | |
* | status | | |
* +--------+----------------------+
*/
.connect-page__usb-section__heading {
display: grid;
align-items: center;
grid-template-areas: "title . toggle"
"status . toggle";
grid-template-columns: auto 1fr auto;
grid-column-gap: calc(var(--base-unit) * 2);
}
.connect-page__usb-section__heading__toggle {
grid-area: toggle;
}
.connect-page__usb-section__heading__title {
grid-area: title;
line-height: 1;
}
.connect-page__usb-section__heading__status {
grid-area: status;
line-height: 1;
font-size: var(--caption-20-font-size);
font-weight: var(--caption-20-font-weight);
color: var(--caption-20-color);
}

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

@ -19,16 +19,16 @@ const Actions = require("../../actions/index");
loader.lazyRequireGetter(this, "ADB_ADDON_STATES", "devtools/shared/adb/adb-addon", true);
const Link = createFactory(require("devtools/client/shared/vendor/react-router-dom").Link);
const ConnectSection = createFactory(require("./ConnectSection"));
const ConnectSteps = createFactory(require("./ConnectSteps"));
const NetworkLocationsForm = createFactory(require("./NetworkLocationsForm"));
const NetworkLocationsList = createFactory(require("./NetworkLocationsList"));
const { PREFERENCES, PAGE_TYPES } = require("../../constants");
const { PREFERENCES, PAGE_TYPES, RUNTIMES } = require("../../constants");
const Types = require("../../types/index");
const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
const WIFI_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-usb-icon.svg";
const GLOBE_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
class ConnectPage extends PureComponent {
@ -50,45 +50,6 @@ class ConnectPage extends PureComponent {
this.props.dispatch(Actions.selectPage(PAGE_TYPES.CONNECT));
}
renderWifi() {
const { getString, wifiEnabled } = this.props;
return Localized(
{
id: "about-debugging-connect-wifi",
attrs: { title: true },
},
ConnectSection(
{
icon: WIFI_ICON_SRC,
title: "Via WiFi",
},
wifiEnabled
? ConnectSteps(
{
steps: [
getString("about-debugging-connect-wifi-step-same-network"),
getString("about-debugging-connect-wifi-step-open-firefox"),
getString("about-debugging-connect-wifi-step-open-options"),
getString("about-debugging-connect-wifi-step-enable-debug"),
],
})
: Localized(
{
id: "about-debugging-connect-wifi-disabled",
$pref: PREFERENCES.WIFI_ENABLED,
},
dom.div(
{
className: "connect-page__disabled-section",
},
"about-debugging-connect-wifi-disabled"
)
)
)
);
}
onToggleUSBClick() {
const { adbAddonStatus } = this.props;
const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
@ -110,13 +71,33 @@ class ConnectPage extends PureComponent {
}
}
renderUsbStatus() {
const statusTextId = {
[USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-status-enabled",
[USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-status-disabled",
[USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-status-updating",
}[this.getUsbStatus()];
return Localized(
{
id: statusTextId,
},
dom.span(
{
className: "connect-page__usb-section__heading__status",
},
statusTextId,
),
);
}
renderUsbToggleButton() {
const usbStatus = this.getUsbStatus();
const localizedStates = {
[USB_STATES.ENABLED_USB]: "about-debugging-connect-usb-disable-button",
[USB_STATES.DISABLED_USB]: "about-debugging-connect-usb-enable-button",
[USB_STATES.UPDATING_USB]: "about-debugging-connect-usb-updating-button",
[USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-disable-button",
[USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-enable-button",
[USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-updating-button",
};
const localizedState = localizedStates[usbStatus];
@ -130,7 +111,7 @@ class ConnectPage extends PureComponent {
dom.button(
{
className:
"default-button connect-page__usb__toggle-button " +
"default-button connect-page__usb-section__heading__toggle " +
"js-connect-usb-toggle-button",
disabled,
onClick: () => this.onToggleUSBClick(),
@ -143,40 +124,58 @@ class ConnectPage extends PureComponent {
renderUsb() {
const { adbAddonStatus, getString } = this.props;
const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
return Localized(
return ConnectSection(
{
id: "about-debugging-connect-usb",
attrs: { title: true },
},
ConnectSection(
{
icon: USB_ICON_SRC,
title: "Via USB",
},
isAddonInstalled
? ConnectSteps(
{
steps: [
getString("about-debugging-connect-usb-step-enable-dev-menu"),
getString("about-debugging-connect-usb-step-enable-debug"),
getString("about-debugging-connect-usb-step-plug-device"),
],
}
)
: Localized(
{
id: "about-debugging-connect-usb-disabled",
},
dom.aside(
icon: USB_ICON_SRC,
title: dom.div(
{
className: "connect-page__usb-section__heading",
},
Localized(
{ id: "about-debugging-setup-usb-title" },
dom.span(
{
className: "js-connect-usb-disabled-message",
className: "connect-page__usb-section__heading__title",
},
"Enabling this will download and add the required Android USB debugging " +
"components to Firefox."
)
"USB",
),
),
this.renderUsbToggleButton()
)
this.renderUsbStatus(),
this.renderUsbToggleButton(),
),
},
isAddonInstalled
? ConnectSteps(
{
steps: [
{
localizationId: "about-debugging-setup-usb-step-enable-dev-menu",
url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
},
{
localizationId: "about-debugging-setup-usb-step-enable-debug",
url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
},
{
localizationId: "about-debugging-setup-usb-step-enable-debug-firefox",
url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
},
{ localizationId: "about-debugging-setup-usb-step-plug-device" },
],
}
)
: Localized(
{
id: "about-debugging-setup-usb-disabled",
},
dom.aside(
{
className: "js-connect-usb-disabled-message",
},
"Enabling this will download and add the required Android USB debugging " +
"components to Firefox."
)
),
);
}
@ -190,33 +189,31 @@ class ConnectPage extends PureComponent {
},
ConnectSection(
{
className: "connect-page__network",
className: "connect-page__breather",
icon: GLOBE_ICON_SRC,
title: "Via Network Location",
},
...(networkEnabled
? [
title: "Network Location",
extraContent: networkEnabled
? dom.div(
{},
NetworkLocationsList({ dispatch, networkLocations }),
dom.hr({ className: "separator separator--breathe" }),
NetworkLocationsForm({ dispatch }),
]
: [
// We are using an array for this single element because of the spread
// operator (...). The spread operator avoids React warnings about missing
// keys.
Localized(
{
id: "about-debugging-connect-network-disabled",
$pref: PREFERENCES.NETWORK_ENABLED,
},
dom.div(
{
className: "connect-page__disabled-section",
},
"about-debugging-connect-network-disabled"
)
),
])
)
: null,
},
networkEnabled
? null
: Localized(
{
id: "about-debugging-connect-network-disabled",
$pref: PREFERENCES.NETWORK_ENABLED,
},
dom.div(
{
className: "connect-page__disabled-section",
},
"about-debugging-connect-network-disabled"
)
),
)
);
}
@ -234,12 +231,65 @@ class ConnectPage extends PureComponent {
{
className: "alt-heading",
},
"Connect a Device"
"Setup"
),
),
Localized(
{
id: "about-debugging-setup-intro",
},
dom.p(
{},
"Configure the connection method you wish to remotely debug your device with."
)
),
this.renderWifi(),
this.renderUsb(),
this.renderNetwork()
Localized(
{
id: "about-debugging-setup-link-android-devices",
},
dom.p(
{},
dom.a(
{
href: "https://support.mozilla.org/kb/will-firefox-work-my-mobile-device#w_android-devices",
target: "_blank",
},
"View list of supported android devices"
)
),
),
Localized(
{
id: "about-debugging-setup-this-firefox",
a: Link({
to: `/runtime/${RUNTIMES.THIS_FIREFOX}`,
}),
},
dom.p(
{
className: "connect-page__breather",
},
"about-debugging-setup-this-firefox",
),
),
dom.section(
{
className: "connect-page__breather",
},
Localized(
{
id: "about-debugging-setup-connect-heading",
},
dom.h1(
{
className: "alt-heading",
},
"Connect a device",
),
),
this.renderUsb(),
this.renderNetwork()
),
);
}
}

48
devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css Normal file
Просмотреть файл

@ -0,0 +1,48 @@
/* 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/. */
.connect-section {
--icon-size: calc(var(--base-unit) * 9);
--header-col-gap: calc(var(--base-unit) * 2);
}
/*
* +--------+----------------+
* | <icon> | <heading> 1fr |
* +--------+----------------+
*/
.connect-section__header {
display: grid;
grid-template-areas: "icon heading";
grid-template-columns: auto 1fr;
grid-template-rows: var(--icon-size);
grid-column-gap: var(--header-col-gap);
align-items: center;
padding-block: calc(var(--base-unit) * 4);
padding-inline: calc(var(--base-unit) * 5);
}
.connect-section__header__title {
grid-area: heading;
}
.connect-section__header__icon {
grid-area: icon;
width: var(--icon-size);
height: var(--icon-size);
}
.connect-section__content {
line-height: 1.5;
padding-inline-start: calc(var(--base-unit) * 5
+ var(--header-col-gap) + var(--icon-size));
padding-inline-end: calc(var(--base-unit) * 5);
padding-block-end: calc(var(--base-unit) * 4);
}
.connect-section__extra {
border-block-start: 1px solid var(--card-separator-color);
padding-block-end: calc(var(--base-unit) * 4);
}

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

@ -11,31 +11,57 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
class ConnectSection extends PureComponent {
static get propTypes() {
return {
children: PropTypes.node.isRequired,
children: PropTypes.node,
className: PropTypes.string,
extraContent: PropTypes.node,
icon: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
title: PropTypes.node.isRequired,
};
}
render() {
renderExtraContent() {
const { extraContent } = this.props;
return dom.section(
{
className: `page__section ${this.props.className || ""}`,
className: "connect-section__extra",
},
dom.h2(
extraContent,
);
}
render() {
const { extraContent } = this.props;
return dom.section(
{
className: `card connect-section ${this.props.className || ""}`,
},
dom.header(
{
className: "alt-subheading",
className: "connect-section__header",
},
dom.img(
{
className: "alt-subheading__icon",
className: "connect-section__header__icon",
src: this.props.icon,
}
},
),
dom.h1(
{
className: "card__heading connect-section__header__title",
},
this.props.title,
),
this.props.title
),
this.props.children
? dom.div(
{
className: "connect-section__content",
},
this.props.children
)
: null,
extraContent ? this.renderExtraContent() : null,
);
}
}

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

@ -5,7 +5,7 @@
.connect-page__step-list {
list-style-type: decimal;
list-style-position: outside;
margin-inline-start: calc(var(--section-inline-margin) + var(--base-unit) * 4);
margin-inline-start: calc(var(--base-unit) * 4);
}
.connect-page__step {

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

@ -4,14 +4,22 @@
"use strict";
const { PureComponent } = require("devtools/client/shared/vendor/react");
const { PureComponent, createFactory } = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
class ConnectSteps extends PureComponent {
static get propTypes() {
return {
steps: PropTypes.arrayOf(PropTypes.string).isRequired,
steps: PropTypes.arrayOf(
PropTypes.shape({
localizationId: PropTypes.string.isRequired,
url: PropTypes.string,
}).isRequired,
),
};
}
@ -20,12 +28,23 @@ class ConnectSteps extends PureComponent {
{
className: "connect-page__step-list",
},
this.props.steps.map(step => dom.li(
{
className: "connect-page__step",
key: step,
},
step)
this.props.steps.map(step =>
Localized(
{
id: step.localizationId,
a: step.url ? dom.a({
href: step.url,
target: "_blank",
}) : null,
},
dom.li(
{
className: "connect-page__step",
key: step,
},
step
)
)
)
);
}

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

@ -14,4 +14,6 @@
grid-column-gap: calc(var(--base-unit) * 2);
grid-template-columns: auto 1fr auto;
align-items: center;
padding-block-start: calc(var(--base-unit) * 4);
padding-inline: calc(var(--base-unit) * 6);
}

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

@ -68,7 +68,7 @@ class NetworkLocationsForm extends PureComponent {
},
dom.button(
{
className: "default-button js-network-form-submit-button",
className: "primary-button js-network-form-submit-button",
},
"Add"
)

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

@ -9,8 +9,12 @@
* | Location (eg localhost:8080) | Remove button |
* +-------------------------------------+---------------+
*/
.connect-page__network-location {
.network-location {
display: grid;
grid-template-columns: auto max-content;
margin: calc(var(--base-unit) * 2) 0;
}
align-items: center;
padding-block: calc(var(--base-unit) * 2);
padding-inline: calc(var(--base-unit) * 6);
border-bottom: 1px solid var(--card-separator-color);
}

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

@ -28,7 +28,7 @@ class NetworkLocationsList extends PureComponent {
this.props.networkLocations.map(location =>
dom.li(
{
className: "connect-page__network-location js-network-location",
className: "network-location js-network-location",
key: location,
},
dom.span(
@ -48,29 +48,17 @@ class NetworkLocationsList extends PureComponent {
this.props.dispatch(Actions.removeNetworkLocation(location));
},
},
"Remove"
)
"Remove",
),
)
)
)
);
}
renderEmpty() {
return Localized(
{
id: "about-debugging-network-locations-empty-text",
},
dom.p(
{},
"No network locations have been added yet."
)
);
}
render() {
return this.props.networkLocations.length > 0 ?
this.renderList() : this.renderEmpty();
this.renderList() : null;
}
}

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

@ -5,6 +5,7 @@
DevToolsModules(
'ConnectPage.css',
'ConnectPage.js',
'ConnectSection.css',
'ConnectSection.js',
'ConnectSteps.css',
'ConnectSteps.js',

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

@ -19,6 +19,9 @@
grid-template-areas: "icon name action"
". detail detail";
margin-block-end: calc(var(--base-unit) * 4);
padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
}
.debug-target-item__icon {

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

@ -21,7 +21,7 @@ const SidebarFixedItem = createFactory(require("./SidebarFixedItem"));
const SidebarRuntimeItem = createFactory(require("./SidebarRuntimeItem"));
const RefreshDevicesButton = createFactory(require("./RefreshDevicesButton"));
const FIREFOX_ICON = "chrome://devtools/skin/images/aboutdebugging-firefox-logo.svg";
const CONNECT_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
const CONNECT_ICON = "chrome://devtools/skin/images/settings.svg";
const GLOBE_ICON = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
const USB_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
@ -133,14 +133,14 @@ class Sidebar extends PureComponent {
dom.ul(
{},
Localized(
{ id: "about-debugging-sidebar-connect", attrs: { name: true } },
{ id: "about-debugging-sidebar-setup", attrs: { name: true } },
SidebarFixedItem({
dispatch,
icon: CONNECT_ICON,
isSelected: PAGE_TYPES.CONNECT === selectedPage,
key: PAGE_TYPES.CONNECT,
name: "Connect",
to: "/connect",
name: "Setup",
to: "/setup",
})
),
Localized(

2
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
Просмотреть файл

@ -17,7 +17,7 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const connectSidebarItem = findSidebarItemByText("Connect", document);
const connectSidebarItem = findSidebarItemByText("Setup", document);
const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
ok(connectSidebarItem, "Found the Connect sidebar item");

2
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
Просмотреть файл

@ -22,7 +22,7 @@ add_task(async function() {
const AboutDebugging = window.AboutDebugging;
await selectThisFirefoxPage(document, AboutDebugging.store);
const connectSidebarItem = findSidebarItemByText("Connect", document);
const connectSidebarItem = findSidebarItemByText("Setup", document);
const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
ok(connectSidebarItem, "Found the Connect sidebar item");

24
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
Просмотреть файл

@ -4,12 +4,12 @@
"use strict";
/**
* Test that the initial route is /connect
* Test that the initial route is /setup
*/
add_task(async function() {
info("Check root route redirects to connect page");
info("Check root route redirects to setup page");
const { document, tab } = await openAboutDebugging();
is(document.location.hash, "#/connect");
is(document.location.hash, "#/setup");
await removeTab(tab);
});
@ -36,14 +36,14 @@ add_task(async function() {
"Checking title for 'runtime' page"
);
info("Check 'Connect' page");
document.location.hash = "#/connect";
info("Check 'Setup' page");
document.location.hash = "#/setup";
await waitUntil(() => document.querySelector(".js-connect-page"));
ok(true, "Connect page has been shown");
ok(true, "Setup page has been shown");
is(
document.title,
"Debugging - Connect",
"Checking title for 'connect' page"
"Debugging - Setup",
"Checking title for 'setup' page"
);
info("Check 'USB device runtime' page");
@ -75,7 +75,7 @@ add_task(async function() {
info("Check an invalid route redirects to root");
const { document, tab } = await openAboutDebugging();
info("Waiting for a non connect page to load");
info("Waiting for a non setup page to load");
document.location.hash = "#/runtime/this-firefox";
await waitUntil(() => document.querySelector(".js-runtime-page"));
@ -84,10 +84,10 @@ add_task(async function() {
await waitUntil(() => document.querySelector(".js-connect-page"));
is(
document.title,
"Debugging - Connect",
"Checking title for 'connect' page"
"Debugging - Setup",
"Checking title for 'setup' page"
);
is(document.location.hash, "#/connect", "Redirected to root");
is(document.location.hash, "#/setup", "Redirected to root");
await removeTab(tab);
});

2
devtools/client/aboutdebugging-new/test/browser/head.js
Просмотреть файл

@ -197,7 +197,7 @@ async function selectThisFirefoxPage(doc, store) {
async function selectConnectPage(doc) {
const sidebarItems = doc.querySelectorAll(".js-sidebar-item");
const connectSidebarItem = [...sidebarItems].find(element => {
return element.textContent === "Connect";
return element.textContent === "Setup";
});
ok(connectSidebarItem, "Sidebar contains a Connect item");
const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");

60
devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
Просмотреть файл

@ -17,8 +17,8 @@ about-debugging-sidebar-this-firefox =
.name = { about-debugging-this-firefox-runtime-name }
# Sidebar heading for connecting to some remote source
about-debugging-sidebar-connect =
.name = Connect
about-debugging-sidebar-setup =
.name = Setup
# Text displayed in the about:debugging sidebar when USB devices discovery is enabled.
about-debugging-sidebar-usb-enabled = USB enabled
@ -60,51 +60,39 @@ about-debugging-sidebar-runtime-item-name-no-device =
# UI, do not localize.
about-debugging-refresh-usb-devices-button = Refresh devices
# Title of the Connect page.
about-debugging-connect-title = Connect a Device
# Title of the Setup page.
about-debugging-connect-title = Setup
# WiFi section of the Connect page
about-debugging-connect-wifi =
.title = Via WiFi
# Explanatory text in the Setup page about what the 'This Firefox' page is for
about-debugging-setup-this-firefox = Use <a>This Firefox</a> to debug tags, extensions and service workers on this version of Firefox.
# Temporary text displayed when wifi support is turned off via preferences.
# { $pref } is the name of the preference that enables wifi
# Do not localize
about-debugging-connect-wifi-disabled = WiFi debugging currently under development. You can enable it with the preference “{ $pref }”.
# USB section of the Setup page
about-debugging-setup-usb-title = USB
about-debugging-setup-usb-disabled = Enabling this will download and add the required Android USB debugging components to Firefox.
about-debugging-setup-usb-enable-button = Enable USB Devices
about-debugging-setup-usb-disable-button = Disable USB Devices
about-debugging-setup-usb-updating-button = Updating…
# WiFi section step by step guide
about-debugging-connect-wifi-step-same-network = Ensure that your browser and device are on the same network
# WiFi section step by step guide
about-debugging-connect-wifi-step-open-firefox = Open Firefox for Android
# WiFi section step by step guide
about-debugging-connect-wifi-step-open-options = Go to Options -> Settings -> Advanced
# WiFi section step by step guide
about-debugging-connect-wifi-step-enable-debug = Enable Remote Debugging via WiFi in the Developer Tools section
# USB section of the Connect page
about-debugging-connect-usb =
.title = Via USB
about-debugging-connect-usb-disabled = Enabling this will download and add the required Android USB debugging components to Firefox.
about-debugging-connect-usb-enable-button = Enable USB Devices
about-debugging-connect-usb-disable-button = Disable USB Devices
about-debugging-connect-usb-updating-button = Updating…
# USB section of the Setup page (USB status)
about-debugging-setup-usb-status-enabled = Enabled
about-debugging-setup-usb-status-disabled = Disabled
about-debugging-setup-usb-status-updating = Updating…
# USB section step by step guide
about-debugging-connect-usb-step-enable-dev-menu = Enable Developer menu on your Android device
about-debugging-setup-usb-step-enable-dev-menu = Enable Developer menu on your Android device. <a>Learn how</a>
# USB section step by step guide
about-debugging-connect-usb-step-enable-debug = Enable USB Debugging on the Android Developer Menu
about-debugging-setup-usb-step-enable-debug = Enable USB Debugging in the Android Developer Menu. <a>Learn how</a>
# USB section step by step guide
about-debugging-connect-usb-step-plug-device = Connect the USB Device to your computer
about-debugging-setup-usb-step-enable-debug-firefox = Enable USB Debugging in Firefox on the Android device. <a>Learn how</a>
# USB section step by step guide
about-debugging-setup-usb-step-plug-device = Connect the Android device to your computer.
# Network section of the Connect page
about-debugging-connect-network =
.title = Via Network Location
.title = Network Location
# Temporary text displayed when network location support is turned off via preferences.
# { $pref } is the name of the preference that enables network locations
@ -289,7 +277,7 @@ about-debugging-connection-prompt-disable-button = Disable connection prompt
# Part of "about-debugging-page-title" string defined below
about-debugging-page-title-selected-page =
{ $selectedPage ->
[connect] Connect
[connect] Setup
*[runtime] Runtime
}

1
devtools/client/themes/variables.css
Просмотреть файл

@ -223,6 +223,7 @@
--blue-55: #0074e8;
--blue-60: #0060df;
--blue-70: #003eaa;
--blue-80: #002275;
--teal-60: #00c8d7;
--teal-70: #008ea4;