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

Backed out 3 changesets (bug 1552067, bug 1518808) as per yzen`s req . CLOSED TREE 

Backed out changeset e677852d2ea5 (bug 1518808)
Backed out changeset d60bcc3b1c72 (bug 1552067)
Backed out changeset 2cee1703625e (bug 1552067)

--HG--
rename : devtools/client/themes/images/error-small.svg => devtools/client/themes/images/webconsole/error.svg
rename : devtools/client/themes/images/info-small.svg => devtools/client/themes/images/webconsole/info.svg
This commit is contained in:
Narcis Beleuzu 2019-07-04 02:21:44 +03:00
Родитель 12163ca397
Коммит 60d6348455
40 изменённых файлов: 1242 добавлений и 2234 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@ -204,7 +204,7 @@ button {
height: 12px;
vertical-align: 0;
margin-inline-end: 8px;
background-image: url(chrome://devtools/skin/images/alert-small.svg);
background-image: url(chrome://devtools/skin/images/alert.svg);
background-repeat: no-repeat;
background-size: contain;
}

5
devtools/client/accessibility/accessibility-view.js
Просмотреть файл

@ -52,9 +52,8 @@ AccessibilityView.prototype = {
* @param {JSON} supports a collection of flags indicating which accessibility
* panel features are supported by the current serverside
* version.
* @param {Array} fluentBundles array of FluentBundles elements for localization
*/
async initialize(accessibility, walker, supports, fluentBundles) {
async initialize(accessibility, walker, supports) {
// Make sure state is reset every time accessibility panel is initialized.
await this.store.dispatch(reset(accessibility, supports));
const container = document.getElementById("content");
@ -64,7 +63,7 @@ AccessibilityView.prototype = {
return;
}
const mainFrame = MainFrame({ accessibility, walker, fluentBundles });
const mainFrame = MainFrame({ accessibility, walker });
// Render top level component
const provider = createElement(Provider, { store: this.store }, mainFrame);
this.mainFrame = ReactDOM.render(provider, container);

44
devtools/client/accessibility/accessibility.css
Просмотреть файл

@ -28,7 +28,6 @@
--accessible-label-color: var(--grey-60);
/* Similarly to webconsole, add more padding before the toolbar group. */
--separator-inline-margin: 5px;
--accessibility-code-background: var(--grey-20);
}
:root.theme-dark {
@ -43,7 +42,6 @@
--accessible-label-background-color: var(--grey-80);
--accessible-label-border-color: var(--grey-50);
--accessible-label-color: var(--grey-40);
--accessibility-code-background: var(--grey-70);
}
/* General */
@ -662,31 +660,8 @@ body {
white-space: initial;
}
/* Checks */
.accessibility-check code {
background-color: var(--accessibility-code-background);
border-radius: 2px;
box-decoration-break: clone;
padding: 0 4px;
}
.accessibility-text-label-check .icon {
display: inline;
-moz-context-properties: fill;
vertical-align: top;
margin-block-start: 2px;
margin-inline-end: 4px;
}
.accessibility-text-label-check .icon.fail {
fill: var(--theme-icon-error-color);
}
.accessibility-text-label-check .icon.WARNING {
fill: var(--theme-icon-warning-color);
}
.accessibility-check,
/* Color Contrast */
.accessibility-color-contrast-check,
.accessibility-color-contrast {
position: relative;
display: flex;
@ -694,7 +669,7 @@ body {
height: inherit;
}
.accessibility-check {
.accessibility-color-contrast-check {
flex-direction: column;
padding: 4px var(--accessibility-horizontal-indent);
line-height: 20px;
@ -704,21 +679,20 @@ body {
align-items: baseline;
}
.accessibility-check-header {
.accessibility-color-contrast-header {
margin: 0;
font-weight: bold;
font-size: var(--accessibility-font-size);
line-height: var(--accessibility-toolbar-height);
}
.accessibility-check-annotation {
display: inline;
.accessibility-color-contrast-annotation {
margin: 0;
white-space: normal;
color: var(--accessible-label-color);
}
.accessibility-check-annotation .link {
.accessibility-color-contrast-annotation .link {
color: var(--accessibility-link-color);
cursor: pointer;
outline: 0;
@ -726,16 +700,16 @@ body {
font-style: normal;
}
.accessibility-check-annotation .link:hover:not(:focus) {
.accessibility-color-contrast-annotation .link:hover:not(:focus) {
text-decoration: underline;
}
.accessibility-check-annotation .link:focus:not(:active) {
.accessibility-color-contrast-annotation .link:focus:not(:active) {
box-shadow: 0 0 0 2px var(--accessibility-toolbar-focus), 0 0 0 4px var(--accessibility-toolbar-focus-alpha30);
border-radius: 2px;
}
.accessibility-check-annotation .link:active {
.accessibility-color-contrast-annotation .link:active {
color: var(--accessibility-link-color-active);
text-decoration: underline;
}

5
devtools/client/accessibility/components/Checks.js
Просмотреть файл

@ -12,7 +12,6 @@ const { div } = require("devtools/client/shared/vendor/react-dom-factories");
const List = createFactory(require("devtools/client/shared/components/List").List);
const ColorContrastCheck =
createFactory(require("./ColorContrastAccessibility").ColorContrastCheck);
const TextLabelCheck = createFactory(require("./TextLabelCheck"));
const { L10N } = require("../utils/l10n");
const { accessibility: { AUDIT_TYPE } } = require("devtools/shared/constants");
@ -40,10 +39,6 @@ class Checks extends Component {
return ColorContrastCheck(contrastRatio);
}
[AUDIT_TYPE.TEXT_LABEL](textLabelCheck) {
return TextLabelCheck(textLabelCheck);
}
render() {
const { audit, labelledby } = this.props;
if (!audit) {

6
devtools/client/accessibility/components/ColorContrastAccessibility.js
Просмотреть файл

@ -152,7 +152,7 @@ class ContrastAnnotationClass extends Component {
return (
LearnMoreLink(
{
className: "accessibility-check-annotation",
className: "accessibility-color-contrast-annotation",
href: A11Y_CONTRAST_LEARN_MORE_LINK,
learnMoreStringKey: "accessibility.learnMore",
l10n: L10N,
@ -178,10 +178,10 @@ class ColorContrastCheck extends Component {
return (
div({
role: "presentation",
className: "accessibility-check",
className: "accessibility-color-contrast-check",
},
h3({
className: "accessibility-check-header",
className: "accessibility-color-contrast-header",
}, L10N.getStr("accessibility.contrast.header")),
ColorContrastAccessibility(this.props),
!error && ContrastAnnotation(this.props)

15
devtools/client/accessibility/components/MainFrame.js
Просмотреть файл

@ -12,10 +12,6 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { reset } = require("../actions/ui");
// Localization
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
// Constants
const { SIDEBAR_WIDTH, PORTRAIT_MODE_WIDTH } = require("../constants");
@ -35,7 +31,6 @@ class MainFrame extends Component {
static get propTypes() {
return {
accessibility: PropTypes.object.isRequired,
fluentBundles: PropTypes.array.isRequired,
walker: PropTypes.object.isRequired,
enabled: PropTypes.bool.isRequired,
dispatch: PropTypes.func.isRequired,
@ -96,7 +91,7 @@ class MainFrame extends Component {
* Render Accessibility panel content
*/
render() {
const { accessibility, walker, fluentBundles, enabled, auditing } = this.props;
const { accessibility, walker, enabled, auditing } = this.props;
if (!enabled) {
return Description({ accessibility });
@ -105,7 +100,7 @@ class MainFrame extends Component {
// Audit is currently running.
const isAuditing = auditing.length > 0;
return LocalizationProvider({ messages: fluentBundles },
return (
div({ className: "mainFrame", role: "presentation" },
Toolbar({ accessibility, walker }),
isAuditing && AuditProgressOverlay(),
@ -127,10 +122,8 @@ class MainFrame extends Component {
}, AccessibilityTree({ walker })),
endPanel: RightSidebar({ walker }),
vert: this.useLandscapeMode,
})
),
)
);
})),
));
}
}

335
devtools/client/accessibility/components/TextLabelCheck.js
Просмотреть файл

@ -1,335 +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/. */
"use strict";
// React
const { Component, createFactory } = require("devtools/client/shared/vendor/react");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const ReactDOM = require("devtools/client/shared/vendor/react-dom-factories");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
const { openDocLink } = require("devtools/client/shared/link");
const { A11Y_TEXT_LABEL_LINKS } = require("../constants");
const {
accessibility: {
AUDIT_TYPE: { TEXT_LABEL },
ISSUE_TYPE: {
[TEXT_LABEL]: {
AREA_NO_NAME_FROM_ALT,
DIALOG_NO_NAME,
DOCUMENT_NO_TITLE,
EMBED_NO_NAME,
FIGURE_NO_NAME,
FORM_FIELDSET_NO_NAME,
FORM_FIELDSET_NO_NAME_FROM_LEGEND,
FORM_NO_NAME,
FORM_NO_VISIBLE_NAME,
FORM_OPTGROUP_NO_NAME,
FORM_OPTGROUP_NO_NAME_FROM_LABEL,
FRAME_NO_NAME,
HEADING_NO_CONTENT,
HEADING_NO_NAME,
IFRAME_NO_NAME_FROM_TITLE,
IMAGE_NO_NAME,
INTERACTIVE_NO_NAME,
MATHML_GLYPH_NO_NAME,
TOOLBAR_NO_NAME,
},
},
SCORES: { BEST_PRACTICES, FAIL, WARNING },
},
} = require("devtools/shared/constants");
/**
* A map from text label issues to annotation component properties.
*/
const ISSUE_TO_ANNOTATION_MAP = {
[AREA_NO_NAME_FROM_ALT]: {
href: A11Y_TEXT_LABEL_LINKS.AREA_NO_NAME_FROM_ALT,
l10nId: "accessibility-text-label-issue-area",
args: {
get code() {
return ReactDOM.code({}, "alt");
},
// Note: there is no way right now to use custom elements in privileged
// content. We have to use something like <div> since we can't provide
// three args with the same name.
get div() {
return ReactDOM.code({}, "area");
},
// Note: there is no way right now to use custom elements in privileged
// content. We have to use something like <span> since we can't provide
// three args with the same name.
get span() {
return ReactDOM.code({}, "href");
},
},
},
[DIALOG_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.DIALOG_NO_NAME,
l10nId: "accessibility-text-label-issue-dialog",
},
[DOCUMENT_NO_TITLE]: {
href: A11Y_TEXT_LABEL_LINKS.DOCUMENT_NO_TITLE,
l10nId: "accessibility-text-label-issue-document-title",
args: {
get code() {
return ReactDOM.code({}, "title");
},
},
},
[EMBED_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.EMBED_NO_NAME,
l10nId: "accessibility-text-label-issue-embed",
},
[FIGURE_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.FIGURE_NO_NAME,
l10nId: "accessibility-text-label-issue-figure",
},
[FORM_FIELDSET_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.FORM_FIELDSET_NO_NAME,
l10nId: "accessibility-text-label-issue-fieldset",
args: {
get code() {
return ReactDOM.code({}, "fieldset");
},
},
},
[FORM_FIELDSET_NO_NAME_FROM_LEGEND]: {
href: A11Y_TEXT_LABEL_LINKS.FORM_FIELDSET_NO_NAME_FROM_LEGEND,
l10nId: "accessibility-text-label-issue-fieldset-legend",
args: {
get code() {
return ReactDOM.code({}, "legend");
},
// Note: there is no way right now to use custom elements in privileged
// content. We have to use something like <span> since we can't provide
// two args with the same name.
get span() {
return ReactDOM.code({}, "fieldset");
},
},
},
[FORM_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.FORM_NO_NAME,
l10nId: "accessibility-text-label-issue-form",
},
[FORM_NO_VISIBLE_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.FORM_NO_VISIBLE_NAME,
l10nId: "accessibility-text-label-issue-form-visible",
},
[FORM_OPTGROUP_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.FORM_OPTGROUP_NO_NAME,
l10nId: "accessibility-text-label-issue-optgroup",
args: {
get code() {
return ReactDOM.code({}, "optgroup");
},
},
},
[FORM_OPTGROUP_NO_NAME_FROM_LABEL]: {
href: A11Y_TEXT_LABEL_LINKS.FORM_OPTGROUP_NO_NAME_FROM_LABEL,
l10nId: "accessibility-text-label-issue-optgroup-label",
args: {
get code() {
return ReactDOM.code({}, "label");
},
// Note: there is no way right now to use custom elements in privileged
// content. We have to use something like <span> since we can't provide
// two args with the same name.
get span() {
return ReactDOM.code({}, "optgroup");
},
},
},
[FRAME_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.FRAME_NO_NAME,
l10nId: "accessibility-text-label-issue-frame",
args: {
get code() {
return ReactDOM.code({}, "frame");
},
},
},
[HEADING_NO_CONTENT]: {
href: A11Y_TEXT_LABEL_LINKS.HEADING_NO_CONTENT,
l10nId: "accessibility-text-label-issue-heading-content",
},
[HEADING_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.HEADING_NO_NAME,
l10nId: "accessibility-text-label-issue-heading",
},
[IFRAME_NO_NAME_FROM_TITLE]: {
href: A11Y_TEXT_LABEL_LINKS.IFRAME_NO_NAME_FROM_TITLE,
l10nId: "accessibility-text-label-issue-iframe",
args: {
get code() {
return ReactDOM.code({}, "title");
},
// Note: there is no way right now to use custom elements in privileged
// content. We have to use something like <span> since we can't provide
// two args with the same name.
get span() {
return ReactDOM.code({}, "iframe");
},
},
},
[IMAGE_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.IMAGE_NO_NAME,
l10nId: "accessibility-text-label-issue-image",
},
[INTERACTIVE_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.INTERACTIVE_NO_NAME,
l10nId: "accessibility-text-label-issue-interactive",
},
[MATHML_GLYPH_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.MATHML_GLYPH_NO_NAME,
l10nId: "accessibility-text-label-issue-glyph",
args: {
get code() {
return ReactDOM.code({}, "alt");
},
// Note: there is no way right now to use custom elements in privileged
// content. We have to use something like <span> since we can't provide
// two args with the same name.
get span() {
return ReactDOM.code({}, "mglyph");
},
},
},
[TOOLBAR_NO_NAME]: {
href: A11Y_TEXT_LABEL_LINKS.TOOLBAR_NO_NAME,
l10nId: "accessibility-text-label-issue-toolbar",
},
};
/**
* A map of accessibility scores to the text descriptions of check icons.
*/
const SCORE_TO_ICON_MAP = {
[BEST_PRACTICES]: {
l10nId: "accessibility-best-practices",
src: "chrome://devtools/skin/images/info.svg",
},
[FAIL]: {
l10nId: "accessibility-fail",
src: "chrome://devtools/skin/images/error.svg",
},
[WARNING]: {
l10nId: "accessibility-warning",
src: "chrome://devtools/skin/images/alert.svg",
},
};
/**
* Localized "Learn more" link that opens a new tab with relevant documentation.
*/
class LearnMoreClass extends Component {
static get propTypes() {
return {
href: PropTypes.string,
l10nId: PropTypes.string.isRequired,
onClick: PropTypes.func,
};
}
static get defaultProps() {
return {
href: "#",
l10nId: null,
onClick: LearnMoreClass.openDocOnClick,
};
}
static openDocOnClick(event) {
event.preventDefault();
openDocLink(event.target.href);
}
render() {
const { href, l10nId, onClick } = this.props;
const className = "link";
return Localized({ id: l10nId }, ReactDOM.a({ className, href, onClick }));
}
}
const LearnMore = createFactory(LearnMoreClass);
/**
* Renders icon with text description for the text label accessibility check.
*
* @param {Object}
* Options:
* - score: value from SCORES from "devtools/shared/constants"
*/
function Icon({ score }) {
const { l10nId, src } = SCORE_TO_ICON_MAP[score];
return Localized({ id: l10nId, attrs: { alt: true } },
ReactDOM.img({ src, className: `icon ${score}` })
);
}
/**
* Renders text description of the text label accessibility check.
*
* @param {Object}
* Options:
* - issue: value from ISSUE_TYPE[AUDIT_TYPE.TEXT_LABEL] from
* "devtools/shared/constants"
*/
function Annotation({ issue }) {
const { args, href, l10nId } = ISSUE_TO_ANNOTATION_MAP[issue];
return Localized({
id: l10nId,
a: LearnMore({ l10nId: "accessibility-learn-more", href }),
...args,
},
ReactDOM.p({ className: "accessibility-check-annotation" })
);
}
/**
* Component for rendering a check for text label accessibliity check failures,
* warnings and best practices suggestions association with a given
* accessibility object in the accessibility tree.
*/
class TextLabelCheck extends Component {
static get propTypes() {
return {
issue: PropTypes.string.isRequired,
score: PropTypes.string.isRequired,
};
}
render() {
const { issue, score } = this.props;
return ReactDOM.div({
role: "presentation",
className: "accessibility-check",
},
Localized({
id: "accessibility-text-label-header",
},
ReactDOM.h3({ className: "accessibility-check-header" })),
ReactDOM.div({
role: "presentation",
className: "accessibility-text-label-check",
},
Icon({ score }),
Annotation({ issue })
)
);
}
}
module.exports = TextLabelCheck;

1
devtools/client/accessibility/components/moz.build
Просмотреть файл

@ -22,6 +22,5 @@ DevToolsModules(
'MainFrame.js',
'RightSidebar.js',
'TextLabelBadge.js',
'TextLabelCheck.js',
'Toolbar.js'
)

67
devtools/client/accessibility/constants.js
Просмотреть файл

@ -3,34 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const {
accessibility: {
AUDIT_TYPE,
ISSUE_TYPE: {
[AUDIT_TYPE.TEXT_LABEL]: {
AREA_NO_NAME_FROM_ALT,
DIALOG_NO_NAME,
DOCUMENT_NO_TITLE,
EMBED_NO_NAME,
FIGURE_NO_NAME,
FORM_FIELDSET_NO_NAME,
FORM_FIELDSET_NO_NAME_FROM_LEGEND,
FORM_NO_NAME,
FORM_NO_VISIBLE_NAME,
FORM_OPTGROUP_NO_NAME,
FORM_OPTGROUP_NO_NAME_FROM_LABEL,
FRAME_NO_NAME,
HEADING_NO_CONTENT,
HEADING_NO_NAME,
IFRAME_NO_NAME_FROM_TITLE,
IMAGE_NO_NAME,
INTERACTIVE_NO_NAME,
MATHML_GLYPH_NO_NAME,
TOOLBAR_NO_NAME,
},
},
},
} = require("devtools/shared/constants");
const { accessibility: { AUDIT_TYPE } } = require("devtools/shared/constants");
// Used in accessible component for properties tree rendering.
exports.TREE_ROW_HEIGHT = 21;
@ -111,41 +84,3 @@ exports.A11Y_LEARN_MORE_LINK =
exports.A11Y_CONTRAST_LEARN_MORE_LINK =
"https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Perceivable/" +
"Color_contrast?utm_source=devtools&utm_medium=a11y-panel-checks-color-contrast";
const A11Y_TEXT_LABEL_LINK_BASE =
"https://developer.mozilla.org/docs/Web/Accessibility/Understanding_WCAG/Text_labels_and_names" +
"?utm_source=devtools&utm_medium=a11y-panel-checks-text-label";
const A11Y_TEXT_LABEL_LINK_IDS = {
[AREA_NO_NAME_FROM_ALT]:
"Use_alt_attribute_to_provide_a_name_for_areas_that_have_the_href_attribute",
[DIALOG_NO_NAME]: "Dialogs_should_have_a_name",
[DOCUMENT_NO_TITLE]: "Documents_must_have_a_title",
[EMBED_NO_NAME]: "Embedded_content_must_have_a_name",
[FIGURE_NO_NAME]: "Figures_with_optional_captions_should_have_a_name",
[FORM_FIELDSET_NO_NAME]: "Form_element_groups_must_have_a_name",
[FORM_FIELDSET_NO_NAME_FROM_LEGEND]:
"Use_legend_element_to_provide_a_name_for_form_element_groups",
[FORM_NO_NAME]: "Form_elements_must_have_a_name",
[FORM_NO_VISIBLE_NAME]: "Form_elements_should_have_a_visible_text_label",
[FORM_OPTGROUP_NO_NAME]: "Groupings_of_options_must_have_a_name",
[FORM_OPTGROUP_NO_NAME_FROM_LABEL]:
"Use_label_attribute_to_provide_a_name_for_groupings_of_options",
[FRAME_NO_NAME]: "Frames_must_have_a_name",
[HEADING_NO_NAME]: "Headings_must_have_a_name",
[HEADING_NO_CONTENT]: "Headings_must_have_visible_text_content",
[IFRAME_NO_NAME_FROM_TITLE]: "Use_title_attribute_to_describe_iframe_content",
[IMAGE_NO_NAME]: "Content_with_images_must_have_a_name",
[INTERACTIVE_NO_NAME]: "Interactive_elements_must_have_a_name",
[MATHML_GLYPH_NO_NAME]:
"Use_alt_attribute_to_provide_a_name_for_MathML_glyphs",
[TOOLBAR_NO_NAME]:
"Toolbars_must_have_a_name_when_there_is_more_than_one_toolbar",
};
const A11Y_TEXT_LABEL_LINKS = {};
for (const key in A11Y_TEXT_LABEL_LINK_IDS) {
A11Y_TEXT_LABEL_LINKS[key] =
`${A11Y_TEXT_LABEL_LINK_BASE}#${A11Y_TEXT_LABEL_LINK_IDS[key]}`;
}
exports.A11Y_TEXT_LABEL_LINKS = A11Y_TEXT_LABEL_LINKS;

