External-Aplication.uc.js als vertikale Buttonbar links unter TabsToolbar möglich?

2002Andreas

Zitat von harff182

den CSS-Schnipsel

Mit ändern deiner Abstände sieht das so aus:

So klappt das bei dir nicht per hover?

CSS

#ExtAppButtons > toolbarbutton:nth-child(1):hover{
  background: red !important;
  appearance: none !important;
}

Bitte mal testen:

CSS

#ExtAppButtons > toolbarseparator {
   margin-top:  1px !important;
   min-height: 3px !important;
   max-height: 3px !important;
   background: red !important;
   appearance: none !important;
}

harff182

Zitat von 2002Andreas

So klappt das bei dir nicht per hover?

Nur für den ersten button und dann zapelt der nach rechts weg:

Um den separator kümmer ich mich gleich, ich muß runter zu meiner Mom zur Nachtpflege....

grisu2099

Zitat von harff182

Die Pfeile zeigen die toolbarseparatoren , die ich nicht waagerecht und dicker bekomme.

Vielleicht kannst du ja in diesem Script horizontale Separatoren erzeugen - das hatte aborix hier vor einiger Zeit mal gepostet.

Es erzeugt eine Toolbar, die nur im "Anpassen-Modus" sichtbar ist. Dort kannst du dann Separatoren, sowie feste und variable Leerräume in die Toolbars einfügen.

JavaScript

