Buggy animation in Atlassian Bitbucket is wasting half a CPU core at all times

Buggy animation in Atlassian Bitbucket is wasting half a CPU core at all times(thehftguy.com)

261 points by user5994461 2 years ago | 108 comments

rafram 2 years ago |

> One thing that is remarkable, the icon is displaying a circle, but the icon image is really a square with transparent corners (inside a div container that is a rectangle).

…Yes. Ever seen an image file with circular dimensions? No, because digital images (at least in standard formats) are always rectangles, sometimes with transparent areas that make them to appear to be other shapes.

There are so many shockingly basic misunderstandings in this post.

steve_adams_86 2 years ago | |

Another thing is that they’re saying the animation is causing the entire page to reflow because it’s a square rotating out of bounds

My understanding is that transforms can’t cause reflows because they occur in the compositing layer. And as a sibling comment points out: everything round in css is actually a rectangle. Unless it’s a path drawn in an svg element. But then that lives in a rectangular frame. You could animate it with svg, though.

Regardless, I want to say I reject the premise here. I’m not sure why a transform would be so inefficient. I have a feeling it could be something else at work here.

nameless912 2 years ago | | |

Not to super rag on this person, but wow some of the other articles on their website...

They have an article on "cracking the hackerrank test" that straight up advocates for cheating on screeners companies are starting to do through hackerrank. I'm not about to claim that these tests are at all good at measuring your skill as a developer, but I would much rather a candidate engages with the process honestly than openly brags about cheating.

hulitu 2 years ago | | |

> I’m not sure why a transform would be so inefficient

Last i asked, if you change a (1) pixel on a modern computer, you need to redraw the screen because it's a surface which is being updated.

ChoGGi 2 years ago | |

This person has also stated the Linux kernel is hard-coded for 8 cores.

https://news.ycombinator.com/item?id=38260935

user5994461 2 years ago | | |

If you're wondering about that one from few weeks ago. One person from Intel noticed the article and confirmed the kernel bug, they ran some of the kernel benchmarks on their 24 core CPU and found up to 15% improvements when fixed (most difference on scheduler fifo benchmark, though 0% difference on most benchmarks).

I've ran the same on my computer at home and I also got double digit percent difference on a 32 cores AMD.

tester756 2 years ago | | |

On the other hand he had very influential and interesting posts like this

https://thehftguy.com/2016/11/01/docker-in-production-an-his...

https://thehftguy.com/2017/02/23/docker-in-production-an-upd...

jonwest 2 years ago | |

I’m trying to think about what the authors unspoken “better approach” could’ve been, because I’m with you—that doesn’t strike me as remarkable at all, it seems like it’s the way things have always been.

Maybe they were trying to argue that for something as simple as that, it could’ve been a div with a background and a font icon, and used CSS to make the div into a circle, and rotate that? It certainly seems more complicated at a glance, but I’m not a frontend dev, so, who knows?

lliv 2 years ago | | |

> but I’m not a frontend dev, so, who knows?

Yeah I don’t get it either.

I kept reading it expecting something to jump out at me. He just goes on about how “a square cannot be rotated”.

This honestly feels like more of a chrome bug or more likely some really weird settings on behalf of the author. I’ve seen this exact approach on the web. Nothing struck me as odd.

What is odd is that he didn’t do any testing with a different browser, machine, or OS even. He just decided to make a blog post.

yrds96 2 years ago | |

This is confusing. The author could explain what should be done instead. Even if it was an svg drawing a circle, the render engine will treat as it was a square because of the canvas, which is always an square. In fact rotating an element can overlap bounds, forcing to redraw all the elements around it, causing an extra work. That could easily be solved with an format with animation support (gif, svg, av1, webm...)

governmentdude 2 years ago | | |

Animated gifs have been optimized to an absurd degree for decades. For achieving high-performance animations, this is what I'd try. Then benchmark real-world performance.

simias 2 years ago | |

