-
-
Save fortserious/aee38888a9c672c27682fa43940588fa to your computer and use it in GitHub Desktop.
| // ==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)); | |
| } | |
| } | |
| } |
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.
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.
Updated 1.7 with the new class.
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!!
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
That fits my expectations. My script will move the buttons to the left (i.e., between sender and title), but apparently only with the reading pane set at "Fill screen". I can try and see if I can make it work on reading pane "Right".
oh so it was the reading pane all along! good to know
Its ok, I got used to have the reading pane on right, u dont need to work it out! u worked so much and we are so thankful!
I think i started using it to the right at some time in the past, and then got used to it and didnt update your script since then, but came to this thread recently as i'm subbed to new posts, and got confused with the behaivour cause i didnt remember the reading pane affected it
So thanks! for all your work
Ugh. Outlook web just moved the RIGHT quick actions to the center/leftish side. I'm thinking about taking a crack at editing this script but was curious if you have any general insight before I dive in?
Sure. (I'll take a look at it when I get a chance too, but it's a busy time of year)
You really have three objectives:
- Determine the selector of the items you want to move
- Determine the selector of the container you want to move them to (or, figure out what CSS you can apply to move it there)
- Ensure they exist before doing anything
I use the waitForKeyElements script for the third part. It essentially creates an event listener on an interval that fires when it sees the element exists on the dom. You give it a selector and a callback (which gets fed the element) as inputs. You can also optionally tell it to stop scanning after the first match. I think it does something like add a data-alreadyFound tag after it detects an element, so you can add that to your selector to prevent your callback from rerunning.
So, usually, the process is pretty simple: use your browser's dev tools to inspect the page and find the classes (or ideally, aria-label, or button text, since those are less likely to change) in question.
Then, your callback should take the element, find its new container, and insert it there (or if you're lucky enough that it's just style changes you need, apply the relevant styles).
It's brittle, but at the end of the day it works. Feel free to email me if you have any questions. My email's linked from my personal website, listed in my profile.
Author
Thanks for the detailed response! I was just toying with some AI stuff to see if they could modify it but no luck. I modify a lot of CSS and wrote userscripts for forums back in the day so although this is a bit more advanced, I understand what you're talking about. Already found a few classes and selectors but just need to brush up on how to accomplish reliable repositioning in the script.
Don't feel any obligation to tackle this, could be a good challenge for me :)
Cheers!




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!