首页>Firefox 专区>Firefox 扩展、插件、脚本和样式>火狐66b3版本书签收藏夹双列CSS失效了帮忙修改一下谢谢!
回复
« 返回列表
fanmli
fanmli
小狐狸
小狐狸
  • UID51688
  • 注册日期2015-11-08
  • 最后登录2021-09-29
  • 发帖数54
  • 经验71枚
  • 威望0点
  • 贡献值70点
  • 好评度9点
写私信
  • 社区居民
  • 忠实会员
阅读：3170回复：6

火狐66b3版本书签收藏夹双列CSS失效了帮忙修改一下谢谢!

楼主#
更多 发布于：2019-01-30 18:56 
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
@-moz-document url(chrome://browser/content/browser.xul) {
   
/*定义收藏项宽度一致*/
.bookmark-item[container="true"]:-moz-any([label="实用小书签"],[label=""],[label="乱七八糟"],[label="杂项"],[label="火狐谷歌浏览器"],[label="VPN--SSH--代理"],[label="网盘搜索云笔记"],[label="电子邮箱"],[label="下载"],[label="论坛"],[label="谷歌"],[label="外国著名网站"],[label="电脑控制手机"]) .menuitem-with-favicon{
max-width:320px !important;
min-width:180px !important;
}
 
.bookmark-item[container="true"]:-moz-any(
/*需要多列显示的书签文件夹名，多个用(,)分割，
格式如下所示。下面的如此类推。跟第一个相同。
在userchorme.css中，中文注意编码，
改为UTF8，stylish扩展可无视*/
 
[label="实用小书签"],
[label="杂项"],
[label="火狐谷歌浏览器"],
[label="下载"]
) >menupopup>hbox .scrollbox-innerbox{
width: 390px !important; /*双列显示380px ,三列显示数值改为570px（3x190）*/
display: table !important;
}
 
.bookmark-item[container="true"]:-moz-any(
[label="实用小书签"],
[label="杂项"],
[label="火狐谷歌浏览器"],
[label="下载"]
)  .bookmark-item {
min-width: 190px !important;
max-width: 190px !important;
margin-right:5px!important;
}
.bookmark-item[container="true"] .bookmark-item{
max-width: 220px !important;
}
.bookmark-item[container="true"]:-moz-any(
[label="实用小书签"],
[label="杂项"],
[label="火狐谷歌浏览器"],
[label="下载"]
) menu .bookmark-item {
min-width: 220px !important;
}
 
.bookmark-item[container="true"]:-moz-any(
[label="实用小书签"],
[label="杂项"],
[label="火狐谷歌浏览器"],
[label="下载"]
)  >menupopup>hbox  .scrollbox-innerbox> menuseparator{
display: block !important;
}
 
.bookmark-item[container="true"]  scrollbox{
overflow-y: auto !important;
}
 
.bookmark-item[container="true"]  .bookmark-item .menu-iconic-text{
margin-right:-30px!important;
}
.bookmark-item[container="true"] :-moz-any(.abhere-menuitem,autorepeatbutton),
.bookmark-item[container="true"] .menuitem-iconic.bookmark-item.menuitem-with-favicon ~ menuseparator{
display:none!important;
}
.bookmark-item[container="true"] .openintabs-menuitem{
position:absolute; 
}
 
}
喜欢0
回复
lonely_8
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度149点
写私信
  • 社区居民
  • 忠实会员
1楼#
发布于：2019-01-30 19:13
由于 Bug 1454357 - Remove scrollbox binding
删掉了scrollbox-innerbox 这一层，css 中 删除 .scrollbox-innerbox 就可以了，但是这样过长的双列下拉菜单就无法滚动了。
只能使用 -moz-binding 还原 scrollbox-innerbox。

