recursive.codes


The Personal Blog of Todd Sharp

Place Focus on the Oracle Cloud Console Search Box With a Keyboard Shortcut

Posted By: Todd Sharp on 1/28/2021 5:50 GMT

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.

My solution utilizes Tampermonkey - one of my all-time favorite browser add-ons. Side note - if you’re not using it, you should absolutely install it because it makes it super easy to write scripts to enhance the web pages that you visit with simple JavaScript. If you want to play along at home, make sure that you have Tampermonkey installed in your browser before proceeding.

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 focusSearch and 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 focusSearch.

Finally, populate our focusSearch and 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.

Summary

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



Related Posts

Sending Push Notifications from Oracle Notification Service with Oracle Functions and Pushover

Sending Push Notifications from Oracle Notification Service with Oracle Functions and Pushover

The Oracle Notification Service is an extraordinary service. I’ve blogged about it in the past (see the Complete Guide to the Oracle Notification Service...

Adding Tracing to Your Distributed Cloud Native Microservices

Adding Tracing to Your Distributed Cloud Native Microservices

When adopting cloud-native technologies and certain architectures such as the microservice pattern, observability and monitoring become a huge need and...

Project GreenThumb Part 5 - The Front-End, Build Pipeline, Push Notifications and Overall Progress

Project GreenThumb Part 5 - The Front-End, Build Pipeline, Push Notifications and Overall Progress

In this short blog series, I introduced you to Project GreenThumb, a project that I created to automate and monitor the process of growing seedlings with...

Note: Comments are currently closed on this blog. Disqus is simply too bloated to justify its use with the low volume of comments on this blog. Please visit my contact page if you have something to say!