addSidebarContentPanel stops functioning after a while

[David Rosillo]

Hello.

I'm currently developing an extension using InboxSDK in Gmail, I have to say it has made my job a lot easier but right now I'm facing a problem that I just can't seem to make work.

The issue is that I can use threadView.addSidebarContentPanel() to show a sidebar content panel on mails and it works like a charm, BUT my extension works in a way that it's needed to remove and re-render the content panel, I noticed that this works an average of 3 times and then all content panels stop rendering at all.

In my extension is very common for a mail to be processed by a back-end and after being processed I need to create a content panel with some relevant data to my extension's users. I've managed to achieve this but after an average of 3 times the content panels stop rendering, everywhere, and it's only fixed by refreshing Gmail.

What baffles me is that there's nothing in the console, no warning, no error, nothing, and it's been hell for me trying to track the error as everything is written as in the docs and, therefore, everything should work just fine.

This is the code I'm using:

Promise.all([

    InboxSDK.load(1, 'app_id'),

    InboxSDK.loadScript('https://cdn.jsdelivr.net/npm/jqu...@3.2.1/dist/jquery.min.js')

  ]).then(function(responses){

    let vm = this;

    let sdk = responses[0];

    vm.refresh = false;

    

    sdk.Conversations.registerThreadViewHandler(function(threadView){

      vm.thread_id = threadView.getThreadID();

      var sidebar;

      let messages = threadView.getMessageViewsAll().length;

      // I check in my extension if the mail is used in my app

      if ( vm.threadData[vm.thread_id] ) {

        // Up to this point the code gets executed succesfully and a content panel is rendered in every thread I navigate to

        let el = document.createElement('div');

        // This call is used to check in my back-end data related to the mail, it returns HTML

        chrome.runtime.sendMessage({message: 'back-end-call', data: vm.thread_id}, function(r) {

          let html = `

            <div class="lists-dropdown-container">

              <div class="lists-dropdown-links">

                <ul class="view-links">

                  ${r}

                </ul>

              </div>

            </div>

          `;

          el.innerHTML = html;

          // Here I create a content panel and assign it to a variable

          sidebar = threadView.addSidebarContentPanel({

            el: el,

            title: 'Attached Projects Links',

            iconUrl: chrome.runtime.getURL('src/gryffin_logo.png')

          });

        });

      }

      // I use this function to track a variable called vm.refresh, if it's true then the function inside gets executed

      // and a new content panel is rendered if there isn't one already, if there is then it is destroyed and a new one

      // is rendered

      setInterval(function(){

        if (vm.refresh && vm.threadData[vm.thread_id]) {

          // change variable state

          vm.refresh = false;

          // If there's a sidebar already, remove it

          if (sidebar)

            sidebar.remove();

          // Same back-end call as above

          chrome.runtime.sendMessage({message: 'back-end-call', data: vm.thread_id}, function(r) {

            //Omitted for simplicity, this section of code is exactly the same as above

          });

        }

      },1000);

    });

    sdk.Conversations.registerMessageViewHandler(function(messageView){

      messageView.addToolbarButton({

        section: 'MORE',

        title: 'The Title',

        iconUrl: 'icon/url,

        onClick: function(event){

          // Code that processes the mail in the back-end
          // Change state of refresh variable when process is finished
          vm.refresh = true;

        }

      });

    });

    

});

To further clarify my extension's functionality: the first time in a Gmail session I navigate to any thread view, if that thread has a mail that's used in my back-end then a content panel is rendered successfully, this will work regardless of how many threads are used.

Inside a thread, if its mails are not used in the back-end, it's possible to process a mail by clicking on a toolbar button, after the process a variable changes values, which is detected in the setInterval and a new content panel is supposed to replace an existing one. As stated before, this works like 3 times on average, and then all content panels stop rendering everywhere.

Thank you so much for your help, if you need something else that might help in finding a solution just ask me and I'll gladly supply it.

[Chris Cowan]

Yeah that sounds like a problem with the InboxSDK. We'll investigate this.

However, instead of entirely removing and then re-creating the sidebar content panel, which exacerbates this issue and also may interrupt the UI (like the sidebar's scroll position, etc), you should instead update the panel's element's contents whenever possible.

On Friday, January 19, 2018 at 8:05:26 PM UTC-8, David Rosillo wrote:

Hello.

I'm currently developing an extension using InboxSDK in Gmail, I have to say it has made my job a lot easier but right now I'm facing a problem that I just can't seem to make work.

The issue is that I can use threadView.addSidebarContentPanel() to show a sidebar content panel on mails and it works like a charm, BUT my extension works in a way that it's needed to remove and re-render the content panel, I noticed that this works an average of 3 times and then all content panels stop rendering at all.

In my extension is very common for a mail to be processed by a back-end and after being processed I need to create a content panel with some relevant data to my extension's users. I've managed to achieve this but after an average of 3 times the content panels stop rendering, everywhere, and it's only fixed by refreshing Gmail.

What baffles me is that there's nothing in the console, no warning, no error, nothing, and it's been hell for me trying to track the error as everything is written as in the docs and, therefore, everything should work just fine.

This is the code I'm using:

Promise.all([

    InboxSDK.load(1, 'app_id'),

    InboxSDK.loadScript('https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js')

[Omar Ismail]

There may be something in the SDK, still need to investigate that. In the meantime you need to clear out your interval when the threadView is destroyed.

Please try that and let us know if that helps the situation.

ᐧ

--
You received this message because you are subscribed to the Google Groups "InboxSDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/2a8378f0-e7f2-455f-930e-20eea2ebef14%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[David Rosillo]

How can I update the panel's contents after created? There's no mention of how to access its contents in the docs.

Thank you.

[Omar Ismail]

You are creating el, keep that element reference around and update the contents of that element.

ᐧ

On Tue, Jan 23, 2018 at 3:28 PM, David Rosillo <drr...@gmail.com> wrote:

How can I update the panel's contents after created? There's no mention of how to access its contents in the docs.

Thank you.

--

You received this message because you are subscribed to the Google Groups "InboxSDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+unsubscribe@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/a36001d6-751e-4682-8433-1ac13a6ede39%40googlegroups.com.