tor-browser

commit dde113bb7b19110ace7aaa2305001523a86314ec
parent 2ecf9d24c40f7098d06a156e615338e84a055db2
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Tue,  6 Jan 2026 06:26:28 +0000

Bug 1955317 - [devtools] Remove inline style in devtools/client/inspector/index.xhtml. r=devtools-reviewers,ochameau.

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

Diffstat:
M
devtools/client/inspector/index.xhtml
 | 
8
++------
M
devtools/client/inspector/inspector.js
 | 
8
+++++---
M
devtools/client/themes/inspector.css
 | 
11
+++++++++++

3 files changed, 18 insertions(+), 9 deletions(-)
diff --git a/devtools/client/inspector/index.xhtml b/devtools/client/inspector/index.xhtml
@@ -71,11 +71,7 @@
       data-localization-bundle="devtools/client/locales/inspector.properties"
     >
       <!-- Main Panel Content -->
-      <div
-        id="inspector-main-content"
-        class="devtools-main-content"
-        style="visibility: hidden"
-      >
+      <div id="inspector-main-content" class="devtools-main-content">
         <!-- Toolbar -->
         <div
           id="inspector-toolbar"
@@ -150,7 +146,7 @@
       </div>
 
       <!-- Sidebar Panel Definitions -->
-      <div id="tabpanels" style="visibility: collapse">
+      <div id="tabpanels">
         <div
           id="sidebar-panel-ruleview"
           class="theme-sidebar inspector-tabpanel"
diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js
@@ -222,9 +222,11 @@ class Inspector extends EventEmitter {
     this.#fluentL10n = new FluentL10n();
     await this.#fluentL10n.init(["devtools/client/compatibility.ftl"]);
 
-    // Display the main inspector panel with: search input, markup view and breadcrumbs.
-    this.panelDoc.getElementById("inspector-main-content").style.visibility =
-      "visible";
+    // Add the class that will display the main inspector panel with: search input,
+    // markup view and breadcrumbs.
+    this.panelDoc
+      .getElementById("inspector-main-content")
+      .classList.add("initialized");
 
     // Setup the splitter before watching targets & resources.
     // The markup view will be initialized after we get the first root-node
diff --git a/devtools/client/themes/inspector.css b/devtools/client/themes/inspector.css
@@ -41,6 +41,13 @@ window {
   min-width: 125px;
   display: flex;
   flex-direction: column;
+
+  /* the panel is not visible at first… */
+  visibility: hidden;
+  /* … only when it's being initialized */
+  &.initialized {
+    visibility: visible;
+  }
 }
 
 /* Inspector Panel Splitter */
@@ -59,6 +66,10 @@ window {
   overflow-x: hidden;
 }
 
+#tabpanels {
+  visibility: collapse;
+}
+
 /* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
    the sidebar tab to small width. If a specific panel supports smaller width, this should
    be overridden on a panel-by-panel basis */