如何恢复在Firefox 48的Firefox DevTools Inspector的面包屑栏的位置变化？ [英] How to revert position change of breadcrumb bar in Firefox DevTools Inspector in Firefox 48?

问题描述

Firefox 48中的Firefox DevTools Inspector面板改变了祖先元素breadcrumb栏的位置，从顶部到底部。我怎样才能恢复变化？

解决方案

根据您在您在评论中链接的页面（其中您有用于时尚的插件，或者作为用户脚本），这是基于由用户Aris在mozillaZine 上工作，我确定尽管Firefox 51（目前是Firefox Developer Edition）可以将以下内容添加到你的 userChrome.css文件：

  @namespace html url（http：//www.w3。组织/ 1999 / XHTML）; / *设置html命名空间* / 
 
 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; 
 
 
 
 $ b 
如果你使用的是Firefox 52，目前Nightly，这是行不通的。实际上，使用它会导致失去对包含DOM搜索框的工具栏的访问，并创建一个新的节点按钮。
 
 
为了在面包屑中显示更多条目，我还发现减少面包屑之间的空间和条目的最小宽度是可取的： 
 
 
  html | button.breadcrumbs-widget-item {
 padding-left：10px！important; 
 margin-right：-12px！important; 
 min-width：10px！important; 
 
 
 
 $ b如果你真的想保存水平空间，用来分开面包屑。您还可以调整字体大小以显示更多信息。
 
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? 

解决方案
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.

                        
这篇关于如何恢复在Firefox 48的Firefox DevTools Inspector的面包屑栏的位置变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！