1

The Firefox DevTools Inspector panel in Firefox 48 the changed the position of the ancestor elements breadcrumb bar from the top to the bottom. How I can revert the change?

http://i.imgur.com/qfT9eul.png

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
Khado Mikhal
  • 602
  • 7
  • 14

2 Answers2

3

This was obviously changed in bug 1256422 (unfortunately without explaining the reason) and there is no setting to move the breadcrumb bar to the top again.

So I see three options:

  1. Accept the change.
  2. Revert back to Firefox 47.
  3. Create a bug report asking to move it back to the top.
Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
  • 1
    Option 4: Create an extension that moves it back to where it was. – Makyen Sep 27 '16 at 01:33
  • @Makyen I found it was because of "bug 1256422" but there was NO good reason to do it since we just lost space, we gain NOTHING. Mozilla is reputed to make change for nothing that make the life or power-users worse. Anyway I think the Option 4 will be the best, I'm not proficient in JS but I learn ;-). I have already took the sources of the Inspector and with CSS it should be fairly easy to "hack" it with somebody proficient. **Somebody to help me ?** Here's the inspector files FF47-48 on my Dropbox https://dl.dropboxusercontent.com/s/khoowkhalusfd7p/FirefoxDevtoolsBreadcrumbSource.rar – Khado Mikhal Sep 27 '16 at 13:13
  • While an extension may be a solution, I'd still ask why they moved it to the bottom. I agree with you that as it looks now it's just lost vertical space. – Sebastian Zartner Sep 27 '16 at 15:08
  • Actually, I've just [asked now within that bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1256422#c11). – Sebastian Zartner Sep 27 '16 at 15:12
  • The [answer of the DevTools team](https://bugzilla.mozilla.org/show_bug.cgi?id=1256422#c12) is that they wanted to "repurpose the space that the breadcrumbs occupied". – Sebastian Zartner Sep 30 '16 at 06:08
  • @SebastianZartner Here's the link to the CSS that fix the non-sense issue from Mozilla on Userstyle: https://userstyles.org/styles/133299/firefox-devtools-breadcrums-back-beside-top-search – Khado Mikhal Oct 01 '16 at 23:48
2

Based on the information you provided on the page you linked in a comment (where you have code for use with the Stylish add-on, or as a user script), which was based on work by the user Aris on mozillaZine, I determined that though Firefox 51 (currently Firefox Developer Edition) you can add the following to your userChrome.css file:

@namespace html url(http://www.w3.org/1999/xhtml); /* set html namespace */

html|div#inspector-breadcrumbs-toolbar {
  -moz-box-ordinal-group: 0 !important;
  border-top: unset !important;
  margin-right: 210px !important;
  margin-left: 28px !important;
}

html|div#inspector-toolbar {
  margin-top: -23px !important;
}

If you are using Firefox 52, currently Nightly, this will not work. In fact, using it will result in loosing access to the toolbar containing the DOM search box and the create a new node button.

In order to display more entries in the breadcrumbs, I also found it desirable to reduce both the space between the breadcrumbs and the minimum width of an entry:

html|button.breadcrumbs-widget-item {
  padding-left: 10px !important;
  margin-right: -12px !important;
  min-width: 10px !important;
}

If you are really wanting to save horizontal space, you could change the graphic that is used to separate the breadcrumbs. You could also adjust the font size to allow more information to be displayed.

Makyen
  • 31,849
  • 12
  • 86
  • 121
  • Thanks a lot, Right now I use Firefox 50 so I'm fine for few weeks at least ;-) . When 52 will become the release I will see what changes Mozilla have done to the code, my guest is they have removed most of the XUL for the devtools and replaced it by HTML. – Khado Mikhal Dec 04 '16 at 20:16