// Restore 'Space & Separator' items script for Firefox 60+ by Aris
//
// Default browser scripts always remove spaces and separators from default palette, so
// because of that they are added to an own toolbar now.
//
// - spaces and separators can be moved to any toolbar
// - to remove spaces or separators move them into palette
// - configuration toolbar behaves like a default toolbar, items and buttons can be placed on it
// - configuration toolbar is not visible outside customizing mode
// - default "Flexible Space" item is hidden from palette and added to configuration toolbar
// [!] BUG: do not move spaces, flexible spaces or separator to configuration toolbar or it will cause glitches
// [!] BUG: do not move main 'space'-item to palette or it will be hidden until customizing mode gets reopened
// [!] Fix for WebExtensions with own windows by 黒仪大螃蟹 (for 1-N scripts)
Components.utils.import("resource:///modules/CustomizableUI.jsm");
var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
var appversion = parseInt(Services.appinfo.version);
var AddSeparator = {
  init: function() {
      
    /* blank tab workaround */
    try {
      if(gBrowser.selectedBrowser.getAttribute('blank')) gBrowser.selectedBrowser.removeAttribute('blank');
    } catch(e) {}
      
    var tb_config_label = "Configuration Toolbar";
    var tb_spacer_label = "Space";
    var tb_sep_label = "Separator";
    var tb_spring_label = "Flexible Space";
      
    try {
     if(document.getElementById('configuration_toolbar') == null) {
        
      if(appversion <= 62) var tb_config = document.createXULElement("toolbar");
      else var tb_config = document.createXULElement("toolbar");
      tb_config.setAttribute("id","configuration_toolbar");
      tb_config.setAttribute("customizable","true");
      tb_config.setAttribute("class","toolbar-primary chromeclass-toolbar browser-toolbar customization-target");
      tb_config.setAttribute("mode","icons");
      tb_config.setAttribute("iconsize","small");
      tb_config.setAttribute("toolboxid","navigator-toolbox");
      tb_config.setAttribute("lockiconsize","true");
      tb_config.setAttribute("ordinal","1005");
      tb_config.setAttribute("defaultset","toolbarspacer,toolbarseparator");
      
      document.querySelector('#navigator-toolbox').appendChild(tb_config);
      
      CustomizableUI.registerArea("configuration_toolbar", {legacy: true});
      if(appversion >= 65) CustomizableUI.registerToolbarNode(tb_config);
      
      if(appversion <= 62) var tb_label = document.createXULElement("label");
      else var tb_label = document.createXULElement("label");
      tb_label.setAttribute("label", tb_config_label+": ");
      tb_label.setAttribute("value", tb_config_label+": ");
      tb_label.setAttribute("id","tb_config_tb_label");
      tb_label.setAttribute("removable","false");
      
      tb_config.appendChild(tb_label);
      
      
      if(appversion <= 62) var tb_spacer = document.createXULElement("toolbarspacer");
      else var tb_spacer = document.createXULElement("toolbarspacer");
      tb_spacer.setAttribute("id","spacer");
      tb_spacer.setAttribute("class","chromeclass-toolbar-additional");
      tb_spacer.setAttribute("customizableui-areatype","toolbar");
      tb_spacer.setAttribute("removable","false");
      tb_spacer.setAttribute("label", tb_spacer_label);
      
      tb_config.appendChild(tb_spacer);
    
      
      if(appversion <= 62) var tb_sep = document.createXULElement("toolbarseparator");
      else var tb_sep = document.createXULElement("toolbarseparator");
      tb_sep.setAttribute("id","separator");
      tb_sep.setAttribute("class","chromeclass-toolbar-additional");
      tb_sep.setAttribute("customizableui-areatype","toolbar");
      tb_sep.setAttribute("removable","false");
      tb_sep.setAttribute("label", tb_sep_label);
       
      tb_config.appendChild(tb_sep);
      
     
      if(appversion <= 62) var tb_spring = document.createXULElement("toolbarspring");
      else var tb_spring = document.createXULElement("toolbarspring");
      tb_spring.setAttribute("id","spring");
      tb_spring.setAttribute("class","chromeclass-toolbar-additional");
      tb_spring.setAttribute("customizableui-areatype","toolbar");
      tb_spring.setAttribute("removable","false");
      tb_spring.setAttribute("label", tb_spring_label);
            
      tb_config.appendChild(tb_spring);
        
      // CSS
      var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
      var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
        #configuration_toolbar { \
          -moz-appearance: none !important; \
          background-color: var(--toolbar-bgcolor); \
          background-image: var(--toolbar-bgimage); \
          background-clip: padding-box; \
          color: var(--toolbar-color, inherit); \
        } \
        #main-window:not([customizing]) #configuration_toolbar { \
          visibility: collapse; \
        }\
        #main-window[customizing] #configuration_toolbar #tb_config_tb_label { \
          font-weight: bold !important; \
        }\
        #main-window[customizing] #configuration_toolbar :is(#spacer,#separator,#spring) { \
          -moz-margin-start: 20px; \
        }\
        #main-window[customizing] #configuration_toolbar :is(#wrapper-spacer,#wrapper-separator,#wrapper-spring) .toolbarpaletteitem-label { \
          display: block !important; \
          -moz-margin-end: 20px; \
        }\
        #main-window[customizing] #wrapper-spacer #spacer { \
          margin: 2px 0 !important; \
        }\
        #main-window[customizing] #configuration_toolbar #wrapper-spring #spring { \
          margin: -1px 0 !important; \
          min-width: 80px !important; \
        }\
        #main-window[customizing] #configuration_toolbar > * { \
          padding: 10px !important; \
        }\
        #main-window[customizing] #configuration_toolbar > :is(#wrapper-spacer,#wrapper-separator,#wrapper-spring) { \
          border: 1px dotted !important; \
          -moz-margin-start: 2px !important; \
          -moz-margin-end: 2px !important; \
        }\
        #main-window[customizing] toolbarspacer { \
          border: 1px dashed !important; \
        }\
        toolbar[orient="vertical"] toolbarseparator { \
          -moz-appearance: none !important; \
        }\
        toolbar[orient="vertical"] toolbarspacer { \
          -moz-appearance: none !important; \
          height: 18px !important; \
          width: 18px !important; \
        }\
        #customization-palette toolbarpaletteitem[id^="wrapper-customizableui-special-spring"], \
        #customization-palette-container :is(#spring,#wrapper-spring) { \
          display: none !important; \
        }\
      \
      '), null, null);
      sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
     }
    } catch(e){}
  }
}
/* initialization delay workaround */
document.addEventListener("DOMContentLoaded", AddSeparator.init(), false);
/*
setTimeout(function(){
  AddSeparator.init();
},1000);
*/
/*ausgeschnitten ab Zeile 141 wegen der Farbanpassung
 border-top: 1px solid rgba(15,17,38, 0.5) !important; \
          border-bottom: 1px solid rgba(255,255,255, 0.3) !important; \
          margin: 2px 2px !important; \
          height: 1px !important; \
          width: 18px !important; \ */

Alles anzeigen

2002Andreas

Zitat von harff182

Nur für den ersten button

Und so?

CSS

#ExtAppButtons > toolbarbutton:nth-child(n+1):hover{
  background: red !important;
  appearance: none !important;
}

Neuer Code für die Separatoren:

CSS

#ExtAppButtons > toolbarseparator {
   display: block !important;
   margin-top:  1px !important;
   min-height: 2px !important;
   max-height: 2px !important;
   background: red !important;
   appearance: none !important;
}

Deinen musst du dazu entfernen.

Dieser Eintrag sorgt für das zucken der Icons bei hover:

CSS

/*was für die Buttons gelten soll*/
#ExtAppButtons .toolbarbutton-1 > .toolbarbutton-badge-stack ,
#ExtAppButtons .toolbarbutton-1 > image{
    height: 20px !important;
    width: 20px !important;
}

harff182

Zitat von 2002Andreas

Und so?

Jetzt Zappeln alle - Ja sind wir denn hier im Kasperle-Theater?