Sort of off-topic but I see a lot of round screens in sci-fi and especially retrofuturistic settings and that always wonder if there could be an alternate reality where they took off instead of rectangular monitors. After all for CRTs they were in some ways more optimal!

I dream of a polar-punk alternate reality where we address pixels not by (x, y) but by (r, θ).

Of course there's one big flaw with this line of thinking: even if we used circular (or elliptic) screens, we can't tile them with other circles. Circular windows would waste a lot of space. Maybe we could split in "slices" instead though?

BobaFloutist 2 years ago | | |

Split the difference and make hexagons? You can still address pixels with (r, θ), and you can tile them with other hexagons (Or squares, if you're into that sort of thing).

josefx 2 years ago | |

> …Yes. Ever seen an image file with circular dimensions?

The browser isn't displaying a file, it is displaying data mapped to a rectangle. It is 2023 you should be able to spend some polygons on those shapes.

rafram 2 years ago | | |

SVGs are, alas, also rectangular.

justsomehnguy 2 years ago | |

You missed the forest:

>> A circle can be rotated in place. It doesn’t take more space than the initial circle. *A square cannot.*

Edit: and just in case you or someone else miss the forest again:

the site developer treats the image as a circle, assuming rotating the image would change only the image.

Izkata 2 years ago | | |

And it does only change the image, because it's a CSS animation. For page rendering purposes, browsers only use the size and position of the un-rotated image. It's even visible in the Grumpy Cat example, the rotated image overlaps the edges of the table because CSS transformations don't affect the rest of the page.

ioulian 2 years ago |

Strange to see this, as the animation should NOT trigger a layout recalculation (transform is done on it's own "layer", is GPU accelerated and that's why it's more performant).

The article mentions "The computer is doing a lot more work and recomputing the layout of the entire page.", but it's not true. As you see in his example, the square image is getting rotated but layout of the table does not change (the image clips out the table), so no layout recalculation is done.

So the "bug", must be somewhere else?

dumbo-octopus 2 years ago |

This has nothing to do with the circle. Rendering animations in Chromium really is just that expensive.

VS Code experienced this same issue with the cursor blinking animation and some loading animations - there the best fix after dozens of attempts and some of the best JS perf engineers in the world looking at it was to actually move back to JS to show/hide the cursor on timeout. The only real "fix" for CSS animated things is to set `steps(30)` or whatever other low value to decrease the refresh rate, but that will make the thing stutter. There's no way to have efficient 60fps animations in chromium.

https://github.com/microsoft/vscode/issues/138396

https://github.com/microsoft/vscode/issues/22900

If anyone does know a fix, you could save the developer community about a metric ton of battery life hours worldwide if you share it with the above :)

Jeema101 2 years ago | |

This is a great example of basic functionality regressing due to the bloat of modern technology stacks.

Blinking cursors have existed since the original IBM PC and before. Yet for some reason, now a blinking cursor is a problem that causes CPU spikes on modern gigahertz level machines.

This shouldn't even be possible.

dumbo-octopus 2 years ago | | |

Indeed. One could write a book on all the ways "DevEx" has stomped over "UserEx".

reddalo 2 years ago |

I don't trust this article. Rotation of elements in CSS doesn't cause a reflow of the page, since it's a transform property, and so it doesn't cause a re-render like the article says.

gizmo 2 years ago | |

The article is wrong but the observations are correct. The codepen link posted somewhere downthread does result in usually high cpu usage (Chrome M2 Mac).

jwestbury 2 years ago | |

I trust them that Atlassian product performance is bad in ways that are always novel and surprising, at least.

shadowgovt 2 years ago | |

Rotation of elements in CSS shouldn't cause a reflow of the page. But the devil is in the details and sometimes, with a deeply complicated declarative API for plotting content on screen, It's easy for the developers working on the browser's rendering layer to inadvertently forget to do the correct thing in favor of the safe thing (ie if recalculating the layout ends up being the identity function, will testing actually pick up that the recalculation was in fact unnecessary or off spec?).

I have definitely in the past chased around a massive repaint bug that only showed up in Firefox using flex boxes (only to have it vanish at the next minor revision).

Since this performance hit is showing up in Chrome, it will be interesting to see if it is a Chrome specific issue or a webkit issue.

sebazzz 2 years ago | | |

The reflow hypothesis can be confirmed by setting a fixed height and width on the icon and overflow: hidden.

Redoubts 2 years ago | |

this blog has a history of "interesting" takes

selfhoster11 2 years ago |

I love that the cookie notice on this website asks for consent to share tracking data with 766 advertising partners. I feel so comfortable with that.

elaus 2 years ago | |

I really don't understand why a personal website would want to share my data with that many advertising companies...

evilduck 2 years ago | | |

Trying to earn their $0.14/mo in advertising revenue.

dylan604 2 years ago | | |

My guess would be the person running the website has used one simple 3rd party include that then loads all of the other things so that they might not actually be aware of what's being done under the hood. Or, they are a sociopath. But not being able to come up with reasons is not a good look.

bathtub365 2 years ago | |

Interesting, that’s exactly the same number as Outlook https://news.ycombinator.com/item?id=38441710

user5994461 2 years ago | |

Sorry about that. It's a wordpress website on the official wordpress.com hosting, it's actually wordpress that is doing all this tracking out-of-the-box.

I will check if there are options to reduce that.

karaterobot 2 years ago | |

Agreed, it's like being hugged by 766 pairs of strong but gentle arms.

Thaxll 2 years ago |

I would double check what OP found because his blog is full of inaccuracies, ex:https://thehftguy.com/2023/11/14/the-linux-kernel-has-been-a...

CommieBobDole 2 years ago | |

I like his article claiming that the Costco website in the UK does not and has never worked at all, where there's people in the comments saying "it works fine".

If a major website doesn't work for me, and it's not a one-time thing, I tend to assume the problem might be on my end and troubleshoot from there instead of writing an article about how it's amazing that nobody else has ever noticed that it's been down forever.

sundvor 2 years ago | |

https://news.ycombinator.com/item?id=38488237 ?

Thaxll 2 years ago | | |

Well you should read the reply on the kernel bug tracker:

"Peter already gave a quick reply on this regard couple years ago [1] and I think more tests and numbers are required in different environments, instead of solely think in the raw number of cores. When a high throughput server starts to fall down based on the task time slices? Maybe increasing from 8 to 24 is fine in normal memory intensive tasks, but what about 128 cores in a high-demand network server? 8 has proven to be "enough" so far (compared to other OSes), but, of course, it doesn't mean it hasn't room for improvements."

So it's pretty clear that it's not going to change any time soon and it's not a bug.

h1fra 2 years ago |

The article is missing the keyframes so it's hard to be sure what's the culprit but for those curious a simple animation like this can consume 12-20% CPU on my computer (chrome v119)

https://codepen.io/bodinsamuel/pen/VwgEGyE

archerx 2 years ago |

Should have used a .gif for the animation :)

