outlook-quickactions-hotfix.js

// ==UserScript==
// @name       outlook quick actions hotfix
// @namespace  www.rossdoran.com
// @version    1.11
// @description  m$.gfy
// @match      https://outlook.office.com/mail/*
// @match      https://outlook.live.com/*
// @require https://gist.githubusercontent.com/mjblay/18d34d861e981b7785e407c3b443b99b/raw/debc0e6d4d537ac228d1d71f44b1162979a5278c/waitForKeyElements.js
// @run-at document-start
// ==/UserScript==

// when updating this script - search for ".hDNlA.lHRXq.iZbPU.JCRRb.G1NES"

waitForKeyElements (".WP8_u .UWVIR", moveQuickActions);

waitForKeyElements(".gReZN", moveDeleteAction); // comment out this line to keep the delete quick action on the right

 document.head.innerHTML += `<style type="text/css">
 .fui-Input { display: flex !important; }
                  .nloVY.pz2Jt .bx9dt { min-width: -2px !important; }` + ribbonCSS +
                 `.WP8_u .UWVIR { display: none !important; }
                  </style>`;

function navigateToInbox(elem)
{
    elem.onclick = ()=> { document.querySelector("button[aria-label='Close']").click(); };
}

function detach(node) {
  return node.parentElement.removeChild(node);
}

function moveDeleteAction(elem)
{    
    let parent = elem.closest(`.hDNlA.lHRXq.iZbPU.JCRRb.G1NES,
                              .lHRXq.hDNlA.IjQyD.phGIG.G1NES,
                              .lHRXq.hDNlA.gPZmZ.phGIG.G1NES,
                              .lHRXq.hDNlA.IjQyD.phGIG.DLvHz.G1NES,
                              .hDNlA.lHRXq.IjQyD.JCRRb.G1NES,
                              .hDNlA.lHRXq.epBmH.IMyk_,
                              .zKDWD.YbB6r.IKvQi.IjQyD.JCRRb.cSOXK.G1NES,
                              .zKDWD.YbB6r.IKvQi.IjQyD.JCRRb.G1NES,
                              .zKDWD.YbB6r.IKvQi.iZbPU.JCRRb.G1NES,
                              .zKDWD.YbB6r.IKvQi.iZbPU.wZij3.G1NES,
                              .zKDWD.YbB6r.IKvQi.IjQyD.EhiOs.wZij3.G1NES,
                              .zKDWD.YbB6r.IKvQi.epBmH.EhiOs,
                              .zKDWD.IKvQi.IjQyD.JCRRb.G1NES,
                              .zKDWD.IKvQi.iZbPU.JCRRb._KLsp.G1NES,
                              .zKDWD.IKvQi.iZbPU.JCRRb.G1NES,
                              .zKDWD.IKvQi.gPZmZ.JCRRb.G1NES,
                              .zKDWD.IKvQi.epBmH,
                              .lHRXq.hDNlA.IjQyD.JCRRb.DLvHz.G1NES,
                              .lHRXq.hDNlA.IjQyD.JCRRb.G1NES,
                              .lHRXq.hDNlA.gPZmZ.JCRRb.G1NES
                              `); // different for pinned, flagged, returning to inbox after deleting, etc.
    if (parent)
    {
        console.log("TRASHFIND", parent);
    var newParent = parent.querySelector(`
    .XG5Jd.y1E5h.zItCb,
    .XG5Jd.hQj7T,
    .OD8Ue.hQj7T,
    .xc0ZS.hQj7T
    `).firstChild;
    if (newParent)
    {
        newParent.append(detach(elem));
    }
    }
}

function moveQuickActions(elem)
{
    let parent = elem.closest(
        `.XG5Jd.y1E5h.zItCb,
        .XG5Jd.hQj7T,
        .xc0ZS.hQj7T,
        .OD8Ue.hQj7T`); // parent element of left items
    if (parent)
    {
    var newParent = parent.firstChild; // append to first child of left item parent
    if (newParent)
    {
        newParent.append(detach(elem));
    }
    }
}

The fact that they disappeared on the right is interesting. It means those right-side classes are correct, but the ones on the left aren't.

This is tricky without having access to your browser/computer, but I can try. When you right click -> inspect element in Chrome (or Inspect in Firefox), you can see specific class names of elements. When you hover over the names of them, it will highlight the DOM elements.

We're looking for two specific class names.

1. The name of the main parent item for the row (it will have a tabindex of -1).

