The search box within the Oracle Cloud console dashboard is an amazingly powerful and awesome tool. I find myself using it more often than not to find resources or even navigate to other pages within the console. But, like many of you I’m sure, I find it rather annoying to have to take my fingers off of the keyboard to put focus on the search box with the mouse. So today, I finally came up with a solution that makes me quite happy and I thought I’d share it here in case there are others like me who might want to use it.
The goal here is to place focus on the search bar whenever I type the keyboard shortcut
CTRL+L. I chose this particular combination because it is very similar to the
CMD+L that I often use to place focus on my browser’s omnibar/omnibox.
To get started, create a new Tampermonkey userscript and update the metadata as follows.
This’ll match all pages in the
oraclecloud.com domain, so it’ll catch the entire console. Next we need to populate our function. It sounds simple, but the tricky part is that many of the pages within the console are actually
iframe elements - so we have to get creative to capture key events. We can take advantage of the fact Tampermonkey is going to load on all pages and establish a communication between the
iframe and the parent document. Here’s how:
Add a few booleans to make sure we’re only attaching our listeners once:
Next, in the portion that will execute for the top level page, declare functions for
blurSearch, a keydown handler that will call the proper function depending on the keys (
CTRL+L to focus,
ESC to blur) and attach the listener for the top level.
Now let’s modify the
iframe portion. We’ll need a
keydown listener, but we’ll have to use the
postMessage API to tell the top level page about the event since cross domain policy restricts us from manipulating the parent DOM directly from an
iframe. We’ll listen for the
message event in the top level and call
Finally, populate our
blurSearch functions to do what they need to do! Here’s the entire script:
And here’s how it looks in action. Notice the key pressed in the GIF to see what I’m pressing to focus and blur the search input.
In this post, we looked at a little hack that I came up with to make my life easier when using the OCI console. If you’d like to give me feedback or just want to make sure you always know when I post other helpful tips, follow me on Twitter. Until next time, cheers!
Photo by Romain Vignes on Unsplash
I've written many blog posts about connecting to an Autonomous DB instance in the past. Best practices evolve as tools, services, and frameworks become...
Email delivery is a critical function of most web applications in the world today. I've managed an email server in the past - and trust me - it's not fun...
In my last post, we looked at the technical aspects of my Brain to the Cloud project including much of the code that was used to collect and analyze the...