1877748 - Indicate in card preview if DevTools is opened

Status: NEW

(Firefox :: Tabbed Browser, enhancement)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: "DevTools" label displayed in the tab preview

Having the ability to identify if a given tab has a DevTools toolbox open in it could be helpful when you're juggling with many tabs from the same website/domain.
I'm not sure what would be the best way to represent this, but at least we can know if devtools is open pretty easily ¹. I quickly drafted something locally that adds a small label below the uri:

diff --git a/browser/components/tabpreview/tabpreview.mjs b/browser/components/tabpreview/tabpreview.mjs
--- a/browser/components/tabpreview/tabpreview.mjs
+++ b/browser/components/tabpreview/tabpreview.mjs
@@ -234,6 +234,9 @@ export default class TabPreview extends 
         <div class="tab-preview-text-container">
           <div class="tab-preview-title">${this._displayTitle}</div>
           <div class="tab-preview-uri">${this._displayURI}</div>
+          ${this.tab?.linkedBrowser.browsingContext?.watchedByDevTools
+            ? html`<b>DevTools</b>`
+            : ""}

---

¹ the only issue with using the browsing context flag is that it will be true for all tabs when the Multiprocess Browser Toolbox is opened

Comment 1

[Alexandre Poirot [:ochameau]]

Regarding watchedByDevTools, you might be able to do something in DevToolsShim, similar to this method:
https://searchfox.org/mozilla-central/rev/2c3d657cbba5484ccac44443c4417baed7b5fafb/devtools/startup/DevToolsShim.sys.mjs#85-87
The challenge is about performance and to avoid loading devtools modules unless it is strictly necessary.