在你的代码 4 - 5 行间加上 
/*还原 https://bugzilla.mozilla.org/show_bug.cgi?id=1454357 的变更*/
#PlacesToolbarItems .bookmark-item[container="true"]:-moz-any(
[label="实用小书签"],[label=""],[label="乱七八糟"], /*.....加上你需要双列显示的所有文件夹。当然也可以不用 :-moz-any(...)，这样会应用全局的书签文件夹。*/
)>menupopup>hbox>.popup-internal-box>.arrowscrollbox-scrollbox{
-moz-binding: url("data:application/vnd.mozilla.xul+xml;charset=UTF-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxiaW5kaW5ncyB4bWxucz0iaHR0cDovL3d3dy5tb3ppbGxhLm9yZy94YmwiCgl4bWxuczp4dWw9Imh0dHA6Ly93d3cubW96aWxsYS5vcmcva2V5bWFzdGVyL2dhdGVrZWVwZXIvdGhlcmUuaXMub25seS54dWwiCgl4bWxuczp4Ymw9Imh0dHA6Ly93d3cubW96aWxsYS5vcmcveGJsIj4KCTxiaW5kaW5nIGlkPSJzY3JvbGxib3giIGV4dGVuZHM9ImNocm9tZTovL2dsb2JhbC9jb250ZW50L2JpbmRpbmdzL2dlbmVyYWwueG1sI2Jhc2Vjb250cm9sIj4KCQk8Y29udGVudD4KCQkJPHh1bDpib3ggY2xhc3M9ImJveC1pbmhlcml0IHNjcm9sbGJveC1pbm5lcmJveCIgeGJsOmluaGVyaXRzPSJvcmllbnQsYWxpZ24scGFjayxkaXIiIGZsZXg9IjEiPgoJCQkJPGNoaWxkcmVuLz4KCQkJPC94dWw6Ym94PgoJCTwvY29udGVudD4KCTwvYmluZGluZz4KPC9iaW5kaW5ncz4K") !important;
}
回复(1) 喜欢(1)
fanmli
fanmli
小狐狸
小狐狸
  • UID51688
  • 注册日期2015-11-08
  • 最后登录2021-09-29
  • 发帖数54
  • 经验71枚
  • 威望0点
  • 贡献值70点
  • 好评度9点
写私信
  • 社区居民
  • 忠实会员
2楼#
发布于：2019-01-30 20:25
lonely_8：由于 Bug 1454357 - Remove scrollbox binding
删掉了scrollbox-innerbox 这一层，css 中 删除 .scrollbox-innerbox 就可以了，但是这样过长的双列下拉菜单就无法滚...回到原帖
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
@-moz-document url(chrome://browser/content/browser.xul) {
     
/*还原 https://bugzilla.mozilla.org/show_bug.cgi?id=1454357 的变更*/
#PlacesToolbarItems .bookmark-item[container="true"]:-moz-any(
[label="实用小书签"],[label="杂项"],[label="火狐谷歌浏览器"],[label="下载"], /*.....加上你需要双列显示的所有文件夹。当然也可以不用 :-moz-any(...)，这样会应用全局的书签文件夹。*/
)>menupopup>hbox>.popup-internal-box>.arrowscrollbox-scrollbox{
-moz-binding: url("data:application/vnd.mozilla.xul+xml;charset=UTF-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxiaW5kaW5ncyB4bWxucz0iaHR0cDovL3d3dy5tb3ppbGxhLm9yZy94YmwiCgl4bWxuczp4dWw9Imh0dHA6Ly93d3cubW96aWxsYS5vcmcva2V5bWFzdGVyL2dhdGVrZWVwZXIvdGhlcmUuaXMub25seS54dWwiCgl4bWxuczp4Ymw9Imh0dHA6Ly93d3cubW96aWxsYS5vcmcveGJsIj4KCTxiaW5kaW5nIGlkPSJzY3JvbGxib3giIGV4dGVuZHM9ImNocm9tZTovL2dsb2JhbC9jb250ZW50L2JpbmRpbmdzL2dlbmVyYWwueG1sI2Jhc2Vjb250cm9sIj4KCQk8Y29udGVudD4KCQkJPHh1bDpib3ggY2xhc3M9ImJveC1pbmhlcml0IHNjcm9sbGJveC1pbm5lcmJveCIgeGJsOmluaGVyaXRzPSJvcmllbnQsYWxpZ24scGFjayxkaXIiIGZsZXg9IjEiPgoJCQkJPGNoaWxkcmVuLz4KCQkJPC94dWw6Ym94PgoJCTwvY29udGVudD4KCTwvYmluZGluZz4KPC9iaW5kaW5ncz4K") !important;
}   
   