27
devtools/client/accessibility/panel.js
Просмотреть файл

@ -3,9 +3,6 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const Services = require("Services");
const { L10nRegistry } = require("resource://gre/modules/L10nRegistry.jsm");
const EventEmitter = require("devtools/shared/event-emitter");
const Telemetry = require("devtools/client/shared/telemetry");
@ -84,8 +81,6 @@ AccessibilityPanel.prototype = {
this.picker = new Picker(this);
}
this.fluentBundles = await this.createFluentBundles();
this.updateA11YServiceDurationTimer();
this.front.on("init", this.updateA11YServiceDurationTimer);
this.front.on("shutdown", this.updateA11YServiceDurationTimer);
@ -99,25 +94,6 @@ AccessibilityPanel.prototype = {
return this._opening;
},
/**
* Retrieve message contexts for the current locales, and return them as an
* array of FluentBundles elements.
*/
async createFluentBundles() {
const locales = Services.locale.appLocalesAsBCP47;
const generator =
L10nRegistry.generateBundles(locales, ["devtools/accessibility.ftl"]);
// Return value of generateBundles is a generator and should be converted to
// a sync iterable before using it with React.
const contexts = [];
for await (const message of generator) {
contexts.push(message);
}
return contexts;
},
onNewAccessibleFrontSelected(selected) {
this.emit("new-accessible-front-selected", selected);
},
@ -157,8 +133,7 @@ AccessibilityPanel.prototype = {
}
// Alright reset the flag we are about to refresh the panel.
this.shouldRefresh = false;
this.postContentMessage("initialize", this.front, this.walker, this.supports,
this.fluentBundles);
this.postContentMessage("initialize", this.front, this.walker, this.supports);
},
updateA11YServiceDurationTimer() {

9
devtools/client/accessibility/test/jest/babel.config.js
Просмотреть файл

@ -1,9 +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/. */
"use strict";
module.exports = {
"plugins": ["@babel/plugin-proposal-async-generator-functions"],
};

6
devtools/client/accessibility/test/jest/components/__snapshots__/audit-filter.test.js.snap
Просмотреть файл

@ -4,10 +4,10 @@ exports[`AuditController component: audit filter filtered contrast checks fail 1
exports[`AuditController component: audit filter filtered contrast checks fail range 1`] = `"<span></span>"`;
exports[`AuditController component: audit filter filtered contrast checks success 1`] = `""`;
exports[`AuditController component: audit filter filtered contrast checks success 1`] = `null`;
exports[`AuditController component: audit filter filtered no checks 1`] = `""`;
exports[`AuditController component: audit filter filtered no checks 1`] = `null`;
exports[`AuditController component: audit filter filtered unknown checks 1`] = `""`;
exports[`AuditController component: audit filter filtered unknown checks 1`] = `null`;
exports[`AuditController component: audit filter not filtered 1`] = `"<span></span>"`;

2
devtools/client/accessibility/test/jest/components/__snapshots__/audit-progress-overlay.test.js.snap
Просмотреть файл

@ -10,4 +10,4 @@ exports[`AuditProgressOverlay component: render auditing progress 2`] = `"<span
exports[`AuditProgressOverlay component: render auditing progress 3`] = `"<span id=\\"audit-progress-container\\">accessibility.progress.progressbar<progress max=\\"100\\" value=\\"75\\" class=\\"audit-progress-progressbar\\" aria-labelledby=\\"audit-progress-container\\"></progress></span>"`;
exports[`AuditProgressOverlay component: render not auditing 1`] = `""`;
exports[`AuditProgressOverlay component: render not auditing 1`] = `null`;

8
devtools/client/accessibility/test/jest/components/__snapshots__/badges.test.js.snap
Просмотреть файл

@ -6,10 +6,10 @@ exports[`Badges component: contrast ratio fail render 1`] = `"<span class=\\"bad
exports[`Badges component: contrast ratio success render 1`] = `"<span class=\\"badges\\" role=\\"group\\" aria-label=\\"accessibility.badges\\"></span>"`;
exports[`Badges component: empty checks render 1`] = `""`;
exports[`Badges component: empty checks render 1`] = `null`;
exports[`Badges component: no props render 1`] = `""`;
exports[`Badges component: no props render 1`] = `null`;
exports[`Badges component: null checks render 1`] = `""`;
exports[`Badges component: null checks render 1`] = `null`;
exports[`Badges component: unsupported checks render 1`] = `""`;
exports[`Badges component: unsupported checks render 1`] = `null`;

7
devtools/client/accessibility/test/jest/components/__snapshots__/text-label-check.test.js.snap
Просмотреть файл

@ -1,7 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`TextLabelCheck component: BEST_PRACTICES render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" class=\\"accessibility-text-label-check\\"><img src=\\"chrome://devtools/skin/images/info.svg\\" class=\\"icon BEST_PRACTICES\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
exports[`TextLabelCheck component: WARNING render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" class=\\"accessibility-text-label-check\\"><img src=\\"chrome://devtools/skin/images/alert.svg\\" class=\\"icon WARNING\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;
exports[`TextLabelCheck component: fail render 1`] = `"<div role=\\"presentation\\" class=\\"accessibility-check\\"><h3 class=\\"accessibility-check-header\\"></h3><div role=\\"presentation\\" class=\\"accessibility-text-label-check\\"><img src=\\"chrome://devtools/skin/images/error.svg\\" class=\\"icon fail\\"><p class=\\"accessibility-check-annotation\\"></p></div></div>"`;

69
devtools/client/accessibility/test/jest/components/text-label-check.test.js
Просмотреть файл

@ -1,69 +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/. */
"use strict";
const { mount } = require("enzyme");
const { createFactory } = require("devtools/client/shared/vendor/react");
const TextLabelCheckClass = require("devtools/client/accessibility/components/TextLabelCheck");
const TextLabelCheck = createFactory(TextLabelCheckClass);
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
const {
accessibility: {
AUDIT_TYPE: { TEXT_LABEL },
ISSUE_TYPE: {
[TEXT_LABEL]: {
AREA_NO_NAME_FROM_ALT,
DIALOG_NO_NAME,
FORM_NO_VISIBLE_NAME,
},
},
SCORES: { BEST_PRACTICES, FAIL, WARNING },
},
} = require("devtools/shared/constants");
function testTextLabelCheck(wrapper, props) {
expect(wrapper.html()).toMatchSnapshot();
expect(wrapper.children().length).toBe(1);
const container = wrapper.childAt(0);
expect(container.hasClass("accessibility-check")).toBe(true);
expect(container.prop("role")).toBe("presentation");
expect(wrapper.props()).toMatchObject(props);
const localized = wrapper.find(FluentReact.Localized);
expect(localized.length).toBe(3);
const heading = localized.at(0).childAt(0);
expect(heading.type()).toBe("h3");
expect(heading.hasClass("accessibility-check-header")).toBe(true);
const icon = localized.at(1).childAt(0);
expect(icon.type()).toBe("img");
expect(icon.hasClass(props.score === FAIL ? "fail" : props.score)).toBe(true);
const annotation = localized.at(2).childAt(0);
expect(annotation.type()).toBe("p");
expect(annotation.hasClass("accessibility-check-annotation")).toBe(true);
}
describe("TextLabelCheck component:", () => {
const testProps = [
{ issue: AREA_NO_NAME_FROM_ALT, score: FAIL },
{ issue: FORM_NO_VISIBLE_NAME, score: WARNING },
{ issue: DIALOG_NO_NAME, score: BEST_PRACTICES },
];
for (const props of testProps) {
it(`${props.score} render`, () => {
const wrapper = mount(LocalizationProvider({ messages: []},
TextLabelCheck(props)));
const textLabelCheck = wrapper.find(TextLabelCheckClass);
testTextLabelCheck(textLabelCheck, props);
});
}
});

9
devtools/client/accessibility/test/jest/package.json
Просмотреть файл

@ -10,13 +10,12 @@
"test-ci": "jest --json"
},
"dependencies": {
"@babel/plugin-proposal-async-generator-functions": "^7.2.0",
"jest": "^24.6.0",
"jest": "^23.0.0",
"react-test-renderer": "16.4.1",
"react": "16.4.1",
"react-dom": "16.4.1",
"enzyme": "^3.9.0",
"enzyme-to-json": "^3.3.5",
"enzyme-adapter-react-16": "^1.13.2"
"enzyme": "^3.3.0",
"enzyme-to-json": "3.3.4",
"enzyme-adapter-react-16": "^1.1.1"
}
}

2309
devtools/client/accessibility/test/jest/yarn.lock
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

22
devtools/client/accessibility/test/mochitest/contrast.snapshots.js
Просмотреть файл

@ -8,13 +8,13 @@ window._snapshots = {
"type": "div",
"props": {
"role": "presentation",
"className": "accessibility-check",
"className": "accessibility-color-contrast-check",
},
"children": [
{
"type": "h3",
"props": {
"className": "accessibility-check-header",
"className": "accessibility-color-contrast-header",
},
"children": [
"Color and Contrast",
@ -45,13 +45,13 @@ window._snapshots = {
"type": "div",
"props": {
"role": "presentation",
"className": "accessibility-check",
"className": "accessibility-color-contrast-check",
},
"children": [
{
"type": "h3",
"props": {
"className": "accessibility-check-header",
"className": "accessibility-color-contrast-header",
},
"children": [
"Color and Contrast",
@ -83,7 +83,7 @@ window._snapshots = {
{
"type": "p",
"props": {
"className": "accessibility-check-annotation",
"className": "accessibility-color-contrast-annotation",
},
"children": [
"Does not meet WCAG standards for accessible text. ",
@ -110,13 +110,13 @@ window._snapshots = {
"type": "div",
"props": {
"role": "presentation",
"className": "accessibility-check",
"className": "accessibility-color-contrast-check",
},
"children": [
{
"type": "h3",
"props": {
"className": "accessibility-check-header",
"className": "accessibility-color-contrast-header",
},
"children": [
"Color and Contrast",
@ -170,7 +170,7 @@ window._snapshots = {
{
"type": "p",
"props": {
"className": "accessibility-check-annotation",
"className": "accessibility-color-contrast-annotation",
},
"children": [
"Does not meet WCAG standards for accessible text. ",
@ -197,13 +197,13 @@ window._snapshots = {
"type": "div",
"props": {
"role": "presentation",
"className": "accessibility-check",
"className": "accessibility-color-contrast-check",
},
"children": [
{
"type": "h3",
"props": {
"className": "accessibility-check-header",
"className": "accessibility-color-contrast-header",
},
"children": [
"Color and Contrast",
@ -246,7 +246,7 @@ window._snapshots = {
{
"type": "p",
"props": {
"className": "accessibility-check-annotation",
"className": "accessibility-color-contrast-annotation",
},
"children": [
"Meets WCAG AA standards for accessible text. ",

7
devtools/client/jar.mn
Просмотреть файл

@ -69,12 +69,7 @@ devtools.jar:
skin/images/accessibility.svg (themes/images/accessibility.svg)
skin/images/add.svg (themes/images/add.svg)
skin/images/alert.svg (themes/images/alert.svg)
skin/images/alert-small.svg (themes/images/alert-small.svg)
skin/images/alert-tiny.svg (themes/images/alert-tiny.svg)
skin/images/error.svg (themes/images/error.svg)
skin/images/error-small.svg (themes/images/error-small.svg)
skin/images/info.svg (themes/images/info.svg)
skin/images/info-small.svg (themes/images/info-small.svg)
skin/images/arrow.svg (themes/images/arrow.svg)
skin/images/arrow-big.svg (themes/images/arrow-big.svg)
skin/images/arrowhead-left.svg (themes/images/arrowhead-left.svg)
@ -127,6 +122,8 @@ devtools.jar:
skin/images/rules-view-print-simulation.svg (themes/images/rules-view-print-simulation.svg)
skin/markup.css (themes/markup.css)
skin/webconsole.css (themes/webconsole.css)
skin/images/webconsole/error.svg (themes/images/webconsole/error.svg)
skin/images/webconsole/info.svg (themes/images/webconsole/info.svg)
skin/images/webconsole/input.svg (themes/images/webconsole/input.svg)
skin/images/webconsole/navigation.svg (themes/images/webconsole/navigation.svg)
skin/images/webconsole/return.svg (themes/images/webconsole/return.svg)

62
devtools/client/locales/en-US/accessibility.ftl
Просмотреть файл

@ -1,62 +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/.
### These strings are used inside the Accessibility panel.
accessibility-learn-more = Learn more
accessibility-text-label-header = Text Labels and Names
## Text entries that are used as text alternative for icons that depict accessibility isses.
accessibility-warning =
.alt = Warning
accessibility-fail =
.alt = Error
accessibility-best-practices =
.alt = Best Practices
## Text entries for a paragraph used in the accessibility panel sidebar's checks section
## that describe that currently selected accessible object has an accessibility issue
## with its text label or accessible name.
accessibility-text-label-issue-area = Use <code>alt</code> attribute to label <div>area</div> elements that have the <span>href</span> attribute. <a>Learn more</a>
accessibility-text-label-issue-dialog = Dialogs should be labeled. <a>Learn more</a>
accessibility-text-label-issue-document-title = Documents must have a <code>title</code>. <a>Learn more</a>
accessibility-text-label-issue-embed = Embedded content must be labeled. <a>Learn more</a>
accessibility-text-label-issue-figure = Figures with optional captions should be labeled. <a>Learn more</a>
accessibility-text-label-issue-fieldset = <code>fieldset</code> elements must be labeled. <a>Learn more</a>
accessibility-text-label-issue-fieldset-legend = Use <code>legend</code> element to label <span>fieldset</span> elements. <a>Learn more</a>
accessibility-text-label-issue-form = Form elements must be labeled. <a>Learn more</a>
accessibility-text-label-issue-form-visible = Form elements should have a visible text label. <a>Learn more</a>
accessibility-text-label-issue-frame = <code>frame</code> elements must be labeled. <a>Learn more</a>
accessibility-text-label-issue-glyph = Use <code>alt</code> attribute to label <span>mglyph</span> elements. <a>Learn more</a>
accessibility-text-label-issue-heading = Headings must be labeled. <a>Learn more</a>
accessibility-text-label-issue-heading-content = Headings should have visible text content. <a>Learn more</a>
accessibility-text-label-issue-iframe = Use <code>title</code> attribute to describe <span>iframe</span> content. <a>Learn more</a>
accessibility-text-label-issue-image = Content with images must be labeled. <a>Learn more</a>
accessibility-text-label-issue-interactive = Interactive elements must be labeled. <a>Learn more</a>
accessibility-text-label-issue-optgroup = <code>optgroup</code> elements must be labeled. <a>Learn more</a>
accessibility-text-label-issue-optgroup-label = Use <code>label</code> attribute to label <span>optgroup</span> elements. <a>Learn more</a>
accessibility-text-label-issue-toolbar = Toolbars must be labeled when there is more than one toolbar. <a>Learn more</a>

2
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
Просмотреть файл

@ -475,7 +475,7 @@
height: 12px;
vertical-align: -1px;
margin-inline-start: 5px;
background-image: url(chrome://devtools/skin/images/alert-small.svg);
background-image: url(chrome://devtools/skin/images/alert.svg);
background-size: cover;
-moz-context-properties: fill;
fill: var(--yellow-60);

6
devtools/client/themes/images/alert-small.svg
Просмотреть файл

@ -1,6 +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/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
<path fill="context-fill" d="M6 0a1 1 0 0 1 .89.54l5 9.6A1 1 0 0 1 11 11.6H1a1 1 0 0 1-.89-1.46l5-9.6A1 1 0 0 1 6 0zm-.25 8a.75.75 0 0 0-.75.75v.5c0 .41.34.75.75.75h.5c.41 0 .75-.34.75-.75v-.5A.75.75 0 0 0 6.25 8h-.5zM7 3.7a1 1 0 1 0-2 0v2.6a1 1 0 1 0 2 0V3.7z" />
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 570 B

4
devtools/client/themes/images/alert.svg
Просмотреть файл

@ -1,6 +1,6 @@
<!-- 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/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
<path fill="context-fill" d="M6 0a1 1 0 0 1 .89.54l5 9.6A1 1 0 0 1 11 11.6H1a1 1 0 0 1-.89-1.46l5-9.6A1 1 0 0 1 6 0zm-.25 8a.75.75 0 0 0-.75.75v.5c0 .41.34.75.75.75h.5c.41 0 .75-.34.75-.75v-.5A.75.75 0 0 0 6.25 8h-.5zM7 3.7a1 1 0 1 0-2 0v2.6a1 1 0 1 0 2 0V3.7z" />
</svg>

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 531 B

После

Ширина:  |  Высота:  |  Размер: 570 B

6
devtools/client/themes/images/error.svg
Просмотреть файл

@ -1,6 +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/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<path fill="context-fill" fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm0-3.429a1.143 1.143 0 1 0 0-2.285 1.143 1.143 0 0 0 0 2.285zm0-3.428c.631 0 1.143-.512 1.143-1.143V4.571a1.143 1.143 0 0 0-2.286 0V8c0 .631.512 1.143 1.143 1.143z"/>
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 556 B

6
devtools/client/themes/images/info.svg
Просмотреть файл

@ -1,6 +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/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="context-fill" d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zm0-7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1zm0-3.188A1.188 1.188 0 1 0 9.188 5 1.188 1.188 0 0 0 8 3.812z" />
</svg>
Режим "рядом"

До

Ширина:  |  Высота:  |  Размер: 534 B

0
devtools/client/themes/images/error-small.svg → devtools/client/themes/images/webconsole/error.svg
Просмотреть файл

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 538 B

После

Ширина:  |  Высота:  |  Размер: 538 B

0
devtools/client/themes/images/info-small.svg → devtools/client/themes/images/webconsole/info.svg
Просмотреть файл

Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 538 B

После

Ширина:  |  Высота:  |  Размер: 538 B

4
devtools/client/themes/jit-optimizations.css
Просмотреть файл

@ -83,7 +83,7 @@
height: 12px;
max-height: 12px;
margin-inline-end: 5px;
background-image: url(chrome://devtools/skin/images/info-small.svg);
background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
background-repeat: no-repeat;
background-size: contain;
-moz-context-properties: fill;
@ -91,7 +91,7 @@
}
.opt-icon.warning::before {
background-image: url(chrome://devtools/skin/images/alert-small.svg);
background-image: url(chrome://devtools/skin/images/alert.svg);
fill: var(--yellow-60);
}

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

@ -580,7 +580,7 @@ html, body, #app, #memory-tool {
height: 12px;
max-height: 12px;
margin-inline-end: 5px;
background-image: url(chrome://devtools/skin/images/alert-small.svg);
background-image: url(chrome://devtools/skin/images/alert.svg);
background-repeat: no-repeat;
background-size: contain;
-moz-context-properties: fill;

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

@ -775,7 +775,7 @@ menuitem.experimental-option::before {
max-height: 12px;
margin-top: 2px;
margin-inline-end: 5px;
background-image: url(chrome://devtools/skin/images/alert-small.svg);
background-image: url(chrome://devtools/skin/images/alert.svg);
background-repeat: no-repeat;
background-size: contain;
-moz-context-properties: fill;

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

@ -371,14 +371,14 @@
}
.ruleview-warning {
background-image: url(chrome://devtools/skin/images/alert-small.svg);
background-image: url(chrome://devtools/skin/images/alert.svg);
fill: var(--yellow-60);
}
.ruleview-unused-warning {
background-image: url(chrome://devtools/skin/images/info-small.svg);
background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
background-color: var(--theme-sidebar-background);
fill: var(--theme-icon-dimmed-color);
fill: var(--theme-icon-dimmed-color);
}
.ruleview-unused-warning:hover {

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

@ -50,8 +50,6 @@
--theme-icon-color: rgba(12, 12, 13, 0.8);
--theme-icon-dimmed-color: rgba(135, 135, 137, 0.9);
--theme-icon-checked-color: var(--blue-60);
--theme-icon-error-color: var(--red-60);
--theme-icon-warning-color: var(--yellow-65);
/* Text color */
--theme-comment: var(--grey-50);
@ -153,8 +151,6 @@
--theme-icon-color: rgba(249, 249, 250, 0.7);
--theme-icon-dimmed-color: rgba(147, 147, 149, 0.9);
--theme-icon-checked-color: var(--blue-30);
--theme-icon-error-color: var(--red-40);
--theme-icon-warning-color: var(--yellow-60);
/* Text color */
--theme-comment: var(--grey-45);

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

@ -21,9 +21,11 @@
--console-error-background: hsl(345, 23%, 24%);
--console-error-border: hsl(345, 30%, 35%);
--console-error-color: var(--red-20);
--console-error-icon-color: var(--red-40);
--console-warning-background: hsl(42, 37%, 19%);
--console-warning-border: hsl(60, 30%, 26%);
--console-warning-color: hsl(43, 94%, 81%);
--console-warning-icon-color: var(--yellow-60);
--console-navigation-color: var(--theme-highlight-blue);
--console-navigation-border: var(--blue-60);
--console-indent-border-color: var(--theme-highlight-blue);
@ -43,9 +45,11 @@
--console-error-background: hsl(344, 73%, 97%);
--console-error-border: rgba(215, 0, 34, 0.12); /* Red 60 + opacity */
--console-error-color: var(--red-70);
--console-error-icon-color: var(--red-60);
--console-warning-background: hsl(54, 100%, 92%);
--console-warning-border: rgba(215, 182, 0, 0.28); /* Yellow 60 + opacity */
--console-warning-color: var(--yellow-80);
--console-warning-icon-color: var(--yellow-65);
--console-navigation-color: var(--theme-highlight-blue);
--console-navigation-border: var(--blue-30);
--console-indent-border-color: var(--theme-highlight-blue);
@ -276,17 +280,17 @@ a {
.message.info > .icon {
color: var(--theme-icon-color);
background-image: url(chrome://devtools/skin/images/info-small.svg);
background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
}
.message.error > .icon {
color: var(--theme-icon-error-color);
background-image: url(chrome://devtools/skin/images/error-small.svg);
color: var(--console-error-icon-color);
background-image: url(chrome://devtools/skin/images/webconsole/error.svg);
}
.message.warn > .icon {
color: var(--theme-icon-warning-color);
background-image: url(chrome://devtools/skin/images/alert-small.svg);
color: var(--console-warning-icon-color);
background-image: url(chrome://devtools/skin/images/alert.svg);
}
.message.navigationMarker > .icon {

30
devtools/server/actors/highlighters.css
Просмотреть файл

@ -39,8 +39,6 @@
--highlighter-marker-color: #000;
--grey-40: #b1b1b3;
--red-40: #ff3b6b;
--yellow-60: #d7b600;
}
/**
@ -739,34 +737,6 @@
margin-inline-start: 3px;
}
:-moz-native-anonymous .accessible-infobar-audit .accessible-text-label:before {
display: inline-block;
width: 12px;
height: 12px;
content: "";
margin-inline-end: 4px;
vertical-align: -2px;
background-image: none;
background-position: center;
background-repeat: no-repeat;
-moz-context-properties: fill;
fill: currentColor;
}
:-moz-native-anonymous .accessible-infobar-audit .accessible-text-label.fail:before {
background-image: url(chrome://devtools/skin/images/error-small.svg);
fill: var(--red-40);
}
:-moz-native-anonymous .accessible-infobar-audit .accessible-text-label.WARNING:before {
background-image: url(chrome://devtools/skin/images/alert-small.svg);
fill: var(--yellow-60);
}
:-moz-native-anonymous .accessible-infobar-audit .accessible-text-label.BEST_PRACTICES:before {
background-image: url(chrome://devtools/skin/images/info-small.svg);
}
:-moz-native-anonymous .accessible-infobar-name:not(:empty) {
border-inline-start: 1px solid #5a6169;
margin-inline-start: 6px;

120
devtools/server/actors/highlighters/utils/accessibility.js
Просмотреть файл

@ -9,39 +9,13 @@ const { getCurrentZoom, getViewportDimensions } = require("devtools/shared/layou
const { moveInfobar, createNode } = require("./markup");
const { truncateString } = require("devtools/shared/inspector/utils");
const { accessibility: { SCORES } } = require("devtools/shared/constants");
const STRINGS_URI = "devtools/shared/locales/accessibility.properties";
loader.lazyRequireGetter(this, "LocalizationHelper", "devtools/shared/l10n", true);
DevToolsUtils.defineLazyGetter(this, "L10N", () => new LocalizationHelper(STRINGS_URI));
const {
accessibility: {
AUDIT_TYPE,
ISSUE_TYPE: {
[AUDIT_TYPE.TEXT_LABEL]: {
AREA_NO_NAME_FROM_ALT,
DIALOG_NO_NAME,
DOCUMENT_NO_TITLE,
EMBED_NO_NAME,
FIGURE_NO_NAME,
FORM_FIELDSET_NO_NAME,
FORM_FIELDSET_NO_NAME_FROM_LEGEND,
FORM_NO_NAME,
FORM_NO_VISIBLE_NAME,
FORM_OPTGROUP_NO_NAME,
FORM_OPTGROUP_NO_NAME_FROM_LABEL,
FRAME_NO_NAME,
HEADING_NO_CONTENT,
HEADING_NO_NAME,
IFRAME_NO_NAME_FROM_TITLE,
IMAGE_NO_NAME,
INTERACTIVE_NO_NAME,
MATHML_GLYPH_NO_NAME,
TOOLBAR_NO_NAME,
},
},
SCORES,
},
} = require("devtools/shared/constants");
const { accessibility: { AUDIT_TYPE } } = require("devtools/shared/constants");
// Max string length for truncating accessible name values.
const MAX_STRING_LENGTH = 50;
@ -409,7 +383,6 @@ class Audit {
// object.
this.reports = [
new ContrastRatio(this),
new TextLabel(this),
];
}
@ -566,13 +539,13 @@ class ContrastRatio extends AuditReport {
/**
* Update contrast ratio score infobar markup.
* @param {Object}
* Audit report for a given highlighted accessible.
* @param {Number}
* Contrast ratio for an accessible object being highlighted.
* @return {Boolean}
* True if the contrast ratio markup was updated correctly and infobar audit
* block should be visible.
*/
update(audit) {
update({ [AUDIT_TYPE.CONTRAST]: contrastRatio }) {
const els = {};
for (const key of ["label", "min", "max", "error", "separator"]) {
const el = els[key] = this.getElement(`contrast-ratio-${key}`);
@ -586,11 +559,6 @@ class ContrastRatio extends AuditReport {
el.removeAttribute("style");
}
if (!audit) {
return false;
}
const contrastRatio = audit[AUDIT_TYPE.CONTRAST];
if (!contrastRatio) {
return false;
}
@ -624,82 +592,6 @@ class ContrastRatio extends AuditReport {
}
}
/**
* Text label audit report that is used to display a problem with text alternatives
* as part of the inforbar.
*/
class TextLabel extends AuditReport {
/**
* A map from text label issues to annotation component properties.
*/
static get ISSUE_TO_INFOBAR_LABEL_MAP() {
return {
[AREA_NO_NAME_FROM_ALT]: "accessibility.text.label.issue.area",
[DIALOG_NO_NAME]: "accessibility.text.label.issue.dialog",
[DOCUMENT_NO_TITLE]: "accessibility.text.label.issue.document.title",
[EMBED_NO_NAME]: "accessibility.text.label.issue.embed",
[FIGURE_NO_NAME]: "accessibility.text.label.issue.figure",
[FORM_FIELDSET_NO_NAME]: "accessibility.text.label.issue.fieldset",
[FORM_FIELDSET_NO_NAME_FROM_LEGEND]:
"accessibility.text.label.issue.fieldset.legend",
[FORM_NO_NAME]: "accessibility.text.label.issue.form",
[FORM_NO_VISIBLE_NAME]: "accessibility.text.label.issue.form.visible",
[FORM_OPTGROUP_NO_NAME]: "accessibility.text.label.issue.optgroup",
[FORM_OPTGROUP_NO_NAME_FROM_LABEL]: "accessibility.text.label.issue.optgroup.label",
[FRAME_NO_NAME]: "accessibility.text.label.issue.frame",
[HEADING_NO_CONTENT]: "accessibility.text.label.issue.heading.content",
[HEADING_NO_NAME]: "accessibility.text.label.issue.heading",
[IFRAME_NO_NAME_FROM_TITLE]: "accessibility.text.label.issue.iframe",
[IMAGE_NO_NAME]: "accessibility.text.label.issue.image",
[INTERACTIVE_NO_NAME]: "accessibility.text.label.issue.interactive",
[MATHML_GLYPH_NO_NAME]: "accessibility.text.label.issue.glyph",
[TOOLBAR_NO_NAME]: "accessibility.text.label.issue.toolbar",
};
}
buildMarkup(root) {
createNode(this.win, {
nodeType: "span",
parent: root,
attributes: {
"class": "text-label",
"id": "text-label",
},
prefix: this.prefix,
});
}
/**
* Update text label audit infobar markup.
* @param {Object}
* Audit report for a given highlighted accessible.
* @return {Boolean}
* True if the text label markup was updated correctly and infobar
* audit block should be visible.
*/
update(audit) {
const el = this.getElement("text-label");
el.setAttribute("hidden", true);
Object.values(SCORES).forEach(className => el.classList.remove(className));
if (!audit) {
return false;
}
const textLabelAudit = audit[AUDIT_TYPE.TEXT_LABEL];
if (!textLabelAudit) {
return false;
}
const { issue, score } = textLabelAudit;
this.setTextContent(el, L10N.getStr(TextLabel.ISSUE_TO_INFOBAR_LABEL_MAP[issue]));
el.classList.add(score);
el.removeAttribute("hidden");
return true;
}
}
/**
* A helper function that calculate accessible object bounds and positioning to
* be used for highlighting.

30
devtools/server/actors/highlighters/xul-accessible.js
Просмотреть файл

@ -20,8 +20,6 @@ const ACCESSIBLE_BOUNDS_SHEET = "data:text/css;charset=utf-8," + encodeURICompon
--highlighter-bubble-arrow-size: 8px;
--grey-40: #b1b1b3;
--red-40: #ff3b6b;
--yellow-60: #d7b600;
}
.accessible-bounds {
@ -149,34 +147,6 @@ const ACCESSIBLE_BOUNDS_SHEET = "data:text/css;charset=utf-8," + encodeURICompon
border-inline-start: 1px solid #5a6169;
margin-inline-start: 6px;
padding-inline-start: 6px;
}
.accessible-infobar-audit .accessible-text-label:before {
display: inline-block;
width: 12px;
height: 12px;
content: "";
margin-inline-end: 4px;
vertical-align: -2px;
background-image: none;
background-position: center;
background-repeat: no-repeat;
-moz-context-properties: fill;
fill: currentColor;
}
.accessible-infobar-audit .accessible-text-label.fail:before {
background-image: url(chrome://devtools/skin/images/error-small.svg);
fill: var(--red-40);
}
.accessible-infobar-audit .accessible-text-label.WARNING:before {
background-image: url(chrome://devtools/skin/images/alert-small.svg);
fill: var(--yellow-60);
}
.accessible-infobar-audit .accessible-text-label.BEST_PRACTICES:before {
background-image: url(chrome://devtools/skin/images/info-small.svg);
}`);
/**

1
devtools/server/tests/browser/browser.ini
Просмотреть файл

@ -43,7 +43,6 @@ support-files =
[browser_accessibility_highlighter_infobar.js]
skip-if = (os == 'win' && processor == 'aarch64') # bug 1533184
[browser_accessibility_infobar_show.js]
[browser_accessibility_infobar_audit_text_label.js]
[browser_accessibility_node.js]
skip-if = (os == 'win' && processor == 'aarch64') # bug 1533184
[browser_accessibility_node_audit.js]

127
devtools/server/tests/browser/browser_accessibility_infobar_audit_text_label.js
Просмотреть файл

@ -1,127 +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/. */
"use strict";
// Checks for the AccessibleHighlighter's infobar component and its text label
// audit.
add_task(async function() {
await BrowserTestUtils.withNewTab({
gBrowser,
url: MAIN_DOMAIN + "doc_accessibility_infobar.html",
}, async function(browser) {
await ContentTask.spawn(browser, null, async function() {
const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
const { HighlighterEnvironment } = require("devtools/server/actors/highlighters");
const { AccessibleHighlighter } = require("devtools/server/actors/highlighters/accessible");
const { LocalizationHelper } = require("devtools/shared/l10n");
const L10N = new LocalizationHelper(
"devtools/shared/locales/accessibility.properties");
const {
accessibility: {
AUDIT_TYPE,
ISSUE_TYPE: {
[AUDIT_TYPE.TEXT_LABEL]: {
DIALOG_NO_NAME,
FORM_NO_VISIBLE_NAME,
TOOLBAR_NO_NAME,
},
},
SCORES: { BEST_PRACTICES, FAIL, WARNING },
},
} = require("devtools/shared/constants");
/**
* Checks for updated content for an infobar.
*
* @param {Object} infobar
* Accessible highlighter's infobar component.
* @param {Object} audit
* Audit information that is passed on highlighter show.
*/
function checkTextLabel(infobar, audit) {
const { issue, score } = audit || {};
let expected = "";
if (issue) {
const { ISSUE_TO_INFOBAR_LABEL_MAP } = infobar.audit.reports[1].constructor;
expected = L10N.getStr(ISSUE_TO_INFOBAR_LABEL_MAP[issue]);
}
is(infobar.getTextContent("text-label"), expected,
"infobar text label audit text content is correct");
if (score) {
ok(infobar.getElement("text-label").classList.contains(
score === FAIL ? "fail" : score));
}
}
// Start testing. First, create highlighter environment and initialize.
const env = new HighlighterEnvironment();
env.initFromWindow(content.window);
// Wait for loading highlighter environment content to complete before creating the
// highlighter.
await new Promise(resolve => {
const doc = env.document;
function onContentLoaded() {
if (doc.readyState === "interactive" || doc.readyState === "complete") {
resolve();
} else {
doc.addEventListener("DOMContentLoaded", onContentLoaded, { once: true });
}
}
onContentLoaded();
});
// Now, we can test the Infobar's audit content.
const node = content.document.createElement("div");
content.document.body.append(node);
const highlighter = new AccessibleHighlighter(env);
const infobar = highlighter.accessibleInfobar;
const bounds = {
x: 0,
y: 0,
w: 250,
h: 100,
};
const tests = [{
desc: "Infobar is shown with no text label audit content when no audit.",
}, {
desc: "Infobar is shown with no text label audit content when audit is null.",
audit: null,
}, {
desc: "Infobar is shown with no text label audit content when empty " +
"text label audit.",
audit: { [AUDIT_TYPE.TEXT_LABEL]: null },
}, {
desc: "Infobar is shown with text label audit content for an error.",
audit: { [AUDIT_TYPE.TEXT_LABEL]: { score: FAIL, issue: TOOLBAR_NO_NAME } },
}, {
desc: "Infobar is shown with text label audit content for a warning.",
audit: { [AUDIT_TYPE.TEXT_LABEL]: {
score: WARNING, issue: FORM_NO_VISIBLE_NAME,
}},
}, {
desc: "Infobar is shown with text label audit content for best practices.",
audit: { [AUDIT_TYPE.TEXT_LABEL]: {
score: BEST_PRACTICES, issue: DIALOG_NO_NAME,
}},
}];
for (const test of tests) {
const { desc, audit } = test;
info(desc);
highlighter.show(node, { ...bounds, audit });
checkTextLabel(infobar, audit && audit[AUDIT_TYPE.TEXT_LABEL]);
highlighter.hide();
}
});
});
});

95
devtools/shared/locales/en-US/accessibility.properties
Просмотреть файл

@ -19,98 +19,3 @@ accessibility.contrast.ratio.label=Contrast:
# contrast ratio description that also specifies that the color contrast criteria used is
# if for large text.
accessibility.contrast.ratio.label.large=Contrast (large text):
# LOCALIZATION NOTE (accessibility.text.label.issue.area): A title text that
# describes that currently selected accessible object for an <area> element must have
# its name provided via the alt attribute.
accessibility.text.label.issue.area = Use “alt” attribute to label “area” elements that have the “href” attribute.
# LOCALIZATION NOTE (accessibility.text.label.issue.dialog): A title text that
# describes that currently selected accessible object for a dialog should have a name
# provided.
accessibility.text.label.issue.dialog = Dialogs should be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.document.title): A title text that
# describes that currently selected accessible object for a document must have a name
# provided via title.
accessibility.text.label.issue.document.title = Documents must have a title.
# LOCALIZATION NOTE (accessibility.text.label.issue.embed): A title text that
# describes that currently selected accessible object for an <embed> must have a name
# provided.
accessibility.text.label.issue.embed = Embedded content must be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.figure): A title text that
# describes that currently selected accessible object for a figure should have a name
# provided.
accessibility.text.label.issue.figure = Figures with optional captions should be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.fieldset): A title text that
# describes that currently selected accessible object for a <fieldset> must have a name
# provided.
accessibility.text.label.issue.fieldset = “fieldset” elements must be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.fieldset.legend): A title text that
# describes that currently selected accessible object for a <fieldset> must have a name
# provided via <legend> element.
accessibility.text.label.issue.fieldset.legend = Use “legend” element to label “fieldset” elements.
# LOCALIZATION NOTE (accessibility.text.label.issue.form): A title text that
# describes that currently selected accessible object for a form element must have a name
# provided.
accessibility.text.label.issue.form = Form elements must be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.form.visible): A title text that
# describes that currently selected accessible object for a form element should have a name
# provided via a visible label/element.
accessibility.text.label.issue.form.visible = Form elements should have a visible text label.
# LOCALIZATION NOTE (accessibility.text.label.issue.frame): A title text that
# describes that currently selected accessible object for a <frame> must have a name
# provided.
accessibility.text.label.issue.frame = “frame” elements must be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.glyph): A title text that
# describes that currently selected accessible object for a <mglyph> must have a name
# provided via alt attribute.
accessibility.text.label.issue.glyph = Use “alt” attribute to label “mglyph” elements.
# LOCALIZATION NOTE (accessibility.text.label.issue.heading): A title text that
# describes that currently selected accessible object for a heading must have a name
# provided.
accessibility.text.label.issue.heading = Headings must be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.heading.content): A title text that
# describes that currently selected accessible object for a heading must have visible
# content.
accessibility.text.label.issue.heading.content = Headings should have visible text content.
# LOCALIZATION NOTE (accessibility.text.label.issue.iframe): A title text that
# describes that currently selected accessible object for an <iframe> have a name
# provided via title attribute.
accessibility.text.label.issue.iframe = Use “title” attribute to describe “iframe” content.
# LOCALIZATION NOTE (accessibility.text.label.issue.image): A title text that
# describes that currently selected accessible object for graphical content must have a
# name provided.
accessibility.text.label.issue.image = Content with images must be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.interactive): A title text that
# describes that currently selected accessible object for interactive element must have a
# name provided.
accessibility.text.label.issue.interactive = Interactive elements must be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.optgroup): A title text that
# describes that currently selected accessible object for an <optgroup> must have a
# name provided.
accessibility.text.label.issue.optgroup = “optgroup” elements must be labeled.
# LOCALIZATION NOTE (accessibility.text.label.issue.optgroup.label): A title text that
# describes that currently selected accessible object for an <optgroup> must have a
# name provided via label attribute.
accessibility.text.label.issue.optgroup.label = Use “label” attribute to label “optgroup” elements.
# LOCALIZATION NOTE (accessibility.text.label.issue.toolbar): A title text that
# describes that currently selected accessible object for a toolbar must have a
# name provided when there is more than one toolbar in the document.
accessibility.text.label.issue.toolbar = Toolbars must be labeled when there is more than one toolbar.