commit ef38f31c5bc4b70ee39683dda6b8f44435173626 parent a074baba6fdca9e95e84f76778a2acfe15ba3052 Author: Joe Cardoso <jow13_122@yahoo.com> Date: Thu, 11 Dec 2025 06:53:51 +0000 Bug 1543628 - Rename Debugger image classes for easier sharing with other panels r=devtools-reviewers,jdescottes Differential Revision: https://phabricator.services.mozilla.com/D274481 Diffstat:
53 files changed, 435 insertions(+), 422 deletions(-)
diff --git a/devtools/client/debugger/src/components/App.js b/devtools/client/debugger/src/components/App.js @@ -14,7 +14,7 @@ import { connect } from "devtools/client/shared/vendor/react-redux"; import { prefs } from "../utils/prefs"; import { primaryPaneTabs } from "../constants"; import actions from "../actions/index"; -import AccessibleImage from "./shared/AccessibleImage"; +import DebuggerImage from "./shared/DebuggerImage"; import { getSelectedLocation, @@ -216,7 +216,7 @@ class App extends Component { { className: "editor-notification-footer", "aria-role": "status" }, span( { className: "info icon" }, - React.createElement(AccessibleImage, { className: "sourcemap" }) + React.createElement(DebuggerImage, { name: "sourcemap" }) ), `Source Map Error: ${this.props.sourceMapError}`, button({ className: "close-button", onClick: this.closeSourceMapError }) @@ -227,7 +227,7 @@ class App extends Component { { className: "editor-notification-footer", "aria-role": "status" }, span( { className: "info icon" }, - React.createElement(AccessibleImage, { className: "sourcemap" }) + React.createElement(DebuggerImage, { name: "sourcemap" }) ), L10N.getFormatStr( "editorNotificationFooter.noOriginalScopes", diff --git a/devtools/client/debugger/src/components/Editor/Breakpoints.css b/devtools/client/debugger/src/components/Editor/Breakpoints.css @@ -239,6 +239,6 @@ fill-opacity: var(--breakpoint-skipped-opacity); } -.img.column-marker { +.dbg-img.dbg-img-column-marker { background-image: url(chrome://devtools/content/debugger/images/column-marker.svg); } diff --git a/devtools/client/debugger/src/components/Editor/Footer.css b/devtools/client/debugger/src/components/Editor/Footer.css @@ -59,7 +59,7 @@ fill: var(--theme-selection-color); } -.source-footer .blackboxed .img.blackBox { +.source-footer .blackboxed .dbg-img.dbg-img-blackBox { background-color: #806414; } diff --git a/devtools/client/debugger/src/components/Editor/Footer.js b/devtools/client/debugger/src/components/Editor/Footer.js @@ -35,7 +35,7 @@ import { import { shouldBlackbox } from "../../utils/source"; import { PaneToggleButton } from "../shared/Button/index"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); const MenuButton = require("resource://devtools/client/shared/components/menu/MenuButton.js"); @@ -82,8 +82,9 @@ class SourceFooter extends PureComponent { className: "action", key: "pretty-loader", }, - React.createElement(AccessibleImage, { - className: "loader spin", + React.createElement(DebuggerImage, { + name: "loader", + className: "spin", }) ); } @@ -109,8 +110,8 @@ class SourceFooter extends PureComponent { "aria-label": prettyPrintMessage, disabled: !canPrettyPrint && !selectedSource.isPrettyPrinted, }, - React.createElement(AccessibleImage, { - className: type, + React.createElement(DebuggerImage, { + name: type, }) ); } @@ -149,8 +150,8 @@ class SourceFooter extends PureComponent { "aria-label": tooltip, disabled: isSourceOnIgnoreList, }, - React.createElement(AccessibleImage, { - className: "blackBox", + React.createElement(DebuggerImage, { + name: "blackBox", }) ); } diff --git a/devtools/client/debugger/src/components/Editor/Preview/ExceptionPopup.js b/devtools/client/debugger/src/components/Editor/Preview/ExceptionPopup.js @@ -16,7 +16,7 @@ const { import actions from "../../../actions/index"; -import AccessibleImage from "../../shared/AccessibleImage"; +import DebuggerImage from "../../shared/DebuggerImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); const ANONYMOUS_FN_NAME = "<anonymous>"; @@ -100,8 +100,9 @@ class ExceptionPopup extends Component { renderArrowIcon(stacktrace) { if (stacktrace.length) { - return React.createElement(AccessibleImage, { - className: classnames("arrow", { + return React.createElement(DebuggerImage, { + name: "arrow", + className: classnames({ expanded: this.state.isStacktraceExpanded, }), }); diff --git a/devtools/client/debugger/src/components/Editor/Preview/Popup.css b/devtools/client/debugger/src/components/Editor/Preview/Popup.css @@ -211,7 +211,7 @@ align-items: center; } -.exception-message .arrow { +.exception-message .dbg-img-arrow { margin-inline-end: 4px; } diff --git a/devtools/client/debugger/src/components/Editor/Tabs.css b/devtools/client/debugger/src/components/Editor/Tabs.css @@ -88,7 +88,7 @@ :root[forced-colors-active] & { color: SelectedItem; - & .img.source-icon { + & .source-icon { fill: var(--theme-icon-hover-color); } } @@ -100,11 +100,11 @@ transform: scaleX(1); } -.source-tab .img.blackBox { +.source-tab .dbg-img.dbg-img-blackBox { mask-size: 14px; } -.source-tab .img.source-icon.blackBox { +.source-tab .dbg-img.dbg-img-blackBox.source-icon { background-color: #806414; } diff --git a/devtools/client/debugger/src/components/Editor/Tabs.js b/devtools/client/debugger/src/components/Editor/Tabs.js @@ -28,7 +28,7 @@ import actions from "../../actions/index"; import Tab from "./Tab"; import { PaneToggleButton } from "../shared/Button/index"; import Dropdown from "../shared/Dropdown"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; import CommandBar from "../SecondaryPanes/CommandBar"; const { debounce } = require("resource://devtools/shared/debounce.js"); @@ -141,8 +141,9 @@ class Tabs extends PureComponent { onClick, title: getFileURL(source, false), }, - React.createElement(AccessibleImage, { - className: `dropdown-icon ${this.getIconClass(source)}`, + React.createElement(DebuggerImage, { + name: this.getIconClass(source), + className: "dropdown-icon", }), span( { @@ -233,8 +234,8 @@ class Tabs extends PureComponent { return null; } const panel = ul(null, hiddenSources.map(this.renderDropdownSource)); - const icon = React.createElement(AccessibleImage, { - className: "more-tabs", + const icon = React.createElement(DebuggerImage, { + name: "more-tabs", }); return React.createElement(Dropdown, { panel, diff --git a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.css @@ -117,7 +117,7 @@ z-index: 1; } - .img { + .dbg-img { grid-row: 1 / -1; grid-column: 1 / -1; transition: rotate 0.2s; @@ -151,11 +151,11 @@ cursor: default; } -.project-text-search .file-result .img { +.project-text-search .file-result .dbg-img { margin-inline: 2px; } -.project-text-search .file-result .img.file { +.project-text-search .file-result .dbg-img.dbg-img-file { margin-inline-end: 4px; } @@ -215,6 +215,6 @@ background-color: var(--theme-selection-background); } -.project-text-search .file-result.focused .img { +.project-text-search .file-result.focused .dbg-img { background-color: currentColor; } diff --git a/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js b/devtools/client/debugger/src/components/PrimaryPanes/ProjectSearch.js @@ -22,7 +22,7 @@ import { } from "../../selectors/index"; import SearchInput from "../shared/SearchInput"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; const { PluralForm } = require("resource://devtools/shared/plural-form.js"); const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -234,13 +234,14 @@ export class ProjectSearch extends Component { }), key: file.location.source.id, }, - React.createElement(AccessibleImage, { - className: classnames("arrow", { + React.createElement(DebuggerImage, { + name: "arrow", + className: classnames({ expanded, }), }), - React.createElement(AccessibleImage, { - className: "file", + React.createElement(DebuggerImage, { + name: "file", }), span( { @@ -307,8 +308,8 @@ export class ProjectSearch extends Component { : L10N.getStr("projectTextSearch.refreshButtonTooltip"), onClick: this.doSearch, }, - React.createElement(AccessibleImage, { - className: "refresh", + React.createElement(DebuggerImage, { + name: "refresh", }) ); } diff --git a/devtools/client/debugger/src/components/PrimaryPanes/Sources.css b/devtools/client/debugger/src/components/PrimaryPanes/Sources.css @@ -165,7 +165,7 @@ html[dir="rtl"] .sources-list .tree .node > div { margin-right: 10px; } -.sources-list .img { +.sources-list .dbg-img { margin-inline-end: 4px; } @@ -183,7 +183,7 @@ html[dir="rtl"] .sources-list .tree .node > div { color: #806414; } -.sources-list .img.blackBox { +.sources-list .dbg-img.dbg-img-blackBox { mask-size: 13px; background-color: #806414; } diff --git a/devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js b/devtools/client/debugger/src/components/PrimaryPanes/SourcesTree.js @@ -37,7 +37,7 @@ import actions from "../../actions/index"; // Components import SourcesTreeItem from "./SourcesTreeItem"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); const Tree = require("resource://devtools/client/shared/components/Tree.js"); @@ -261,8 +261,8 @@ class SourcesTree extends Component { onClick: () => this.props.clearProjectDirectoryRoot(), title: L10N.getFormatStr("removeDirectoryRoot.label"), }, - React.createElement(AccessibleImage, { - className: "back", + React.createElement(DebuggerImage, { + name: "back", }) ), div({ className: "devtools-separator" }), diff --git a/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js b/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.js @@ -8,7 +8,7 @@ import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { connect } from "devtools/client/shared/vendor/react-redux"; import SourceIcon from "../shared/SourceIcon"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; import { getHideIgnoredSources, @@ -74,34 +74,34 @@ class SourceTreeItemContents extends Component { const icon = item.thread.targetType.includes("worker") ? "worker" : "window"; - return React.createElement(AccessibleImage, { - className: classnames(icon), + return React.createElement(DebuggerImage, { + name: icon, }); } if (item.type == "group") { if (item.groupName === "Webpack") { - return React.createElement(AccessibleImage, { - className: "webpack", + return React.createElement(DebuggerImage, { + name: "webpack", }); } else if (item.groupName === "Angular") { - return React.createElement(AccessibleImage, { - className: "angular", + return React.createElement(DebuggerImage, { + name: "angular", }); } // Check if the group relates to an extension. // This happens when a webextension injects a content script. if (item.isForExtensionSource) { - return React.createElement(AccessibleImage, { - className: "extension", + return React.createElement(DebuggerImage, { + name: "extension", }); } - return React.createElement(AccessibleImage, { - className: "globe-small", + return React.createElement(DebuggerImage, { + name: "globe-small", }); } if (item.type == "directory") { - return React.createElement(AccessibleImage, { - className: "folder", + return React.createElement(DebuggerImage, { + name: "folder", }); } if (item.type == "source") { diff --git a/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js b/devtools/client/debugger/src/components/SecondaryPanes/CommandBar.js @@ -17,7 +17,7 @@ import { } from "../../selectors/index"; import actions from "../../actions/index"; import { debugBtn } from "../shared/Button/CommandBarButton"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; const { stringifyFromElectronKey, @@ -231,8 +231,8 @@ class CommandBar extends Component { : L10N.getStr("skipPausingTooltip.label"), onClick: toggleSkipPausing, }, - React.createElement(AccessibleImage, { - className: skipPausing ? "enable-pausing" : "disable-pausing", + React.createElement(DebuggerImage, { + name: skipPausing ? "enable-pausing" : "disable-pausing", }) ); } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js b/devtools/client/debugger/src/components/SecondaryPanes/Expressions.js @@ -16,7 +16,7 @@ import { import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { connect } from "devtools/client/shared/vendor/react-redux"; import { features } from "../../utils/prefs"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; import * as objectInspector from "resource://devtools/client/shared/components/object-inspector/index.js"; @@ -216,7 +216,7 @@ class Expressions extends Component { }, span( { className: "info icon" }, - React.createElement(AccessibleImage, { className: "sourcemap" }) + React.createElement(DebuggerImage, { name: "sourcemap" }) ), span( { className: "message" }, @@ -230,7 +230,7 @@ class Expressions extends Component { { className: "pane-info" }, span( { className: "info icon" }, - React.createElement(AccessibleImage, { className: "loader" }) + React.createElement(DebuggerImage, { name: "loader" }) ), span( { className: "message" }, diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.js @@ -5,7 +5,7 @@ import React, { Component, memo } from "devtools/client/shared/vendor/react"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; -import AccessibleImage from "../../shared/AccessibleImage"; +import DebuggerImage from "../../shared/DebuggerImage"; import { formatDisplayName } from "../../../utils/pause/frames/index"; import { getFileURL } from "../../../utils/source"; import FrameIndent from "./FrameIndent"; @@ -43,8 +43,9 @@ const FrameLocation = memo( className: "location", }, frame.library, - React.createElement(AccessibleImage, { - className: `annotation-logo ${frame.library.toLowerCase()}`, + React.createElement(DebuggerImage, { + name: frame.library.toLowerCase(), + className: "annotation-logo", }) ); } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frames.css @@ -130,7 +130,7 @@ background-color: var(--theme-toolbar-background-hover); } -.frames .img.annotation-logo { +.frames .dbg-img.annotation-logo { margin-inline-end: 4px; background-color: currentColor; } @@ -138,7 +138,7 @@ /* * We also show the library icon in locations, which are forced to RTL. */ -.frames .location .img.annotation-logo { +.frames .location .dbg-img.annotation-logo { margin-inline-start: 4px; } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.css b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.css @@ -35,7 +35,7 @@ color: var(--theme-highlight-blue); } -.frames-group .img.arrow { +.frames-group .dbg-img.dbg-img-arrow { margin-inline-start: -1px; margin-inline-end: 4px; } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/Group.js @@ -7,7 +7,7 @@ import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { getLibraryFromUrl } from "../../../utils/pause/frames/index"; -import AccessibleImage from "../../shared/AccessibleImage"; +import DebuggerImage from "../../shared/DebuggerImage"; import FrameComponent from "./Frame"; import Badge from "../../shared/Badge"; import FrameIndent from "./FrameIndent"; @@ -19,19 +19,20 @@ function FrameLocation({ frame, expanded }) { if (!library) { return null; } - const arrowClassName = classnames("arrow", { - expanded, - }); return React.createElement( "span", { className: "group-description", }, - React.createElement(AccessibleImage, { - className: arrowClassName, + React.createElement(DebuggerImage, { + name: "arrow", + className: classnames({ + expanded, + }), }), - React.createElement(AccessibleImage, { - className: `annotation-logo ${library.toLowerCase()}`, + React.createElement(DebuggerImage, { + name: library.toLowerCase(), + className: "annotation-logo", }), React.createElement( "span", diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.css @@ -6,7 +6,7 @@ padding-inline-end: 3px; } -.secondary-panes .header-buttons .img.shortcuts { +.secondary-panes .header-buttons .dbg-img.dbg-img-shortcuts { width: 14px; height: 14px; /* Better vertical centering of the icon */ @@ -21,7 +21,7 @@ padding-inline-start: 3px; } -.scopes-content .toggle-map-scopes .img.shortcuts { +.scopes-content .toggle-map-scopes .dbg-img.dbg-img-shortcuts { background: var(--theme-comment); } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js b/devtools/client/debugger/src/components/SecondaryPanes/Scopes.js @@ -9,7 +9,7 @@ import { span, } from "devtools/client/shared/vendor/react-dom-factories"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; import { showMenu } from "../../context-menu/menu"; import { connect } from "devtools/client/shared/vendor/react-redux"; import actions from "../../actions/index"; @@ -243,7 +243,7 @@ class Scopes extends PureComponent { }, span( { className: "info icon" }, - React.createElement(AccessibleImage, { className: "sourcemap" }) + React.createElement(DebuggerImage, { name: "sourcemap" }) ), L10N.getFormatStr( "scopes.noOriginalScopes", @@ -261,7 +261,7 @@ class Scopes extends PureComponent { { className: "pane-info" }, span( { className: "info icon" }, - React.createElement(AccessibleImage, { className: "loader" }) + React.createElement(DebuggerImage, { name: "loader" }) ), L10N.getStr("scopes.loadingOriginalScopes") ) @@ -278,7 +278,7 @@ class Scopes extends PureComponent { { className: "pane-info" }, span( { className: "info icon" }, - React.createElement(AccessibleImage, { className: "loader" }) + React.createElement(DebuggerImage, { name: "loader" }) ), L10N.getStr("loadingText") ) diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Thread.js b/devtools/client/debugger/src/components/SecondaryPanes/Thread.js @@ -9,7 +9,7 @@ import { connect } from "devtools/client/shared/vendor/react-redux"; import actions from "../../actions/index"; import { getCurrentThread, getIsPaused } from "../../selectors/index"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -56,8 +56,8 @@ export class Thread extends Component { { className: "icon", }, - React.createElement(AccessibleImage, { - className: iconClassname, + React.createElement(DebuggerImage, { + name: iconClassname, }) ), div( diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Threads.css b/devtools/client/debugger/src/components/SecondaryPanes/Threads.css @@ -30,7 +30,7 @@ background: var(--theme-selection-background); color: var(--theme-selection-color); - & .img { + & .dbg-img { background-color: currentColor; } } @@ -45,7 +45,7 @@ flex: none; } -.threads-list .img { +.threads-list .dbg-img { display: block; } diff --git a/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js b/devtools/client/debugger/src/components/SecondaryPanes/WhyPaused.js @@ -11,7 +11,7 @@ import React, { PureComponent } from "devtools/client/shared/vendor/react"; import { div, span } from "devtools/client/shared/vendor/react-dom-factories"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { connect } from "devtools/client/shared/vendor/react-redux"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; import actions from "../../actions/index"; const Reps = ChromeUtils.importESModule( @@ -191,8 +191,8 @@ class WhyPaused extends PureComponent { { className: "info icon", }, - React.createElement(AccessibleImage, { - className: "info", + React.createElement(DebuggerImage, { + name: "info", }) ), div( diff --git a/devtools/client/debugger/src/components/SecondaryPanes/index.js b/devtools/client/debugger/src/components/SecondaryPanes/index.js @@ -30,7 +30,7 @@ import { shouldLogEventBreakpoints, } from "../../selectors/index"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; import { prefs } from "../../utils/prefs"; import Breakpoints from "./Breakpoints/index"; @@ -56,8 +56,8 @@ function debugBtn(onClick, type, className, tooltip) { key: type, title: tooltip, }, - React.createElement(AccessibleImage, { - className: type, + React.createElement(DebuggerImage, { + name: type, title: tooltip, "aria-label": tooltip, }) @@ -230,8 +230,8 @@ class SecondaryPanes extends Component { onClick: e => e.stopPropagation(), title: L10N.getStr("scopes.showOriginalScopesHelpTooltip"), }, - React.createElement(AccessibleImage, { - className: "shortcuts", + React.createElement(DebuggerImage, { + name: "shortcuts", }) ) ), diff --git a/devtools/client/debugger/src/components/shared/AccessibleImage.css b/devtools/client/debugger/src/components/shared/AccessibleImage.css @@ -1,207 +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/>. */ - -.img { - display: inline-block; - width: 16px; - height: 16px; - vertical-align: middle; - /* use background-color for the icon color, and mask-image for its shape */ - background-color: var(--theme-icon-color); - mask-size: contain; - mask-repeat: no-repeat; - mask-position: center; - /* multicolor icons use background-image */ - background-position: center; - background-repeat: no-repeat; - background-size: contain; - /* do not let images shrink when used as flex children */ - flex-shrink: 0; -} - -/* Expand arrow icon */ -.img.arrow { - width: 10px; - height: 10px; - mask-image: url(chrome://devtools/content/debugger/images/arrow.svg); - /* we may override the width/height in specific contexts to make the - clickable area bigger, but we should always keep the mask size 10x10 */ - mask-size: 10px 10px; - background-color: var(--theme-icon-dimmed-color); - transform: rotate(-90deg); - transition: transform 180ms var(--animation-curve); -} - -.img.arrow:dir(rtl) { - transform: rotate(90deg); -} - -.img.arrow.expanded { - /* icon should always point to the bottom (default) when expanded, - regardless of the text direction */ - transform: none !important; -} - -.img.arrow-down { - mask-image: url(chrome://devtools/content/debugger/images/arrow-down.svg); -} - -.img.arrow-up { - mask-image: url(chrome://devtools/content/debugger/images/arrow-up.svg); -} - -.img.blackBox { - mask-image: url(chrome://devtools/content/debugger/images/blackBox.svg); -} - -.img.close { - mask-image: url(chrome://devtools/skin/images/close.svg); -} - -.img.disable-pausing { - mask-image: url(chrome://devtools/content/debugger/images/disable-pausing.svg); -} - -.img.enable-pausing { - mask-image: url(chrome://devtools/content/debugger/images/enable-pausing.svg); - background-color: var(--theme-icon-checked-color); -} - -.img.globe { - mask-image: url(chrome://devtools/content/debugger/images/globe.svg); -} - -.img.globe-small { - mask-image: url(chrome://devtools/content/debugger/images/globe-small.svg); - mask-size: 12px 12px; -} - -.img.window { - mask-image: url(chrome://devtools/content/debugger/images/window.svg); -} - -.img.file { - background-image: url(chrome://devtools/content/debugger/images/file-small.svg); - background-size: 12px 12px; - background-color: transparent !important; - -moz-context-properties: fill; - fill: var(--theme-icon-color); -} - -.img.folder { - mask-image: url(chrome://devtools/content/debugger/images/folder.svg); -} - -.img.back { - background-image: url(chrome://devtools/skin/images/webconsole/return.svg); - -moz-context-properties: fill; - fill: var(--theme-icon-color); - background-color: unset; -} - -.img.info { - mask-image: url(chrome://devtools/skin/images/info.svg); -} - -.img.loader { - background-image: url(chrome://devtools/content/debugger/images/loader.svg); - -moz-context-properties: fill; - fill: var(--theme-icon-color); - background-color: unset; -} - -.img.more-tabs { - mask-image: url(chrome://devtools/content/debugger/images/command-chevron.svg); -} - -html[dir="rtl"] .img.more-tabs { - transform: scaleX(-1); -} - -.img.sourcemap { - background-image: url(chrome://devtools/content/debugger/images/sourcemap.svg); - -moz-context-properties: fill; - fill: var(--theme-icon-warning-color); - background-color: unset; -} - -.img.next { - mask-image: url(chrome://devtools/content/debugger/images/next.svg); -} - -.img.next-circle { - mask-image: url(chrome://devtools/content/debugger/images/next-circle.svg); -} - -.img.pane-collapse { - mask-image: url(chrome://devtools/content/debugger/images/pane-collapse.svg); -} - -.img.pane-expand { - mask-image: url(chrome://devtools/content/debugger/images/pane-expand.svg); -} - -.img.pause { - mask-image: url(chrome://devtools/content/debugger/images/pause.svg); -} - -.img.plus { - mask-image: url(chrome://devtools/skin/images/add.svg); -} - -.img.prettyPrint { - background-image: url(chrome://devtools/content/debugger/images/prettyPrint.svg); - background-size: 14px 14px; - background-color: transparent !important; - fill: var(--theme-icon-color); - -moz-context-properties: fill, stroke; -} - -.img.removeAll { - mask-image: url(chrome://devtools/skin/images/clear.svg) -} - -.img.refresh { - mask-image: url(chrome://devtools/skin/images/reload.svg); -} - -.img.resume { - mask-image: url(resource://devtools-shared-images/resume.svg); -} - -.img.search { - mask-image: url(chrome://devtools/content/debugger/images/search.svg); -} - -.img.shortcuts { - mask-image: url(chrome://devtools/content/debugger/images/help.svg); -} - -.img.spin { - animation: spin 0.5s linear infinite; -} - -.img.stepIn { - mask-image: url(chrome://devtools/content/debugger/images/stepIn.svg); -} - -.img.stepOut { - mask-image: url(chrome://devtools/content/debugger/images/stepOut.svg); -} - -.img.stepOver { - mask-image: url(resource://devtools-shared-images/stepOver.svg); -} - -.img.tab { - mask-image: url(chrome://devtools/content/debugger/images/tab.svg); -} - -.img.worker { - mask-image: url(chrome://devtools/content/debugger/images/worker.svg); -} - -.img.extension { - mask-image: url(chrome://devtools/content/debugger/images/sources/extension.svg); -} diff --git a/devtools/client/debugger/src/components/shared/AccessibleImage.js b/devtools/client/debugger/src/components/shared/AccessibleImage.js @@ -1,21 +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/>. */ - -import React from "devtools/client/shared/vendor/react"; -import PropTypes from "devtools/client/shared/vendor/react-prop-types"; - -const classnames = require("resource://devtools/client/shared/classnames.js"); - -const AccessibleImage = props => { - return React.createElement("span", { - ...props, - className: classnames("img", props.className), - }); -}; - -AccessibleImage.propTypes = { - className: PropTypes.string.isRequired, -}; - -export default AccessibleImage; diff --git a/devtools/client/debugger/src/components/shared/Accordion.css b/devtools/client/debugger/src/components/shared/Accordion.css @@ -95,7 +95,7 @@ height: 16px; } -.accordion ._header .header-buttons button .img { +.accordion ._header .header-buttons button .dbg-img { display: block; } diff --git a/devtools/client/debugger/src/components/shared/Button/CloseButton.js b/devtools/client/debugger/src/components/shared/Button/CloseButton.js @@ -6,7 +6,7 @@ import React from "devtools/client/shared/vendor/react"; import { button } from "devtools/client/shared/vendor/react-dom-factories"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; -import AccessibleImage from "../AccessibleImage"; +import DebuggerImage from "../DebuggerImage"; function CloseButton({ handleClick, buttonClass, tooltip }) { return button( @@ -15,8 +15,8 @@ function CloseButton({ handleClick, buttonClass, tooltip }) { onClick: handleClick, title: tooltip, }, - React.createElement(AccessibleImage, { - className: "close", + React.createElement(DebuggerImage, { + name: "close", }) ); } diff --git a/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js b/devtools/client/debugger/src/components/shared/Button/CommandBarButton.js @@ -6,7 +6,7 @@ import React from "devtools/client/shared/vendor/react"; import { button } from "devtools/client/shared/vendor/react-dom-factories"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; -import AccessibleImage from "../AccessibleImage"; +import DebuggerImage from "../DebuggerImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -28,8 +28,8 @@ export function debugBtn( pressed: ariaPressed, title: tooltip, }, - React.createElement(AccessibleImage, { - className: type, + React.createElement(DebuggerImage, { + name: type, }) ); } diff --git a/devtools/client/debugger/src/components/shared/Button/PaneToggleButton.js b/devtools/client/debugger/src/components/shared/Button/PaneToggleButton.js @@ -4,7 +4,7 @@ import React, { PureComponent } from "devtools/client/shared/vendor/react"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; -import AccessibleImage from "../AccessibleImage"; +import DebuggerImage from "../DebuggerImage"; import { CommandBarButton } from "./index"; const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -48,8 +48,8 @@ class PaneToggleButton extends PureComponent { onClick: () => handleClick(position, !collapsed), title: this.label(position, collapsed), }, - React.createElement(AccessibleImage, { - className: collapsed ? "pane-expand" : "pane-collapse", + React.createElement(DebuggerImage, { + name: collapsed ? "pane-expand" : "pane-collapse", }) ); } diff --git a/devtools/client/debugger/src/components/shared/Button/styles/CloseButton.css b/devtools/client/debugger/src/components/shared/Button/styles/CloseButton.css @@ -16,7 +16,7 @@ background-color: var(--theme-selection-background); } -.close-btn .img { +.close-btn .dbg-img { display: block; width: 12px; height: 12px; @@ -29,7 +29,7 @@ height: 20px; } -.close-btn.big .img { +.close-btn.big .dbg-img { width: 16px; height: 16px; } diff --git a/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css b/devtools/client/debugger/src/components/shared/Button/styles/CommandBarButton.css @@ -20,7 +20,7 @@ .command-bar-button:disabled { cursor: default; - & .img { + & .dbg-img { background-color: var(--theme-icon-disabled-color); } } diff --git a/devtools/client/debugger/src/components/shared/Button/styles/PaneToggleButton.css b/devtools/client/debugger/src/components/shared/Button/styles/PaneToggleButton.css @@ -6,7 +6,7 @@ padding: 4px 6px; } -.toggle-button .img { +.toggle-button .dbg-img { vertical-align: middle; } @@ -19,11 +19,11 @@ margin-inline-start: 0; } -html[dir="rtl"] .toggle-button.start .img, -html[dir="ltr"] .toggle-button.end:not(.vertical) .img { +html[dir="rtl"] .toggle-button.start .dbg-img, +html[dir="ltr"] .toggle-button.end:not(.vertical) .dbg-img { transform: scaleX(-1); } -.toggle-button.end.vertical .img { +.toggle-button.end.vertical .dbg-img { transform: rotate(-90deg); } diff --git a/devtools/client/debugger/src/components/shared/DebuggerImage.css b/devtools/client/debugger/src/components/shared/DebuggerImage.css @@ -0,0 +1,207 @@ +/* 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/>. */ + +.dbg-img { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; + /* use background-color for the icon color, and mask-image for its shape */ + background-color: var(--theme-icon-color); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + /* multicolor icons use background-image */ + background-position: center; + background-repeat: no-repeat; + background-size: contain; + /* do not let images shrink when used as flex children */ + flex-shrink: 0; +} + +/* Expand arrow icon */ +.dbg-img.dbg-img-arrow { + width: 10px; + height: 10px; + mask-image: url(chrome://devtools/content/debugger/images/arrow.svg); + /* we may override the width/height in specific contexts to make the + clickable area bigger, but we should always keep the mask size 10x10 */ + mask-size: 10px 10px; + background-color: var(--theme-icon-dimmed-color); + transform: rotate(-90deg); + transition: transform 180ms var(--animation-curve); +} + +.dbg-img.dbg-img-arrow:dir(rtl) { + transform: rotate(90deg); +} + +.dbg-img.dbg-img-arrow.expanded { + /* icon should always point to the bottom (default) when expanded, + regardless of the text direction */ + transform: none !important; +} + +.dbg-img.dbg-img-arrow-down { + mask-image: url(chrome://devtools/content/debugger/images/arrow-down.svg); +} + +.dbg-img.dbg-img-arrow-up { + mask-image: url(chrome://devtools/content/debugger/images/arrow-up.svg); +} + +.dbg-img.dbg-img-blackBox { + mask-image: url(chrome://devtools/content/debugger/images/blackBox.svg); +} + +.dbg-img.dbg-img-close { + mask-image: url(chrome://devtools/skin/images/close.svg); +} + +.dbg-img.dbg-img-disable-pausing { + mask-image: url(chrome://devtools/content/debugger/images/disable-pausing.svg); +} + +.dbg-img.dbg-img-enable-pausing { + mask-image: url(chrome://devtools/content/debugger/images/enable-pausing.svg); + background-color: var(--theme-icon-checked-color); +} + +.dbg-img.dbg-img-globe { + mask-image: url(chrome://devtools/content/debugger/images/globe.svg); +} + +.dbg-img.dbg-img-globe-small { + mask-image: url(chrome://devtools/content/debugger/images/globe-small.svg); + mask-size: 12px 12px; +} + +.dbg-img.dbg-img-window { + mask-image: url(chrome://devtools/content/debugger/images/window.svg); +} + +.dbg-img.dbg-img-file { + background-image: url(chrome://devtools/content/debugger/images/file-small.svg); + background-size: 12px 12px; + background-color: transparent !important; + -moz-context-properties: fill; + fill: var(--theme-icon-color); +} + +.dbg-img.dbg-img-folder { + mask-image: url(chrome://devtools/content/debugger/images/folder.svg); +} + +.dbg-img.dbg-img-back { + background-image: url(chrome://devtools/skin/images/webconsole/return.svg); + -moz-context-properties: fill; + fill: var(--theme-icon-color); + background-color: unset; +} + +.dbg-img.dbg-img-info { + mask-image: url(chrome://devtools/skin/images/info.svg); +} + +.dbg-img.dbg-img-loader { + background-image: url(chrome://devtools/content/debugger/images/loader.svg); + -moz-context-properties: fill; + fill: var(--theme-icon-color); + background-color: unset; +} + +.dbg-img-loader.spin { + animation: spin 0.5s linear infinite; +} + +.dbg-img.dbg-img-more-tabs { + mask-image: url(chrome://devtools/content/debugger/images/command-chevron.svg); +} + +html[dir="rtl"] .dbg-img.dbg-img-more-tabs { + transform: scaleX(-1); +} + +.dbg-img.dbg-img-sourcemap { + background-image: url(chrome://devtools/content/debugger/images/sourcemap.svg); + -moz-context-properties: fill; + fill: var(--theme-icon-warning-color); + background-color: unset; +} + +.dbg-img.dbg-img-next { + mask-image: url(chrome://devtools/content/debugger/images/next.svg); +} + +.dbg-img.dbg-img-next-circle { + mask-image: url(chrome://devtools/content/debugger/images/next-circle.svg); +} + +.dbg-img.dbg-img-pane-collapse { + mask-image: url(chrome://devtools/content/debugger/images/pane-collapse.svg); +} + +.dbg-img.dbg-img-pane-expand { + mask-image: url(chrome://devtools/content/debugger/images/pane-expand.svg); +} + +.dbg-img.dbg-img-pause { + mask-image: url(chrome://devtools/content/debugger/images/pause.svg); +} + +.dbg-img.dbg-img-plus { + mask-image: url(chrome://devtools/skin/images/add.svg); +} + +.dbg-img.dbg-img-prettyPrint { + background-image: url(chrome://devtools/content/debugger/images/prettyPrint.svg); + background-size: 14px 14px; + background-color: transparent !important; + fill: var(--theme-icon-color); + -moz-context-properties: fill, stroke; +} + +.dbg-img.dbg-img-removeAll { + mask-image: url(chrome://devtools/skin/images/clear.svg); +} + +.dbg-img.dbg-img-refresh { + mask-image: url(chrome://devtools/skin/images/reload.svg); +} + +.dbg-img.dbg-img-resume { + mask-image: url(resource://devtools-shared-images/resume.svg); +} + +.dbg-img.dbg-img-search { + mask-image: url(chrome://devtools/content/debugger/images/search.svg); +} + +.dbg-img.dbg-img-shortcuts { + mask-image: url(chrome://devtools/content/debugger/images/help.svg); +} + +.dbg-img.dbg-img-stepIn { + mask-image: url(chrome://devtools/content/debugger/images/stepIn.svg); +} + +.dbg-img.dbg-img-stepOut { + mask-image: url(chrome://devtools/content/debugger/images/stepOut.svg); +} + +.dbg-img.dbg-img-stepOver { + mask-image: url(resource://devtools-shared-images/stepOver.svg); +} + +.dbg-img.dbg-img-tab { + mask-image: url(chrome://devtools/content/debugger/images/tab.svg); +} + +.dbg-img.dbg-img-worker { + mask-image: url(chrome://devtools/content/debugger/images/worker.svg); +} + +.dbg-img.dbg-img-extension { + mask-image: url(chrome://devtools/content/debugger/images/sources/extension.svg); +} diff --git a/devtools/client/debugger/src/components/shared/DebuggerImage.js b/devtools/client/debugger/src/components/shared/DebuggerImage.js @@ -0,0 +1,23 @@ +/* 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/>. */ + +import React from "devtools/client/shared/vendor/react"; +import PropTypes from "devtools/client/shared/vendor/react-prop-types"; + +const classnames = require("resource://devtools/client/shared/classnames.js"); + +const DebuggerImage = props => { + const { name, className, ...attributes } = props; + return React.createElement("span", { + ...attributes, + className: classnames("dbg-img", `dbg-img-${name}`, className), + }); +}; + +DebuggerImage.propTypes = { + name: PropTypes.string.isRequired, + className: PropTypes.string, +}; + +export default DebuggerImage; diff --git a/devtools/client/debugger/src/components/shared/Dropdown.css b/devtools/client/debugger/src/components/shared/Dropdown.css @@ -47,7 +47,7 @@ outline-offset: -2px; } -.dropdown-button .img { +.dropdown-button .dbg-img { display: block; } @@ -72,8 +72,8 @@ fill: currentColor; } - .dropdown-icon.prettyPrint, - .dropdown-icon.blackBox { + .dbg-img-prettyPrint.dropdown-icon, + .dbg-img-blackBox.dropdown-icon { background-color: currentColor; } } @@ -91,8 +91,8 @@ white-space: nowrap; } -.dropdown-icon.prettyPrint, -.dropdown-icon.blackBox { +.dbg-img-prettyPrint.dropdown-icon, +.dbg-img-blackBox.dropdown-icon { background-color: var(--theme-highlight-blue); } diff --git a/devtools/client/debugger/src/components/shared/EventListeners.js b/devtools/client/debugger/src/components/shared/EventListeners.js @@ -23,7 +23,7 @@ import { getEventListenerExpanded, } from "../../selectors/index"; -import AccessibleImage from "../shared/AccessibleImage"; +import DebuggerImage from "../shared/DebuggerImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); const isOSX = Services.appinfo.OS == "Darwin"; @@ -268,8 +268,9 @@ class EventListeners extends Component { className: "event-listener-expand", onClick: () => this.onCategoryToggle(category.name), }, - React.createElement(AccessibleImage, { - className: classnames("arrow", { + React.createElement(DebuggerImage, { + name: "arrow", + className: classnames({ expanded, }), }) diff --git a/devtools/client/debugger/src/components/shared/ResultList.js b/devtools/client/debugger/src/components/shared/ResultList.js @@ -6,7 +6,7 @@ import React, { Component } from "devtools/client/shared/vendor/react"; import { li, div, ul } from "devtools/client/shared/vendor/react-dom-factories"; import PropTypes from "devtools/client/shared/vendor/react-prop-types"; -import AccessibleImage from "./AccessibleImage"; +import DebuggerImage from "./DebuggerImage"; const classnames = require("resource://devtools/client/shared/classnames.js"); @@ -64,8 +64,8 @@ export default class ResultList extends Component { { className: "icon", }, - React.createElement(AccessibleImage, { - className: item.icon, + React.createElement(DebuggerImage, { + name: item.icon, }) ), div( diff --git a/devtools/client/debugger/src/components/shared/SearchInput.css b/devtools/client/debugger/src/components/shared/SearchInput.css @@ -19,7 +19,7 @@ width: 100%; } -.search-field .img.search { +.search-field .dbg-img.dbg-img-search { --icon-mask-size: 12px; --icon-inset-inline-start: 6px; position: absolute; @@ -30,20 +30,20 @@ pointer-events: none; } -.search-field.big .img.search { +.search-field.big .dbg-img.dbg-img-search { --icon-mask-size: 16px; --icon-inset-inline-start: 12px; } -[dir="ltr"] .search-field .img.search { +[dir="ltr"] .search-field .dbg-img.dbg-img-search { left: var(--icon-inset-inline-start); } -[dir="rtl"] .search-field .img.search { +[dir="rtl"] .search-field .dbg-img.dbg-img-search { right: var(--icon-inset-inline-start); } -.search-field .img.loader { +.search-field .dbg-img.dbg-img-loader { width: 24px; height: 24px; margin-inline-end: 4px; diff --git a/devtools/client/debugger/src/components/shared/SearchInput.js b/devtools/client/debugger/src/components/shared/SearchInput.js @@ -14,7 +14,7 @@ import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { connect } from "devtools/client/shared/vendor/react-redux"; import { CloseButton } from "./Button/index"; -import AccessibleImage from "./AccessibleImage"; +import DebuggerImage from "./DebuggerImage"; import actions from "../../actions/index"; import { getSearchOptions } from "../../selectors/index"; @@ -31,8 +31,8 @@ const arrowBtn = (onClick, type, className, tooltip) => { }; return button( props, - React.createElement(AccessibleImage, { - className: type, + React.createElement(DebuggerImage, { + name: type, }) ); }; @@ -226,8 +226,9 @@ export class SearchInput extends Component { if (!isLoading) { return null; } - return React.createElement(AccessibleImage, { - className: "loader spin", + return React.createElement(DebuggerImage, { + name: "loader", + className: "spin", }); } @@ -339,8 +340,8 @@ export class SearchInput extends Component { "aria-owns": "result-list", "aria-expanded": expanded, }, - React.createElement(AccessibleImage, { - className: "search", + React.createElement(DebuggerImage, { + name: "search", }), input(inputProps), this.renderSpinner(), diff --git a/devtools/client/debugger/src/components/shared/SourceIcon.css b/devtools/client/debugger/src/components/shared/SourceIcon.css @@ -3,7 +3,7 @@ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */ /** - * Variant of AccessibleImage used in sources list and tabs. + * Variant of DebuggerImage used in sources list and tabs. * Define the different source type / framework / library icons here. */ @@ -13,54 +13,54 @@ /* Icons for frameworks and libs */ -.img.aframe { +.dbg-img.dbg-img-aframe { background-image: url(chrome://devtools/content/debugger/images/sources/aframe.svg); background-color: transparent !important; } -.img.angular { +.dbg-img.dbg-img-angular { background-image: url(chrome://devtools/content/debugger/images/sources/angular.svg); background-color: transparent !important; } -.img.babel { +.dbg-img.dbg-img-babel { mask-image: url(chrome://devtools/content/debugger/images/sources/babel.svg); } -.img.backbone { +.dbg-img.dbg-img-backbone { mask-image: url(chrome://devtools/content/debugger/images/sources/backbone.svg); } -.img.coffeescript { +.dbg-img.dbg-img-coffeescript { background-image: url(chrome://devtools/content/debugger/images/sources/coffeescript.svg); background-color: transparent !important; fill: var(--theme-icon-color); -moz-context-properties: fill; } -.img.dojo { +.dbg-img.dbg-img-dojo { background-image: url(chrome://devtools/content/debugger/images/sources/dojo.svg); background-color: transparent !important; } -.img.ember { +.dbg-img.dbg-img-ember { background-image: url(chrome://devtools/content/debugger/images/sources/ember.svg); background-color: transparent !important; } -.img.express { +.dbg-img.dbg-img-express { mask-image: url(chrome://devtools/content/debugger/images/sources/express.svg); } -.img.extension { +.dbg-img.dbg-img-extension { mask-image: url(chrome://devtools/content/debugger/images/sources/extension.svg); } -.img.immutable { +.dbg-img.dbg-img-immutable { mask-image: url(chrome://devtools/content/debugger/images/sources/immutable.svg); } -.img.javascript { +.dbg-img.dbg-img-javascript { background-image: url(chrome://devtools/content/debugger/images/sources/javascript.svg); background-size: 14px 14px; background-color: transparent !important; @@ -68,7 +68,7 @@ -moz-context-properties: fill; } -.img.has-network-override::after { +.dbg-img.dbg-img-has-network-override::after { content: ""; display: block; height: 5px; @@ -79,93 +79,93 @@ translate: 12px 10px; } -.node.focused .img.has-network-override::after { +.node.focused .dbg-img.dbg-img-has-network-override::after { outline-color: var(--theme-selection-background); } -.img.jquery { +.dbg-img.dbg-img-jquery { mask-image: url(chrome://devtools/content/debugger/images/sources/jquery.svg); } -.img.lodash { +.dbg-img.dbg-img-lodash { mask-image: url(chrome://devtools/content/debugger/images/sources/lodash.svg); } -.img.marko { +.dbg-img.dbg-img-marko { background-image: url(chrome://devtools/content/debugger/images/sources/marko.svg); background-color: transparent !important; } -.img.mobx { +.dbg-img.dbg-img-mobx { background-image: url(chrome://devtools/content/debugger/images/sources/mobx.svg); background-color: transparent !important; } -.img.nextjs { +.dbg-img.dbg-img-nextjs { background-image: url(chrome://devtools/content/debugger/images/sources/nextjs.svg); background-color: transparent !important; } -.img.node { +.dbg-img.dbg-img-node { background-image: url(chrome://devtools/content/debugger/images/sources/node.svg); background-color: transparent !important; } -.img.nuxtjs { +.dbg-img.dbg-img-nuxtjs { background-image: url(chrome://devtools/content/debugger/images/sources/nuxtjs.svg); background-color: transparent !important; } -.img.preact { +.dbg-img.dbg-img-preact { background-image: url(chrome://devtools/content/debugger/images/sources/preact.svg); background-color: transparent !important; } -.img.pug { +.dbg-img.dbg-img-pug { background-image: url(chrome://devtools/content/debugger/images/sources/pug.svg); background-color: transparent !important; } -.img.react { +.dbg-img.dbg-img-react { background-image: url(chrome://devtools/content/debugger/images/sources/react.svg); background-color: transparent !important; fill: var(--theme-highlight-bluegrey); -moz-context-properties: fill; } -.img.redux { +.dbg-img.dbg-img-redux { mask-image: url(chrome://devtools/content/debugger/images/sources/redux.svg); } -.img.rxjs { +.dbg-img.dbg-img-rxjs { background-image: url(chrome://devtools/content/debugger/images/sources/rxjs.svg); background-color: transparent !important; } -.img.sencha-extjs { +.dbg-img.dbg-img-sencha-extjs { background-image: url(chrome://devtools/content/debugger/images/sources/sencha-extjs.svg); background-color: transparent !important; } -.img.typescript { +.dbg-img.dbg-img-typescript { background-image: url(chrome://devtools/content/debugger/images/sources/typescript.svg); background-color: transparent !important; fill: var(--theme-icon-color); -moz-context-properties: fill; } -.img.underscore { +.dbg-img.dbg-img-underscore { mask-image: url(chrome://devtools/content/debugger/images/sources/underscore.svg); } /* We use both 'Vue' and 'VueJS' when identifying frameworks */ -.img.vue, -.img.vuejs { +.dbg-img.dbg-img-vue, +.dbg-img.dbg-img-vuejs { background-image: url(chrome://devtools/content/debugger/images/sources/vuejs.svg); background-color: transparent !important; } -.img.webpack { +.dbg-img.dbg-img-webpack { background-image: url(chrome://devtools/content/debugger/images/sources/webpack.svg); background-color: transparent !important; } diff --git a/devtools/client/debugger/src/components/shared/SourceIcon.js b/devtools/client/debugger/src/components/shared/SourceIcon.js @@ -7,7 +7,7 @@ import PropTypes from "devtools/client/shared/vendor/react-prop-types"; import { connect } from "devtools/client/shared/vendor/react-redux"; -import AccessibleImage from "./AccessibleImage"; +import DebuggerImage from "./DebuggerImage"; import { getSourceClassnames } from "../../utils/source"; import { isSourceBlackBoxed } from "../../selectors/index"; @@ -17,23 +17,24 @@ class SourceIcon extends PureComponent { return { modifier: PropTypes.func, location: PropTypes.object.isRequired, - iconClass: PropTypes.string, + iconName: PropTypes.string, }; } render() { const { modifier } = this.props; - let { iconClass } = this.props; + let { iconName } = this.props; if (modifier) { - const modified = modifier(iconClass); + const modified = modifier(iconName); if (!modified) { return null; } - iconClass = modified; + iconName = modified; } - return React.createElement(AccessibleImage, { - className: `source-icon ${iconClass}`, + return React.createElement(DebuggerImage, { + name: iconName, + className: "source-icon", }); } } @@ -44,9 +45,9 @@ export default connect((state, props) => { // This is the key function that will compute the icon type, // In addition to the "modifier" implemented by each callsite. - const iconClass = getSourceClassnames(location.source, isBlackBoxed); + const iconName = getSourceClassnames(location.source, isBlackBoxed); return { - iconClass, + iconName, }; })(SourceIcon); diff --git a/devtools/client/debugger/src/components/shared/moz.build b/devtools/client/debugger/src/components/shared/moz.build @@ -8,10 +8,10 @@ DIRS += [ ] CompiledModules( - "AccessibleImage.js", "Accordion.js", "Badge.js", "BracketArrow.js", + "DebuggerImage.js", "Dropdown.js", "EventListeners.js", "Modal.js", @@ -19,6 +19,6 @@ CompiledModules( "PreviewFunction.js", "ResultList.js", "SearchInput.js", - "SourceIcon.js", "SmartGap.js", + "SourceIcon.js", ) diff --git a/devtools/client/debugger/src/debugger.css b/devtools/client/debugger/src/debugger.css @@ -9,13 +9,13 @@ /* Devtools imports */ @import url("chrome://devtools/content/debugger/src/components/variables.css"); @import url("chrome://devtools/content/debugger/src/components/App.css"); -@import url("chrome://devtools/content/debugger/src/components/shared/AccessibleImage.css"); @import url("chrome://devtools/content/debugger/src/components/shared/Accordion.css"); @import url("chrome://devtools/content/debugger/src/components/shared/Badge.css"); @import url("chrome://devtools/content/debugger/src/components/shared/BracketArrow.css"); @import url("chrome://devtools/content/debugger/src/components/shared/Button/styles/CloseButton.css"); @import url("chrome://devtools/content/debugger/src/components/shared/Button/styles/CommandBarButton.css"); @import url("chrome://devtools/content/debugger/src/components/shared/Button/styles/PaneToggleButton.css"); +@import url("chrome://devtools/content/debugger/src/components/shared/DebuggerImage.css"); @import url("chrome://devtools/content/debugger/src/components/shared/Dropdown.css"); @import url("chrome://devtools/content/debugger/src/components/shared/menu.css"); @import url("chrome://devtools/content/debugger/src/components/shared/Modal.css"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-all.js b/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-all.js @@ -208,7 +208,7 @@ function assertSourceNodeIsBlackBoxed(dbg, sourceFilename, shouldBeBlackBoxed) { const treeItem = findSourceNodeWithText(dbg, sourceFilename); ok(treeItem, `Found tree item for ${sourceFilename}`); is( - !!treeItem.querySelector(".img.blackBox"), + !!treeItem.querySelector(".dbg-img-blackBox"), shouldBeBlackBoxed, `${sourceFilename} is ${shouldBeBlackBoxed ? "" : "not"} blackboxed` ); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-original.js b/devtools/client/debugger/test/mochitest/browser_dbg-blackbox-original.js @@ -23,13 +23,13 @@ add_task(async function () { const sourceTab = findElementWithSelector(dbg, ".source-tab.active"); ok( - sourceTab.querySelector(".img.blackBox"), + sourceTab.querySelector(".dbg-img-blackBox"), "Source tab has a blackbox icon" ); const treeItem = findElementWithSelector(dbg, ".tree-node.focused"); ok( - treeItem.querySelector(".img.blackBox"), + treeItem.querySelector(".dbg-img-blackBox"), "Source tree item has a blackbox icon" ); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-quick-open.js b/devtools/client/debugger/test/mochitest/browser_dbg-quick-open.js @@ -167,7 +167,7 @@ function findResultEl(dbg, index = 1) { async function assertResultIsTab(dbg, index) { const el = await findResultEl(dbg, index); ok( - el && !!el.querySelector(".tab.result-item-icon"), + el && !!el.querySelector(".dbg-img-tab.result-item-icon"), "Result should be a tab" ); } diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js b/devtools/client/debugger/test/mochitest/browser_dbg-react-app.js @@ -32,7 +32,7 @@ add_task(async function () { const sourceTab = findElementWithSelector(dbg, ".source-tab.active"); ok( - sourceTab.querySelector(".source-icon.javascript"), + sourceTab.querySelector(".dbg-img-javascript.source-icon"), "Source tab for a react file has a Javascript icon" ); assertSourceIcon(dbg, "App.js", "javascript"); diff --git a/devtools/client/debugger/test/mochitest/browser_dbg-tabs.js b/devtools/client/debugger/test/mochitest/browser_dbg-tabs.js @@ -145,7 +145,7 @@ add_task(async function testOpeningAndClosingTabs() { await selectSource(dbg, source); } ok( - findElementWithSelector(dbg, ".more-tabs"), + findElementWithSelector(dbg, ".dbg-img-more-tabs"), "There is some hidden tabs displayed via a dropdown" ); @@ -164,7 +164,7 @@ add_task(async function testOpeningAndClosingTabs() { await onCloseTabsAction; is(countTabs(dbg), 0); ok( - !findElementWithSelector(dbg, ".more-tabs"), + !findElementWithSelector(dbg, ".dbg-img-more-tabs"), "After closing all tabs, hidden tabs dropdown is hidden" ); }); diff --git a/devtools/client/debugger/test/mochitest/integration/browser_dbg-features-source-tree.js b/devtools/client/debugger/test/mochitest/integration/browser_dbg-features-source-tree.js @@ -304,7 +304,7 @@ add_task(async function testSourceTreeOnTheIntegrationTestPage() { const mainThreadItem = findSourceTreeThreadByName(dbg, "Main Thread"); ok(mainThreadItem, "Found the thread item for the main thread"); ok( - mainThreadItem.querySelector("span.img.window"), + mainThreadItem.querySelector("span.dbg-img-window"), "The thread has the window icon" ); @@ -350,7 +350,7 @@ add_task(async function testSourceTreeOnTheIntegrationTestPage() { const workerThreadItem = findSourceTreeThreadByName(dbg, "same-url.sjs"); ok(workerThreadItem, "Found the thread item for the worker"); ok( - workerThreadItem.querySelector("span.img.worker"), + workerThreadItem.querySelector("span.dbg-img-worker"), "The thread has the worker icon" ); @@ -484,7 +484,7 @@ add_task(async function testSourceTreeWithWebExtensionContentScript() { ); ok(contentScriptGroupItem, "Found the group item for the content script"); ok( - contentScriptGroupItem.querySelector("span.img.extension"), + contentScriptGroupItem.querySelector("span.dbg-img-extension"), "The group has the extension icon" ); assertSourceIcon(dbg, "content_script.js", "javascript"); @@ -554,8 +554,10 @@ add_task(async function testSourceTreeWithEncodedPaths() { is( // We don't have any specific class on the folder item, so let's target the folder // icon next sibling, which is the directory label. - findElementWithSelector(dbg, ".sources-panel .node .folder + .label") - .innerText, + findElementWithSelector( + dbg, + ".sources-panel .node .dbg-img-folder + .label" + ).innerText, "my folder", "folder name is decoded in the tree" ); diff --git a/devtools/client/debugger/test/mochitest/shared-head.js b/devtools/client/debugger/test/mochitest/shared-head.js @@ -1356,7 +1356,7 @@ function assertSourceIcon(dbg, sourceName, icon) { ok(sourceItem, `Found the source item for ${sourceName}`); is( sourceItem.querySelector(".source-icon").className, - `img source-icon ${icon}`, + `dbg-img dbg-img-${icon} source-icon`, `The icon for ${sourceName} is correct` ); } @@ -1946,7 +1946,7 @@ const selectors = { searchField: ".search-field", blackbox: ".action.black-box", projectSearchSearchInput: ".project-text-search .search-field input", - projectSearchCollapsed: ".project-text-search .arrow:not(.expanded)", + projectSearchCollapsed: ".project-text-search .dbg-img-arrow:not(.expanded)", projectSearchExpandedResults: ".project-text-search .result", projectSearchFileResults: ".project-text-search .file-result", projectSearchModifiersCaseSensitive: @@ -1974,8 +1974,8 @@ const selectors = { previewPopupObjectFunction: ".preview-popup .objectBox-function", previewPopupObjectFunctionJumpToDefinition: ".preview-popup .objectBox-function .jump-definition", - sourceTreeRootNode: ".sources-panel .node .window", - sourceTreeFolderNode: ".sources-panel .node .folder", + sourceTreeRootNode: ".sources-panel .node .dbg-img-window", + sourceTreeFolderNode: ".sources-panel .node .dbg-img-folder", excludePatternsInput: ".project-text-search .exclude-patterns-field input", fileSearchInput: ".search-bar input", fileSearchSummary: ".search-bar .search-field-summary", @@ -2855,7 +2855,7 @@ async function assertInlineExceptionPreview( info("Wait for top level node to expand and child nodes to load"); await waitForElementWithSelector( dbg, - ".exception-popup .exception-message .arrow.expanded" + ".exception-popup .exception-message .dbg-img-arrow.expanded" ); is( diff --git a/devtools/client/jar.mn b/devtools/client/jar.mn @@ -288,7 +288,7 @@ devtools.jar: content/debugger/src/components/QuickOpenModal.css (debugger/src/components/QuickOpenModal.css) content/debugger/src/components/ShortcutsModal.css (debugger/src/components/ShortcutsModal.css) content/debugger/src/components/WelcomeBox.css (debugger/src/components/WelcomeBox.css) - content/debugger/src/components/shared/AccessibleImage.css (debugger/src/components/shared/AccessibleImage.css) + content/debugger/src/components/shared/DebuggerImage.css (debugger/src/components/shared/DebuggerImage.css) content/debugger/src/components/shared/Accordion.css (debugger/src/components/shared/Accordion.css) content/debugger/src/components/shared/Badge.css (debugger/src/components/shared/Badge.css) content/debugger/src/components/shared/BracketArrow.css (debugger/src/components/shared/BracketArrow.css)