Tag Archives: chrome

Quick HCP title hack with the Navigation Manager

One of the great things about the new SAP is that it has embraced open standards and protocols, and is building the UX and UI present and future on HTML5. A by-product of that is the ability to see how they’re building things and make, or suggest, changes.

At SAP Inside Track Sheffield last year, one of the sessions I gave was “Fixing up a nicer HCP Destinations table”, where I showed the power of UI5 introspection and the Chrome Developer Tools that enabled us to modify the surface upon which we were standing, to improve things. I re-recorded my session as a video here, in case you’re interested:

Fixing the HCP cockpit titles

Anyway, there’s something else that’s been niggling me a bit while using the HANA Cloud Platform (HCP) cockpit. And that’s the inability to see which tabs in my Chrome browser are open at what particular areas of the cockpit. Due to the way each location’s title text is structured, all the tabs look the same – at least at the start. It’s only when you hover over them you see what a given tab contains.

Here’s an example:

Screen Shot 2016-03-28 at 11.42.06

It’s only when hovering over the first tab that I see that it’s showing the HTML5 Applications part of the cockpit. If I’m looking to switch to that tab, the search for the correct one is painful.

So I wanted to take a quick look to see where this title was being set, and when. I used the Chrome Developer Tools’ DOM breakpoints feature to halt when the <title> element was changed:

Screen Shot 2016-03-28 at 11.46.08

This led me to a section of the HCP cockpit code that inside the Navigation Manager (cockpit.core.navigation.NavigationManager), in a function called “navigate”. This is what the code that sets the title looks like (I took the liberty of formatting it a little bit better for readability):

Screen Shot 2016-03-28 at 11.49.41

You can see how the title string is constructed – with the most significant part (current.navigationEntry.getTitle()) buried deep within it.

A small change to this code, so it looks like this:

Screen Shot 2016-03-28 at 11.49.54

brings the most significant part to the front, meaning that now I can see what tab contains what HCP cockpit feature – at a glance:

Screen Shot 2016-03-28 at 11.30.28

I think that’s a nice improvement. Personally, I’d love to see this make it into a future release. What do you think?

 

 

My browser A-Z

Inspired by a post “Letter Sweep” by Tim Bray, here’s my browser A-Z, a list of the URLs that appear when the browser tries to guess, on a single letter press, where I want to go, based on past locations.

A: appengine.google.com – unsurprising, as I’m a big fan of Google’s App Engine.

B: bbc.co.uk – where I go to get the news, although mostly I listen to Radio 4 via my Squeezebox Radio.

C: coastandcountryholidays.co.uk – Michelle and I are taking a holiday in Norfolk later this month.

D: docs.google.com – I’m a big Google Docs user.

E: enterprisegeeks.com – where I go for some excellent ERP / SAP banter.

F: flickr.com – I’ve been on Flickr for as long as I can remember.

G: google.co.uk – well, duh!

H: http://www.google.co.uk – interesting! Isn’t using the scheme in the URL cheating?

I: imdb.com – we’re Lovefilm members, but I still use IMDB for film geekery.

J: jsonformatter.curiousconcept.comJSON is my poison, and this excellent site is the sweetener.

K: www.amazon.co.uk/gp/digital/fiona/manage/ref=docs_dim_box – where I manage my Kindle. I think this is linked to K as I have a bookmark titled “K” pointing here.

L: linkedin.com – essential!

M: m.untappd.com – even more essential! Also, perhaps more alarming, Untappd is the only site that appears more than once, apart from Google’s home page.

N: natwest.com – where I do some of my banking. National Westminster Bank.

O: omniversity.madlab.org.uk – The Manchester Digital Laboratory’s Omniversity. Excellent!

P: pipetree.com – my main domain.

Q: qmacro.appspot.com – not been here for a while, this was a general play area on App Engine.

R: router – my Vigor router, to do the occasional port management.

S: slashdot.org – old but still ‘lesenswert’.

T: twitter.com – I’m a fan of Seesmic’s web client, but still use the mothership app for lookups and the like.

U: untappd.com/user/qmacro – ahem. Beer ahoy!

V: vmlu02:8080 – one of my servers; a virtual machine running on a micro-desktop on the shelves behind me. This is a port where I have an App Engine dev server listening.

W: www.google.co.uk – three out of three!

X: nothing!

Y: youtube.com – I thought I was happy when the interweb was just text. But I was wrong.

Z: zino:9000 – zino is the micro-desktop that hosts vmlu02. Listening on port 9000 is my Squeezebox server.

Hacking the Delicious extension for Chrome

I’ve recently moved from Firefox to Chrome. I use Delicious for managing my public and private bookmarks, and have installed the plugins for both browsers.

In moving to Chrome and installing the Delicious Tools extension, one thing I really missed from the Firefox-based add-on was the ability to set a simple configuration option to set the “Mark as private” checkbox on by default. There seemed to be a lot of forum-based discussion on making this work for the Chrome extension, but it seemed no solution was immediately evident. So I decided to investigate, and found out what I could do. This post is as much an aide memoire as anything else.

The Chrome extensions can be administered by entering chrome://extensions into the address bar. This is what you can see for the Delicious Tools extension, when you have the Developer Mode expanded:

Chrome extension details

There are a couple of interesting things that we can see:

  • the ID of this extension is gclkcflnjahgejhappicbhcpllkpakej, which is the same as part of the URL that points to the extension’s home page:
    https://chrome.google.com/extensions/detail/gclkcflnjahgejhappicbhcpllkpakej
  • there’s a reference to the active view ‘background.html’, which, on inspection, contains a Javascript function addDelicious() which builds up the URL that will retrieve the Delicious page to save a bookmark

A find and grep later, I find this background.html component’s home:

~/.config/google-chrome/Default/Extensions/
      gclkcflnjahgejhappicbhcpllkpakej/1.0.4_0/

It’s not just integration mechanisms that can be built in a loosely-coupled way. Applications built with HTTP, HTML, CSS and Javascript are also, almost by definition, beautifully loosely coupled; on inspecting the Javascript source in this file, we see:

   // Show delicious pop-up window
    addDelicious = function(conf) {
        var c = conf || {},
            doc = c.document || document,
            url = c.url || doc.location,
            title = c.title || doc.title,
            notes = c.notes || '',
            w = c.width || 550,
            h = c.height || 550,
            deliciousUrl = c.deliciousUrl || "http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=",
            fullUrl;

        fullUrl = deliciousUrl + encodeURIComponent(url) + '&title=' + encodeURIComponent(title) + '&notes=' + encodeURIComponent(notes);

        window.open(
            fullUrl,
            [...]

A simple addition of

fullUrl = fullUrl + "&share=no";

before the call to window.open() will add the query parameter “share=no” to the Delicious URL that is requested, resulting in the HTML form being rendered with the “Mark as private” checkbox already ticked.

Saving a bookmark, with private as default

Result!