tor-browser

commit 2d10d3bd480372091eb61c63ff4c198168eded75
parent c59b9d464b8fdd3b43445e8900f4eb8911fc3717
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Fri, 17 Oct 2025 13:38:13 +0000

Bug 1994730 - [devtools] Migrate data-standalone to a CSS class. r=devtools-reviewers,jdescottes.

Update the CSS rule, remove the attribute and set the class for those standalone buttons.

Depends on D268086

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

Diffstat:
M
devtools/client/inspector/animation/components/NoAnimationPanel.js
 | 
3
+--
M
devtools/client/memory/components/Heap.js
 | 
3
+--
M
devtools/client/netmonitor/src/components/request-list/RequestListEmptyNotice.js
 | 
8
++++----
M
devtools/client/themes/common.css
 | 
8
++------

4 files changed, 8 insertions(+), 14 deletions(-)
diff --git a/devtools/client/inspector/animation/components/NoAnimationPanel.js b/devtools/client/inspector/animation/components/NoAnimationPanel.js
@@ -40,9 +40,8 @@ class NoAnimationPanel extends Component {
       dom.p(null, L10N.getStr("panel.noAnimation")),
       dom.button({
         className:
-          "animation-element-picker devtools-button" +
+          "animation-element-picker devtools-button devtools-button-standalone" +
           (elementPickerEnabled ? " checked" : ""),
-        "data-standalone": true,
         onClick: event => {
           event.stopPropagation();
           toggleElementPicker();
diff --git a/devtools/client/memory/components/Heap.js b/devtools/client/memory/components/Heap.js
@@ -273,9 +273,8 @@ class Heap extends Component {
       "initial",
       dom.button(
         {
-          className: "devtools-button take-snapshot",
+          className: "devtools-button devtools-button-standalone take-snapshot",
           onClick: onSnapshotClick,
-          "data-standalone": true,
         },
         L10N.getStr("take-snapshot")
       )
diff --git a/devtools/client/netmonitor/src/components/request-list/RequestListEmptyNotice.js b/devtools/client/netmonitor/src/components/request-list/RequestListEmptyNotice.js
@@ -67,8 +67,8 @@ class RequestListEmptyNotice extends Component {
             span(null, RELOAD_NOTICE_1),
             button(
               {
-                className: "devtools-button requests-list-reload-notice-button",
-                "data-standalone": true,
+                className:
+                  "devtools-button devtools-button-standalone requests-list-reload-notice-button",
                 onClick: this.props.onReloadClick,
               },
               RELOAD_NOTICE_2
@@ -85,8 +85,8 @@ class RequestListEmptyNotice extends Component {
             span(null, PERFORMANCE_NOTICE_1),
             button({
               title: PERFORMANCE_NOTICE_3,
-              className: "devtools-button requests-list-perf-notice-button",
-              "data-standalone": true,
+              className:
+                "devtools-button devtools-button-standalone requests-list-perf-notice-button",
               onClick: this.props.onPerfClick,
             }),
             span(null, PERFORMANCE_NOTICE_2),
diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
@@ -413,17 +413,13 @@ iframe {
 }
 
 /* Standalone buttons */
-.devtools-button[data-standalone] {
+.devtools-button.devtools-button-standalone {
   min-height: 28px;
   padding: 4px 6px;
-  border: 1px solid transparent;
+  border: 1px solid light-dark(rgba(138, 161, 180, 0.2), transparent);
   background: var(--toolbarbutton-background);
 }
 
-.theme-light .devtools-button[data-standalone] {
-  border-color: rgba(138, 161, 180, 0.2);
-}
-
 /* Selectable button which is unchecked. */
 
 .devtools-button:not(:empty, .checked, [aria-pressed="true"]):hover,