/*定义收藏项宽度一致*/
.bookmark-item[container="true"]:-moz-any([label="实用小书签"],[label=""],[label="乱七八糟"],[label="杂项"],[label="火狐谷歌浏览器"],[label="VPN--SSH--代理"],[label="网盘搜索云笔记"],[label="电子邮箱"],[label="下载"],[label="论坛"],[label="谷歌"],[label="外国著名网站"],[label="电脑控制手机"]) .menuitem-with-favicon{
max-width:320px !important;
min-width:180px !important;
}
 
.bookmark-item[container="true"]:-moz-any(
/*需要多列显示的书签文件夹名，多个用(,)分割，
格式如下所示。下面的如此类推。跟第一个相同。
在userchorme.css中，中文注意编码，
改为UTF8，stylish扩展可无视*/
 
[label="实用小书签"],
[label="杂项"],
[label="火狐谷歌浏览器"],
[label="下载"]
) >menupopup>hbox .scrollbox-innerbox{
width: 390px !important; /*双列显示380px ,三列显示数值改为570px（3x190）*/
display: table !important;
}
 
.bookmark-item[container="true"]:-moz-any(
[label="实用小书签"],
[label="杂项"],
[label="火狐谷歌浏览器"],
[label="下载"]
)  .bookmark-item {
min-width: 190px !important;
max-width: 190px !important;
margin-right:5px!important;
}
.bookmark-item[container="true"] .bookmark-item{
max-width: 220px !important;
}
.bookmark-item[container="true"]:-moz-any(
[label="实用小书签"],
[label="杂项"],
[label="火狐谷歌浏览器"],
[label="下载"]
) menu .bookmark-item {
min-width: 220px !important;
}
 
.bookmark-item[container="true"]:-moz-any(
[label="实用小书签"],
[label="杂项"],
[label="火狐谷歌浏览器"],
[label="下载"]
)  >menupopup>hbox  .scrollbox-innerbox> menuseparator{
display: block !important;
}
 
.bookmark-item[container="true"]  scrollbox{
overflow-y: auto !important;
}
 
.bookmark-item[container="true"]  .bookmark-item .menu-iconic-text{
margin-right:-30px!important;
}
.bookmark-item[container="true"] :-moz-any(.abhere-menuitem,autorepeatbutton),
.bookmark-item[container="true"] .menuitem-iconic.bookmark-item.menuitem-with-favicon ~ menuseparator{
display:none!important;
}
.bookmark-item[container="true"] .openintabs-menuitem{
position:absolute; 
}
 
}
添加完没有起作用，麻烦在帮我看看！
回复(0) 喜欢(0)
lonely_8
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度149点
写私信
  • 社区居民
  • 忠实会员
3楼#
发布于：2019-01-30 20:35
看1楼我所给出的代码，第三行的注释说明啊。
回复(1) 喜欢(0)
fanmli
fanmli
小狐狸
小狐狸
  • UID51688
  • 注册日期2015-11-08
  • 最后登录2021-09-29
  • 发帖数54
  • 经验71枚
  • 威望0点
  • 贡献值70点
  • 好评度9点
写私信
  • 社区居民
  • 忠实会员
4楼#
发布于：2019-01-31 11:35
lonely_8：看1楼我所给出的代码，第三行的注释说明啊。回到原帖
谢谢已经修改好了！
回复(0) 喜欢(0)
阿特拉斯
阿特拉斯
小狐狸
小狐狸
  • UID57459
  • 注册日期2020-02-04
  • 最后登录2021-11-13
  • 发帖数9
  • 经验16枚
  • 威望0点
  • 贡献值22点
  • 好评度0点
写私信
5楼#
发布于：2021-11-09 09:48
请问有改好的吗   我照着上面改完无效，是高版本已经不适用了么？
回复(1) 喜欢(0)
lonely_8
lonely_8
非常火狐
非常火狐
  • UID30273
  • 注册日期2009-09-03
  • 最后登录2022-08-09
  • 发帖数733
  • 经验469枚
  • 威望0点
  • 贡献值86点
  • 好评度149点
写私信
  • 社区居民
  • 忠实会员