Zitat von 2002Andreas

Dieser Eintrag sorgt für das zucken der Icons bei hover:

Und wie krieg ich den Zappelphillip da raus?

harff182

Zitat von 2002Andreas

Neuer Code für die Separatoren:

Jawollja. Danke.

Zitat von 2002Andreas

Deinen musst du dazu entfernen.

Grummel... ich hatte doch alles andere aus kommentiert - egal , jezz is ja hübsch

Und womit machen wir jetzt dem Zappelphilip den Garaus ?

2002Andreas

Zitat von harff182

Und womit machen wir jetzt dem Zappelphilip den Garaus ?

Teste bitte mal diesen kompl. Code:

CSS

#ExtAppButtons > toolbarbutton:nth-child(n+1):hover {
  background: red !important;
  appearance: none !important;
}

#ExtAppButtons > toolbarseparator {
   display: block !important;
   margin-top:  1px !important;
   min-height: 2px !important;
   max-height: 2px !important;
   background: red !important;
   appearance: none !important;
}

/*Testspielerei, solange ich keine Leiste mit Start-Exe-Buttons einsetzen kann    */
#browser{
    margin-left: 40px !important;
}

/*was für die ganze Leiste gelten soll*/
#ExtAppButtons {
    background: greenyellow !important;/*lightblue,gold,greenyellow,yellow,chartreuse */
    position: absolute !important;
    display: block !important;
    bottom: -580px !important;                /*damit es weit genug runterrutscht*/
    height: 580px !important;                /*damit der Rahmen um alle Icons geht*/
    width: 35px !important;
    border: 2px solid black !important;
    border-radius: 5px !important;
    margin-left: 2px !important; 
    padding-left: 3px !important;
   
}

/*was für die Buttons gelten soll*/
#ExtAppButtons .toolbarbutton-1 > .toolbarbutton-badge-stack ,
#ExtAppButtons .toolbarbutton-1 > image{
    height: 20px !important;
    width: 20px !important;
}

/*und wie bekomme ich jetzt die hover-farbe weg? */
#ExtAppButtons .toolbarbutton-1,
#ExtAppButtons .toolbarbutton-1 > .toolbarbutton-badge-stack:hover
{
    background: greenyellow !important; 
}

/* Seperatoren anpassen - neuer Versuch - tut auch fast nix */


/*Seperatoren anpassen V3 - klappt auch nicht */
/* #ExtAppButtons > toolbarseparator {
    display: block !important;
    content:  '\0333' !important;
    color: black !important; 
} */

Alles anzeigen

2002Andreas

Zitat von 2002Andreas

diesen kompl. Code:

Noch einige Feinheiten angepasst:

CSS

#ExtAppButtons > toolbarbutton:nth-child(n+1):hover {
  background: red !important;
  appearance: none !important;
}

#ExtAppButtons > toolbarseparator {
   display: block !important;
   margin-bottom: 2px !important;
   margin-left: -2px !important;
   margin-top:  3px !important;
   min-height: 2px !important;
   max-height: 2px !important;
   background: red !important;
   appearance: none !important;
}

/*Testspielerei, solange ich keine Leiste mit Start-Exe-Buttons einsetzen kann    */
#browser{
    margin-left: 40px !important;
}

/*was für die ganze Leiste gelten soll*/
#ExtAppButtons {
    background: greenyellow !important;/*lightblue,gold,greenyellow,yellow,chartreuse */
    position: absolute !important;
    display: block !important;
    bottom: -580px !important;                /*damit es weit genug runterrutscht*/
    height: 580px !important;                /*damit der Rahmen um alle Icons geht*/
    width: 35px !important;
    border: 2px solid black !important;
    border-radius: 5px !important;
    margin-left: 2px !important; 
    padding-left: 3px !important; 
}

/*was für die Buttons gelten soll*/
#ExtAppButtons .toolbarbutton-1 > .toolbarbutton-badge-stack ,
#ExtAppButtons .toolbarbutton-1 > image {
    height: 20px !important;
    width: 20px !important;
}

Alles anzeigen

harff182

Für Deine Hilfen, 2002Andreas

Ich finde es erstaunlich und klasse, daß hier im CFF so abgedrehte Ideen, wie ich sie manchmal hab, verwirklicht werden können, auch wenn meinereiner überall abguckt, zusammenklaut und vor lauter Rumstümperei irgendwann nur noch kleinlaut um Hilfe bitten kann.

Chapeau und guuuts nächtle...

2002Andreas

Zitat von harff182

um Hilfe bitten kann.

Alles ist gut

Wir sind doch hier um anderen usern wenn möglich zu helfen. Du hilfst doch auch wenn du es kannst.