CSS animations are a resource hog and I avoid having continuously running animations for this reason. For one site I wanted to have a background gradient slowly shift colors over time in an infinite loop but my laptop fan kept spinning on the page and the cpu usage was high so I scraped it.

temp00112 2 years ago |

I don't think the performance reason is this

'''In a real world app that is responsive and highly dynamic, like BitBucket, the page is usually adjusted to fit content, neighboring elements get pushed out to fit the rotating image, then neighboring and parents elements get adjusted too… the layout of the entire page is redone on every frame because of the rotating image.'''

transform translations doesn't make the browser recalculate the layout for neighbour elements

0xbadcafebee 2 years ago |

People complain a lot about Jira, but Bitbucket is legitimately shitty. Bitbucket lacks tons of features. If you try to integrate it with another product, typically features don't work for Bitbucket, where they'll work for GitHub or GitLab. It only recently, after something like 7 years, gained the ability to pass a secret in a webhook. Group/Org level permissions for certain project properties are apparently not exposed by their OAuth API. Adding repo deploy keys and permissions to integrated products requires manual intervention. The Markdown parser is buggy, the UX is annoying and less useful than their competitors, feature requests go unanswered.

It's bizarrely been on life support forever. Atlassian doesn't seem to want to invest in it, despite the fact that the hosted VCS landscape isn't that big, and they've had a huge opportunity to steal business by converting GitHub Enterprise customers to a Bitbucket offering with cheaper deals from bundling with other Atlassian products. Despite all this, there isn't a single solitary reason to adopt Bitbucket, unless using GitHub and GitLab are forbidden.