2. The name of the child of the container (it should be the first child of the second child of #1.

If you can get me those class names, I can add those to the script and see if that works. (If you screenshot, be careful not to share any personal information!)

(Outlook live doesn't allow right clicking, so you may need to type "document.addEventListener('contextmenu', event => event.stopPropagation(), true);" into the console in order to enable right clicking again. In Firefox, I had to enter the phrase "allow pasting" in order to do this.)

Apparently the icon are toooo on the left, check this:

This is for example to check read/unread and it work if i click the small button xD

Perfect, that's all I need. I've updated the script, let me know if anything's different!

Icons are back but still on the right, and there is stil the small read check too far on the left like above.

hope they can be useful to you

I don't know what made me open an incognito window and use another email that I have in outlook and when I open it I see that it works, it shows me the icons on the left side.

But when I log out and switch to my normal account even in incognito the icons appear on the right side.

Reviewing the classes in both accounts I realize that they are the same and I said then why it does not work, it is because both accounts have different configurations and I know which is the one that causes that they do not move to where they should and it is this option.

I had the Text Size and Spacing set to Medium, changed it to Large and they moved to the left and now no matter what I choose they stay where the buttons should be, although sometimes the delete button is set to the right in some messages.

I hope this solution will help someone else.

That's great detective work, thanks for doing that! I've updated v1.5 with the new classes, let me know if you see a change.

I'm starting to think it would be a better idea to try and find the elements based on aria-labels or something that's more human readable and less likely to change. The structure generally stays the same, it's just that every time they push an update there's some new obfuscated class name that gets replaced.

Ideally it would be robust enough to handle that. Maybe one day!

Still on the right for me, also changing text dimension doesn't change anything (i mean for the icons).

@Peppins32 I'm waiting for my grill to preheat and I just zoomed in to your pic and noticed I accidentally uncapitalized the T in last character of the 2nd class. I have 1.6 up for you, and I'm feeling really good about it.

I still have 1.3 installed when I went through the configuration options, try the first 3 options to see which one fixes it (change any option, save and reload the page).

I just upgraded to 1.5 and the icons stay on the left side.

Thanks again for new version! Works fine 05 april 2024

@Peppins32 I'm waiting for my grill to preheat and I just zoomed in to your pic and noticed I accidentally uncapitalized the T in last character of the 2nd class. I have 1.6 up for you, and I'm feeling really good about it.

Oh god, finally this time worked!!!

There is just a little issue. If you have some pinned message, the delete button are still on the right with "<div class="QpoLy">".

Glad to hear it! Yeah that makes sense. If you do the same inspect elements trick with the pinned message and paste the classname here I can cover that case as well.

Read above, unfortunately the div class appear only when i'm with mouse on it (i mean the > that allow you to see more lines).

Read above, unfortunately the div class appear only when i'm with mouse on it (i mean the > that allow you to see more lines).

Yes, that's true. It's a little tricky, but if you position the devtools window carefully, you can arrange it so that your mouse cursor will be on top of it when you click on Inspect, which will keep the hovered element in focus.

I didi it, mouse + arrows xD

Updated 1.7 with the new class.

Work but this happened:

As you can see, buttons aren't close to each other :/

Why there are spaces?

Sorry, was abroad on holiday. Updated to latest version, seems perfect once again. @Peppins32 - I had a space between pin and delete when first loading the page, which went away after waiting a little while. I think that might be unavoidable.

The delete icon shifted back for me, so I've updated 1.8 to include the new class. It's unfortunate that there's no real way to future proof this - any change they make is gonna re-obfuscate the class names, which means another update is required. I could query the selectors by title, like "button[title='Mark as unread']", but then that would break for anyone whose language isn't English. Oh well. Let me know if it doesn't work.

As a bit of cleanup, I also removed the Inbox redirect link, as they seem to have fixed that, and removed the ribbon hider too. Let me know if you need either of those back for whatever reason.

Thanks a lot, it work! ;-)

Thanks again for this Ross.

It's changed again and then doesn't work again, thanks microsoft uff :/

Updated 1.9 which fixes the delete icon, sorry for the delay.

Edit: And patched to 1.10 to fix delete icons on pinned messages as well.

Thanks a lot!!

No working again, but I added the new classes and it works, but now there is extra space between the buttons.

.lHRXq.hDNlA.gPZmZ.phGIG.G1NES,
.lHRXq.hDNlA.IjQyD.phGIG.DLvHz.G1NES,

Any fix?

holy shit, gang! I haven't updated my copy of the extension for a while and turned it off fully only to discover that they put the quick actions back on the left side by default!!! we're SAVED!

thanks @fortserious for your maintenance of this thing for so long but I think we might finally be out of the woods on this one

A glorious day.

It's been an honor and a pleasure to serve you all. As a parting gift, I've made a final edit to move the Bcc/Cc buttons to the left when replying.

Or if you use Stylish or some other CSS snippet addon, you can just add this to it:

.fui-Input { display: flex !important; }

Cheers!

hmm i disabled all scripts and i still see the quick actions at the left

https://i.imgur.com/Oikmoaa.png

what am i doing wrong?

Also, if i use the last script (on this web, version 1.3), it also doesnt change them to the left, they stay right too

I see. That's because we should be on version 1.11, not 1.3. Sorry, just switched browsers and an old duplicate copy of the script came with it. Fixed.

If not, two questions:

• What outlook URL are you using?
• What's your reading pane setting (Right, Bottom, Fill screen, Popout only) ?

I see. That's because we should be on version 1.11, not 1.3. Sorry, just switched browsers and an old duplicate copy of the script came with it. Fixed.

If not, two questions:

* What outlook URL are you using?

* What's your reading pane setting (Right, Bottom, Fill screen, Popout only) ?

hello and thanks

I am using "https://outlook.live.com"

• with your script OFF, and reading pane Right, i get the actions at the right (right to the title)
• with your script OFF, and no reading pane (aka "Fill screen"), i get the actions at the middle (between sender and title)

^ is this normal behaivour? I cant remember if reading pane affected

But there's more, even with your script (version 1.11) i get the same behaivour:

• with your script ON, and reading pane Right, i get the actions at the right (right to the title)
• with your script ON, and no reading pane (aka "Fill screen"), i get the actions at the middle (between sender and title)

confused now haha :D