Freut mich jedenfalls wenn du zufrieden bist, und alles so funktioniert wie du es gerne wolltest.

Und was meinen Teil davon betrifft, war wie immer gern geschehen.

harff182

Nachbrenner:

(Wie) Kann man hier die Position der jeweiligen Tooltips verändern?

Aus den alten Forenbeiträgen zum Thema Toolips/Tooltipstext bin ich nciht schlau geworden.

2002Andreas

Zitat von harff182

die Position der jeweiligen Tooltips verändern?

Teste bitte mal

CSS

 popupset#mainPopupSet tooltip {
   margin-left: 50px !important;
   margin-top: 50px !important;
}

Und so dann in farbig:

CSS

 popupset#mainPopupSet tooltip {
   appearance: none !important;
   margin-left: 50px !important;
   margin-top: 50px !important;
   background-color: #f7f2bd !important;
   color: blue !important;   
}

harff182

Zitat von 2002Andreas

Teste bitte mal

Funktioniert hier nur in der tabstoolbar und der navbar, aber in keiner der zusätzlichen Leisten, die ich habe:

#ExtAppButtons (vertikale Zusatzleiste links)

#fp-statusbar-2 (horizontale Zusatzleiste)

#toolbox_abv / addonbar_v ( vertikale AddOn-Leiste rechts)

2002Andreas

Zitat von harff182

in keiner der zusätzlichen Leisten

Das sind wohl auch keine einfachen tooltips, sondern tooltiptext.

Ob man die ansprechen kann bin ich leider überfragt.

grisu2099

Das Problem hatten wir doch vor einiger Zeit schon mal...

Wenn ich mich recht erinnere, geht tooltiptext nicht zu ändern.

2002Andreas

Zitat von grisu2099

geht tooltiptext nicht zu ändern.

So habe ich das auch noch in Erinnerung.

harff182

Zitat von 2002Andreas

Das sind wohl auch keine einfachen tooltips, sondern tooltiptext.

Jepp, Codeauszug: item.setAttribute('tooltiptext', app.name);

OK, dann hake ich das "Problem" ab

milupo

Zitat von harff182

Codeauszug: item.setAttribute('tooltiptext', app.name);

Ist jetzt bloß ins Blaue:

Probiere doch mal den Selektor item[tooltiptext]

harff182

Zitat von milupo

Ist jetzt bloß ins Blaue:

Probiere doch mal den Selektor item[tooltiptext]

Und wie bzw wohin?

Mein aktuelles .css für diese Leiste:

CSS

/*     69_app-bar_links.css
    Benötigt 31_Externals-button-bar.uc.js als Basis
*/
/*    Eigentlich Testspielerei, solange ich keine Leiste mit Start-Exe-Buttons einsetzen kann    */

/*    211206: V1 dank Hilfe von Andy
    
    todo:    Tooltips höher und weiter rechts - geht nicht :(
*/

/*     Machen wir mal links im Hauptfester etwas Platz */
#browser{
    margin-left: 45px !important;
}

/*was für die ganze Leiste gelten soll*/
#ExtAppButtons {
    background: greenyellow !important;/*lightblue,gold,greenyellow,yellow,chartreuse */
    position: absolute !important;
    display: block !important;
    bottom: -580px !important;                /*damit es weit genug runterrutscht*/
    height: 580px !important;                /*damit der Rahmen um alle Icons geht*/
    width: 39px !important;
    border: 2px solid black !important;
    border-radius: 5px !important;
    margin-left: 2px !important;
    padding: 5px !important;
}

/*was für alle Buttons gelten soll*/
#ExtAppButtons .toolbarbutton-1 > .toolbarbutton-badge-stack ,
#ExtAppButtons .toolbarbutton-1 > image{
    height: 22px !important;
    width: 22px !important;
    border: 2px solid black !important;
    border-radius: 3px !important;
    padding: 2px !important;
}


/*und wie bekomme ich jetzt die hover-farbe weg? */
/*andy: https://www.camp-firefox.de/forum/thema/133874/?postID=1191678#post1191678*/
#ExtAppButtons > toolbarbutton:nth-child(n+1):hover{
    background: white !important;
    appearance: none !important;
}

/*     Seperatoren anpassen */
/*    andy: https://www.camp-firefox.de/forum/thema/133874/?postID=1191678#post1191678*/
#ExtAppButtons > toolbarseparator {
    display: block !important;
    margin-top:  2px !important;
    margin-bottom:  2px !important;
    min-height: 3px !important;
    max-height: 3px !important;
    background: black !important;
    appearance: none !important;

Alles anzeigen

2002Andreas

Zitat von harff182

Und wie bzw wohin?

Ich habe das damit mal getestet...funktioniert auch nicht.

harff182 6. Dezember 2021 um 22:51