We stay on Bitbucket because we don't want to invest the money and time it'll take to move off. But we know that we will move eventually, because the competition is just better in every way. I can't say that about the rest of Atlassian's products.

pharmakom 2 years ago |

In this vein, I can’t even register for GitHub on Firefox due to laggy animations. Works fine in Chrome. Did they even test it?

WarOnPrivacy 2 years ago | |

> I can’t even register for GitHub on Firefox due to laggy animations.

You aren't kidding. On Firefox 120 it ramps up a Xeon core to >50% and floors my GPU 3D at 100%.

I opened on Opera and CPU is negligible, GPU is steady at 15% (which still seems high for a throwaway web background).

for those playing along at home: https://github.com/signup?source=login

AntronX 2 years ago | | |

My CPU was at 27% (i3-4130) and 27 watts power use vs. 11w at idle. Added uBlock filter: github.com##div.signup-stars and CPU was back to 1%. Background stars animation is the culprit.

shadowgovt 2 years ago | |

On a browser with like 5% uptake? I'd be willing to wager they didn't test it on Firefox. They probably didn't test it on Brave either.

pacifika 2 years ago | | |

I’m sure everyone is a 5% edge case somewhere

ToValueFunfetti 2 years ago | | |

I can't support this with data, but I expect the percent is a bit higher among potential GitHub users

pharmakom 2 years ago | | |

For GitHub, Firefox usage will be way higher.

And besides “Microsoft <3 Open Source” right?

… Right?

andygeorge 2 years ago | |

huh? works just fine for me in Firefox

shadowgovt 2 years ago | | |

I'd be willing to wager the X Factor is graphics card configuration and a card optimized for high performance 3D rendering (including having the drivers installed properly to leverage those features).

There's a bit of a correlation between Firefox users and users who are mostly content that their hardware supports explicitly a 2D desktop GUI and is not optimized for anything fancier. But nowadays, the browser itself is a 3D application because the 3D compositing pipeline is also the high performance 2D compositing pipeline.

zerop 2 years ago |

But why chrome implements CSS Animation in a way that would cost so much CPU?

Zealotux 2 years ago | |

It’s explained in the article: the image is a square (even though it looks like a circle), rotating a square cannot be done in place, it’ll shift the layout as it rotates, provoking a new paint of the entire page on each animation frame.

This is how the author explains it, but it sounds suspicious to me, I’m not sure a CSS animate rotation would cause shifts in that case.

542458 2 years ago | | |

Yeah, a CSS rotate is just a visual effect - it doesn’t change the item’s actual box size and therefore doesn’t cause page reflows. I suspect there’s something else happening here. It may be that it’s triggering a repaint of adjacent regions or the entire table.

ioulian 2 years ago | | |

You are right, this would not cause layout to recalculate, only repaint. And propably repaint only a section of the screen, not the whole window.

imedadel 2 years ago |

