Gerrit Javascript Plugin with Popup

Rebecca Dahlman

unread,

Jul 2, 2024, 2:34:24 AMJul 2

to Repo and Gerrit Discussion

Hi all,

Does anyone have any experience using the popup API in a Javascript/Typescript Gerrit Plugin? I've been looking around, and haven't found any examples online, hoping someone here can help me.

For context, we have additional information associated with all of our Gerrit reviews, and I'm attempting to develop a Typescript plugin that, when a custom button is clicked, opens up a popup that has an iframe showing our additional information page. I have successfully added a button to my test Gerrit, that when clicked, opens a popup with a static iframe. I'm struggling with a few things -

1) I'm passing a custom component name to the popup that just contains a static iframe right now. Is there a way to pass other information to the underlying component or get information from within the popup? For example, I'd like to know the gerrit change id from within the popup to properly populate the iframe.

2) I'm trying to add a Close button to allow the user to close the popup, but cannot get it to work. Any ideas on how that should work?

Thanks in advance!

Daniele Sassoli

unread,

Jul 9, 2024, 4:55:01 AM (13 days ago) Jul 9

to Repo and Gerrit Discussion

Hi Rebecca

On Tuesday 2 July 2024 at 07:34:24 UTC+1 Rebecca Dahlman wrote:

Hi all,
Does anyone have any experience using the popup API in a Javascript/Typescript Gerrit Plugin? I've been looking around, and haven't found any examples online, hoping someone here can help me.

For context, we have additional information associated with all of our Gerrit reviews, and I'm attempting to develop a Typescript plugin that, when a custom button is clicked, opens up a popup that has an iframe showing our additional information page. I have successfully added a button to my test Gerrit, that when clicked, opens a popup with a static iframe. I'm struggling with a few things -

1) I'm passing a custom component name to the popup that just contains a static iframe right now. Is there a way to pass other information to the underlying component or get information from within the popup? For example, I'd like to know the gerrit change id from within the popup to properly populate the iframe.

You should be able to access the URL of the page, from which you can extract the change number.

2) I'm trying to add a Close button to allow the user to close the popup, but cannot get it to work. Any ideas on how that should work?

Worse case scenario, you should be able to set the element's display property to "none".

If you share some code maybe I can help you out more.

Thanks in advance!

Rebecca Dahlman

unread,

Jul 9, 2024, 3:22:23 PM (13 days ago) Jul 9

to Repo and Gerrit Discussion

Hi Daniele - here's some of my code.

My understanding is that when the popup promise returns, it should be rendered, so I should be able to interact with the elements in the popup. So I tried to add a click listener on my close button in the popup that would close the popup using the built-in method. However, when I try to get the close button by id, it always returns null - I added the console.logs to see where the code was going, and it always ends up in the else.

Top is my plugin code, which successfully adds a button to the commit-container that opens my popup component when clicked.

Bottom is my component code for the addition-info-popup-component, which is where the popup close button is rendered that I am trying to use to close the popup.

window.Gerrit.install((plugin: PluginApi) => {

plugin.registerCustomComponent('commit-container', 'additional-info-button-component').

onAttached(element => {

element.addEventListener('click', () => {

plugin.popup('additional-info-popup-component').then(popup => {

var closeBtn = document.getElementById('closeAddlInfoButton');
if (closeBtn != null) {
console.log('here RLD');
closeBtn.addEventListener('click', () => {
popup.close();
});
}
else {
console.log('else rld')
}
});
})
});
});
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@customElement('additional-info-popup-component')
export class AddInfoPopup extends LitElement {
static override styles = css`
#additional-info-wrapper {
height: 85vh;
width: 85vw;
}
#additional-info-iframe {
height: calc(85vh-30px);
width: 100%;
}`;

override render() {

return html`<div id='additional-info-wrapper'><div><button id="closeAddlInfoButton" role="button" tabindex="0">CLOSE</button></div><iframe id='additional-info-iframe' sandbox='allow-same-origin allow-scripts' src=''></iframe></div>`;
}
}

Daniele Sassoli

unread,

Jul 10, 2024, 5:47:26 AM (12 days ago) Jul 10

to Repo and Gerrit Discussion

On Tuesday 9 July 2024 at 20:22:23 UTC+1 Rebecca Dahlman wrote:

Hi Daniele - here's some of my code.

My understanding is that when the popup promise returns, it should be rendered, so I should be able to interact with the elements in the popup. So I tried to add a click listener on my close button in the popup that would close the popup using the built-in method. However, when I try to get the close button by id, it always returns null - I added the console.logs to see where the code was going, and it always ends up in the else.
Top is my plugin code, which successfully adds a button to the commit-container that opens my popup component when clicked.
Bottom is my component code for the addition-info-popup-component, which is where the popup close button is rendered that I am trying to use to close the popup.

window.Gerrit.install((plugin: PluginApi) => {

plugin.registerCustomComponent('commit-container', 'additional-info-button-component').
onAttached(element => {

element.addEventListener('click', () => {

plugin.popup('additional-info-popup-component').then(popup => {

var closeBtn = document.getElementById('closeAddlInfoButton');

I suspect this isn't working because of the shadowRoot element of the Gerrit UI. I'm really not a UI dev, but in the past I've had to navigate the DOM like so:
document.body.getElementsByTagName('gr-app')[0].shadowRoot, so on so forth. There's a lot of nested shadowDoms.

if (closeBtn != null) {
console.log('here RLD');
closeBtn.addEventListener('click', () => {
popup.close();
});
}
else {
console.log('else rld')
}
});
})
});
});
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@customElement('additional-info-popup-component')
export class AddInfoPopup extends LitElement {
static override styles = css`
#additional-info-wrapper {
height: 85vh;
width: 85vw;
}
#additional-info-iframe {
height: calc(85vh-30px);
width: 100%;
}`;
override render() {

return html`<div id='additional-info-wrapper'><div><button id="closeAddlInfoButton" role="button" tabindex="0">CLOSE</button></div><iframe id='additional-info-iframe' sandbox='allow-same-origin allow-scripts' src=''></iframe></div>`;

Have you tried using onClick attribute here and setting style.display=none as part of that?

Reply all

Reply to author

Forward