6楼#
发布于：2021-11-09 15:46
阿特拉斯：请问有改好的吗   我照着上面改完无效，是高版本已经不适用了么？回到原帖
纯 css 已经无法实现了，需要 UC 脚本才能实现。 
// ==UserScript==
// @name           多列书签
// @include        main
// ==/UserScript==
location.href.startsWith('chrome://browser/content/browser.x') && (() => {
  //按顺序从两列开始
  const column = [
    ['2列显示的书签文件夹名称1', '2列名称2', '2列名称3', '2列名称4'],
    ['3列显示的书签文件夹名称1', '3列名称2'], 
    ['4列显示的书签文件夹名称1', '4列名称2'], 
    //...由此类推
  ];

  const BOOKMARK_WIDTH = 180; // 书签宽度
  const MARGIN_RIGHT = 5;
  const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
  sss.loadAndRegisterSheet(Services.io.newURI("data:text/css," + encodeURIComponent(`
  @-moz-document url("chrome://browser/content/browser.xhtml"){
    #PlacesToolbarItems menuitem.bookmark-item .menu-accel-container {
      display: none !important;
    }
    ${column.map(c => {
      return c.length ? `#PlacesToolbarItems .bookmark-item[container="true"]:is(
        ${c.map(i => `[label=${JSON.stringify(i)}]`).join(', ')}
      ) > menupopup > :is(menuitem, menu, menuseparator) {
        min-width: ${BOOKMARK_WIDTH}px !important;
        max-width: ${BOOKMARK_WIDTH}px !important;
        margin-right: ${MARGIN_RIGHT}px !important;
      }` : '';
    }).join('\n')}
  }`), null, null), sss.USER_SHEET);

  function _getScrollableElements () {
    let nodes = this.children;
    if(nodes.length == 1 && nodes[0].className === 'scrollbox-innerbox') {
      nodes = nodes[0].children;
    }
    if (nodes.length == 1) {
      let node = nodes[0];
      if (node.localName == 'children' &&
          node.namespaceURI == 'http://www.mozilla.org/xbl') {
        nodes = document.getBindingParent(this).children;
      } else if (node.localName == 'slot' &&
                 node.namespaceURI == 'http://www.w3.org/1999/xhtml') {
        nodes = node.getRootNode().host.children;
      }
    }

    return Array.prototype.filter.call(nodes, this._canScrollToElement, this);
  }
  const PlacesToolbarItems = document.getElementById('PlacesToolbarItems');
  PlacesToolbarItems.addEventListener('popupshowing', (event) => {
    const menupopup = event.target;
    if(menupopup._isInitMultipledBM) return;
    const title = menupopup.parentNode &&
      menupopup.parentNode._placesNode &&
      menupopup.parentNode._placesNode.title;
    menupopup._isInitMultipledBM = true;
    let col = -1;
    if(!title || !menupopup.shadowRoot || (col = column.findIndex(c => {
      return c.indexOf(title) > -1;
    })) === -1) return;
    col += 2;

    const markup = `<html:style>
      arrowscrollbox::part(scrollbox), /*bug 1514926*/
      scrollbox.arrowscrollbox-scrollbox{
        overflow-y: auto !important;
      }
      arrowscrollbox > .scrollbox-innerbox{
        display:grid !important;
        grid-template-columns: repeat(${col}, 1fr);
      }
      </html:style>${menupopup.markup.replace(
      /<html:slot\/>|<html:slot><\/html:slot>/,
      '<box class="scrollbox-innerbox" orient="vertical" pack="start" smoothscroll="false" flex="1">$&</box>'
    )}`;

    let count = menupopup.shadowRoot.childElementCount;
    menupopup.shadowRoot.prepend(MozXULElement.parseXULToFragment(markup));
    while(count--) menupopup.shadowRoot.lastElementChild.remove();
    const arrowscrollbox = menupopup.shadowRoot.querySelector('arrowscrollbox');
    if(arrowscrollbox && arrowscrollbox._getScrollableElements) {
      arrowscrollbox._getScrollableElements = _getScrollableElements.bind(arrowscrollbox);
    }

    if(menupopup.__indicatorBar){
      menupopup.__indicatorBar = null;
      menupopup._scrollBox = null;
    }else{
      menupopup._indicatorBar = menupopup.shadowRoot.querySelector(
        '[part="drop-indicator-bar"]'
      );
      menupopup._scrollBox = menupopup.shadowRoot.querySelector(
        'arrowscrollbox'
      );
    }

  }, true);
})();


https://pastebin.com/9ZHvFDBW
回复(0) 喜欢(0)
游客

关于FirefoxMozilla 技术支持谋智中国手机版(Beta)了解 Mozilla

返回顶部