SVG animations in CSS are notoriously CPU intensive (see https://news.ycombinator.com/item?id=22302150)

bluedino 2 years ago |

Work at a large company. Lots of non-technical people fall under IT.

Security decided that any Linux VM needs Microsoft Defender ATP installed. Okay.

It was installed by the DevOps team on all the VM's in Azure. Many, many people reported that their machines were now using 100% CPU, or 1 of their multiple CPUs were pegged by a defender process. This isn't uncommon.

Solution? Devops added cores to all machines. Wonder how much that bumped up the bill.

peter_d_sherman 2 years ago |

Random idea for a future browser:

o Give me flamegraphs of all the computing resources a given web page is using; CPU, processes, threads, fibers, specific methods/procedures/functions inside of the Browser... also, be able to selectively disable and keep disabled, on a granular level (by web page/URL) things that use resources beyond a certain amount, for example, in the article's case, a buggy animation -- but more generically any resource or browser process or sub-process that is taking too much CPU time and/or other computing resources (RAM, I/O, Network, GPU etc.)...

(Yes, including those "power user" features could lead to the selective reduction of functionality for some web pages -- but the user should always be able to determine exactly what they want and what they don't want from any given web page...)

artursapek 2 years ago |

I fixed a bug like this in online-go.com once. The "unread notification" bubble had an almost indiscernible infinite animation at 60fps and the website would start killing my Thinkpad every time it was showing. It felt so good to track down and fix it.

johnvaluk 2 years ago | |

Can you describe the fix?

artursapek 2 years ago | | |

I just removed the animation lol

mgaunard 2 years ago |

We need to stop pushing so much logic in web pages.

They should just display stuff, not run silly animations or do calculations in the background.

tantalor 2 years ago | |

An animation is one way to "display stuff"

There is no "logic" here.

hospitalJail 2 years ago | |

That is what Plato's Socrates would say.

Plato's Callicles would tell you that this is idealistic nonsense and nature has shown us that we need beautiful pages that drive engagement.

Humans teach each other that Socrates is right, but if we look around us, its clear we've been told a lie.

Kiro 2 years ago |

Can someone verify this? I find it hard to believe that the animation is the problem.

adverbly 2 years ago | |

> When removing the animation (tip: remove the css or set status to “paused”), the CPU sits near 0% and the GPU near 0%.

Seems pretty easy to replicate. I don't know this particular screen they're talking about otherwise I would try it. I definitely have used CSS animations before without thinking about potential performance implications so this does seem like a good thing to try to understand in better detail.

I agree that rotating a square doesn't seem like it should be the root cause here though.

EDIT: I suppose it is possible that you are still correct though. Perhaps there is some JavaScript that is looking at the CSS properties as a way to trigger more significant work. It seems like a hacky thing to do, but it would be possible in principal.

gwbas1c 2 years ago |

I remember how this used to be a common problem with web ads in the mid 2000s.

One of the reasons why I loved Chrome when it came out was that the multi-process architecture made it easy to kill a Chrome process without closing all my open tabs: The offending tag would "crash," but otherwise I could continue browsing.

Also, around that time there was an ad on Slashdot that gobbled CPU. I remember quickly figuring out that it was the ad, grabbing a screenshot, and emailing them. I got back a quick knowledgeable reply (and apology).

SV_BubbleTime 2 years ago |

I like rooting for an underdog. We use GitLab instead of GitHub. Partly for that, and partly because the CEO saw I mentioned a problem here, and helped fix it.

But going with BitBucket seems like a foot gun.

FesterCluck 2 years ago |

Believable. I spend a lot of time on this screen and it's been killing performance & Webex sessions. Another place to find this sort of problem is to show full log after a build.

dzaima 2 years ago |

Similar thing presumably happens on GitHub commit pages - at the bottom there's a "You’re not receiving notifications from this thread." (or a different message if you have, presumably) that only loads once you've scrolled to it, but before that it's a spinner which takes up CPU (even though it's not even visible). It's similarly an svg, with 'animation: rotate-keyframes 1s linear infinite;'

linsomniac 2 years ago |

While we're on the subject, does bitbucket just seem horribly slow for pulling lately? My work uses bitbucket and my personal projects use github, and lately I've been doing a lot of personal project work over the holidays, and every pull of bitbucket is just painfully slow. Is that because it's a bigger repo?

solardev 2 years ago | |

Is anything from Atlassian ever not slow? Confluence, Jira, etc. are all horribly slow, whether in the UI or just time to respond to any AJAX calls

l33tman 2 years ago |

FWIW Spotify's latest big banner in their web/desktop app (something about christmas playlists) takes 100% CPU. I started noticing it after a while when my laptop got really hot and the Spotify Helper Process was stuck at 100%. Navigating away into an album display fixed it..

smusamashah 2 years ago |

I just tested this, when animation is running, CPU for the tab (according to chrome Task Manager) was around 3% (Core i7-10875H). When animation stopped, it jumped back to 0.0.

lagniappe 2 years ago |

This is a cool way to make the case for setting a preference for preferred reduced motion. I never got bothered one way or the other but if it saves battery...

Phelinofist 2 years ago |

gempir 2 years ago |

This article is filled with misinformation and seems unnecessary hostile.

I think the only reason it got so many points is because it's a hate on Atlassian thread.

The implementation seems perfectly normal, I would guess 90% of all developers would implement an animation this way.

orlp 2 years ago | |

If anything the title should be "inefficient animation implementation in Google Chrome is wasting half a CPU core".

jeffbee 2 years ago | |

The hostility of one forced to endure Bitbucket is understandable.

cynicalsecurity 2 years ago | | |

BitBucket offered free private repos long before GitHub. The hate is unjustified.

jxf 2 years ago |

I wonder what the total amount of wasted CPU is for displaying and fetching advertising.

sharts 2 years ago |

Sounds like another case of pointless feature and lack of enough testing.

zackmorris 2 years ago |

The same thing happens with https://www.wolframalpha.com for me in Safari on macOS, where I frequenly get 250% CPU usage. Even with Safari->Develop->Disable JavaScript, after showing the Develop menu with Safari->Preferences...->Advanced->Show Develop menu in menu bar. Sounds like it's due to the css using time or animations. I can't find a fix for it, other than disabling Safari->Develop->Disable Styles, but who wants to surf the web without css?

Here is an AppleScript I've hacked together over time to show the Safari tab for a PID from Activity Monitor so it can be closed, note that I'm on macOS 10.13.6 on this old 2011 Mac Mini, using Safari 13.1.2, so YMMV:

  -- launch Activity Monitor to find the PID of a misbehaving tab and show it with this script
  
  -- ensure that Safari->Debug->Miscellaneous Flags->Show Web Process IDs in Page Titles is enabled
  tell application "System Events" to tell process "Safari"
    -- ensure that user has enabled assistive access
    try
      menu 1 of menu bar item "Safari" of menu bar 1 -- throws exception if menu not visible
    on error
      display dialog "Please enable assistive access for this script by dragging it into the list of apps in:
  
  System Preferences->Security & Privacy->Privacy->Accessibility
  
  (It must be disabled and re-enabled each time this script is edited)" buttons {"OK"} default button "OK"
      return
    end try
    
    -- ensure that user has enabled Show Web Process IDs in Page Titles
    try
      set debugMenu to menu 1 of menu bar item "Debug" of menu bar 1 -- throws exception if menu not visible
    on error
      display dialog "Enable Debug menu in Safari? It will be relaunched but preserve any open windows." -- stops script if Cancel is clicked
      do shell script "defaults write com.apple.Safari IncludeInternalDebugMenu 1 && killall Safari && osascript -e 'tell application \"Safari\" to activate'" -- force quit Safari to preserve windows on relaunch
      return
    end try
    
    tell menu item "Show Web Process IDs in Page Titles" of menu 1 of menu item "Miscellaneous Flags" of debugMenu
      if (value of attribute "AXMenuItemMarkChar" as string) is "missing value" then click
    end tell
  end tell
  
  -- show tab matching string, prepopulated with [WP _pid_]
  set searchString to text returned of (display dialog "Please enter a string to find the Safari tab containing it:
  
  ([WP _pid_] from Activity Monitor for convenience)" default answer "[WP _pid_]")
  
  tell application "Safari"
    -- bring frontmost to avoid App Tamer from slowing script
    activate
    
    repeat with w from 1 to count of windows
      repeat 1 times
        try
          set theTab to (first tab of window w whose name contains searchString)
        on error
          exit repeat
        end try
        set current tab of window w to theTab
        
        -- work around a bug/feature of Safari where windows lack a way to bring them to front
        if index of window w is not 1 then
          set index of window w to 2
          tell application "System Events"
            tell application process "Safari"
              keystroke "`" using command down
            end tell
          end tell
        end if
        return
      end repeat
    end repeat
    
    display dialog "Couldn't find tab containing \"" & searchString & "\"." buttons {"OK"} default button "OK"
  end tell

Just open Script Editor, paste it in and save it as an application under ~/Library/Scripts or by choosing Script menu->Open Scripts Folder->Open User Scripts Folder. The Script menu can be shown via Script Editor->Preferences->General->Show Script menu in menu bar. Then run it and follow the prompts to ensure that assistive access has been enabled and that tabs show their PID.

The script is loosely derived from:

https://hea-www.harvard.edu/~fine/OSX/safari-tabs.html

https://apple.stackexchange.com/questions/45768/how-can-i-fi...

I tried to make a version that just shows the Safari tab having a pid, but lost a day to it doing a deep dive into listing windows and their pid:

https://stackoverflow.com/questions/48058409/get-windows-wit...

https://stackoverflow.com/questions/14551419/listing-all-win...

https://stackoverflow.com/questions/42018149/get-pids-of-all...

Unfortunately Apple made AppleScript and Automator so arduous to use that I consider them adversarial programming. Like with MS Visual Basic, there's usually less than 50% odds of getting a script to work, regardless of how experienced the developer is. Certainly 0% without resources like web forum posts.

Web browsers are even worse, in the sense that they're written for users instead of developers. Some low-hanging fruit would be to pause all non-focused tabs after a configurable period of time, so that they only use memory. I've wanted that since I first saw NCSA Mosaic in 1995, along with a great many other improvements which the powers that be seem to work tirelessly to prevent. Blah.

zackmorris 2 years ago | |

Just so we have it, here is a script to disable Javascript in Safari, showing just the business logic for brevity:

  tell application "System Events" to tell process "Safari" to tell menu item "Disable JavaScript" of menu 1 of menu bar item "Develop" of menu bar 1
    if (value of attribute "AXMenuItemMarkChar" as string) is "missing value" then click
  end tell

I save it as an application called Disable Javascript under User Scripts in Script menu and enable assistive access for it.

You can attach a keyboard shortcut to any menu, for example System Preferences->Keyboard->App Shortcuts->Safari->Disable Javascript with command-J. Unfortunately that just toggles Javascript, with no visible indication of whether it's on.

You used to be able to assign a keyboard shortcut to launch applications and scripts, but Apple borked that long ago:

https://apple.stackexchange.com/questions/175215/how-do-i-as...

So instead, I created Automator->Service->Run Shell Script with:

  osascript -e 'tell application "Disable Javascript" to activate'

Then saved it as service "Disable Javascript". Then System Preferences->Keyboard->Services->General->Disable Javascript with shift-command-J.

Now I just periodically press shift-command-J while browsing. If a tab won't render, I press command-J, command-R to reload, then command-J again so the tab doesn't use resources.

I used to have a script to launch Safari with Javascript disabled, but Apple changed how it worked so that the flag is stored in their SQLite preferences somewhere, and I just never found time to re-implement it. If anyone knows a way, I'm all ears!

Edit: HN stripped the checkmark character (https://www.compart.com/en/unicode/U+2713) when I pasted, even though I made it a code block by prefixing each line with 2 spaces. So I changed the line to:

  if (value of attribute "AXMenuItemMarkChar" as string) is "missing value" then click

Sorry if that prevented the scripts from working!