-2

Google Presenter (in fullscreen window mode) provides a dropdown to select Slides, which only populates a div goog-menu goog-menu-verticalonce it has been opened the first time.

Is there any way to find out from where Google is pulling this info, whether I can access the Slide titles without having to trigger a mousedown event to simulate the opening/closing action?

Otherwise the only workaround I can see is to open and close it via javascript and maybe hide it first so the action is invisible, but I'd prefer to access the data directly if possible. How best to check in dev console?

I wan to extract textContent from .goog-menuitem-content contained inside goog-menu-verticaldiv class (only available once select had been opened).

enter image description here

enter image description here

Here the HTML code, though not sure if that really matters as I expect this to be JS and some other source it must be pulling from, as I couldn't find the content in the HTML itself.

<div id="punch-viewer-speakernotes">
    <table class="punch-viewer-speakernotes punch-viewer-client-rendered-notes">
        <tbody>
            <tr>
                <td class="punch-viewer-speakernotes-side-panel" style="width: 331px;">
                    <div class="punch-viewer-speakernotes-timer-panel">
                        <div class="punch-viewer-speakernotes-timer-main-container">
                            <div class="punch-viewer-speakernotes-timer-time-container" style="">
                                <div class="punch-viewer-speakernotes-timer-time">00:00:25</div>
                            </div>
                            <div class="punch-viewer-speakernotes-timer-button-container">
                                <div role="button" class="jfk-button jfk-button-standard punch-viewer-speakernotes-timer-button" tabindex="0" title="Pause timer" value="undefined" style="user-select: none; width: 54px;"><span class="jfk-button-label">Pause</span></div>
                                <div role="button" class="jfk-button jfk-button-standard punch-viewer-speakernotes-timer-button" tabindex="0" title="Reset timer (R)" value="undefined" style="user-select: none; width: 54px;"><span class="jfk-button-label">Reset</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="punch-viewer-speakernotes-page-control-panel">
                        <div class="punch-viewer-speakernotes-page-control">
                            <div class="goog-inline-block goog-flat-menu-button jfk-select" role="listbox" aria-expanded="false" tabindex="0" aria-haspopup="true" aria-activedescendant=":39" style="user-select: none;">
                                <div class="goog-inline-block goog-flat-menu-button-caption" id=":39" role="option" aria-selected="true" aria-setsize="29" aria-posinset="5">Slide 5 </div>
                                <div class="goog-inline-block goog-flat-menu-button-dropdown" aria-hidden="true">&nbsp;</div>
                            </div>
                            <div class="punch-viewer-speakernotes-page-container" style="width: 291px; height: 164px;">
                                <div class="punch-viewer-speakernotes-page" style="width: 291px; height: 164px;">
                                    <div class="punch-viewer-loadstatus" style="display: none;">
                                        <div class="punch-viewer-center punch-viewer-center-browser-modern punch-viewer-center-boxtype-all">
                                            <div class="punch-viewer-center-content-container"><span class="punch-viewer-center-centering"></span>
                                                <div class="punch-viewer-loadstatus-content goog-inline-block punch-viewer-center-content">
                                                    <div class="" style="display: none;"></div>
                                                    <div class="" style="display: none;"></div>
                                                    <div class="" style="display: none;"></div>
                                                    <div><span tabindex="0" class="punch-viewer-loadstatus-link" style="display: none;"></span><span tabindex="0" class="punch-viewer-loadstatus-link" style="display: none;"></span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill-rule="evenodd" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" overflow="hidden" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 365760 205740" style="line-height: normal; width: 291px; height: 164px;">
                                        <rect fill="#ffffff" fill-opacity="0" width="100%" height="100%"></rect>
                                        <g transform="translate(0 0) scale(1)">
                                            <defs cursor="default"></defs>
                                            <g>
                                                <path fill="#fff" fill-opacity="1" d="M 0 0 L 365760 0 365760 205740 0 205740 Z"></path>
                                                <g id="g1e02d4ec510_1_0-bg">
                                                    <g>
                                                        <g>
                                                            <path fill="#FF9900" fill-opacity="1" d="M 0 0 L 365760 0 365760 205740 0 205740 Z"></path>
                                                        </g>
                                                    </g>
                                                </g>
                                                <g id="g1e02d4ec510_1_1">
                                                    <g>
                                                        <g>
                                                            <path d="M 2041 0 L 367801 0 367801 205740 2041 205740 Z"></path>
                                                        </g>
                                                        <g>
                                                            <g direction="ltr">
                                                                <g transform="matrix(380.99999999999994,0,0,380.99999999999994,5698,75438)">
                                                                    <g pointer-events="none">
                                                                        <g id="g1e02d4ec510_1_1-paragraph-0">
                                                                            <g>
                                                                                <g class="sketchy-text-background" visibility="visible"></g>
                                                                                <g></g>
                                                                                <g class="sketchy-text-content" visibility="visible">
                                                                                    <g class="sketchy-text-content-text" transform="translate(0 115.19999999999999)"><text style="font-family:Arial;font-size:120px;fill:#595959;white-space:pre;" text-rendering="geometricPrecision" x="437.02657480314963">4</text></g>
                                                                                </g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </svg>
                                </div>
                            </div>
                            <div role="button" tabindex="0" class="punch-viewer-speakernotes-page-previous" style="width: 131px; border-width: 1px;"><iframe class="punch-viewer-speakernotes-page-iframe" frameborder="0" tabindex="-1" style="width: 129px; height: 73px;"></iframe>
                                <div class="punch-viewer-speakernotes-page-caption">Previous</div>
                            </div>
                            <div role="button" tabindex="0" class="punch-viewer-speakernotes-page-next" style="width: 131px; border-width: 1px;"><iframe class="punch-viewer-speakernotes-page-iframe" frameborder="0" tabindex="-1" style="width: 129px; height: 73px;"></iframe>
                                <div class="punch-viewer-speakernotes-page-caption">Next</div>
                            </div>
                        </div>
                    </div>
                </td>
                <td class="punch-viewer-speakernotes-main-panel punch-viewer-speakernotes-qanda">
                    <div class="goog-tab-bar goog-tab-bar-horizontal goog-tab-bar-top" role="tablist" style="user-select: none;">
                        <div class="goog-tab" role="tab" aria-selected="false" tabindex="0" id=":2a" style="user-select: none;">Audience tools<div aria-live="polite" role="status">
                                <div class="docs-offscreen-z-index"></div>
                                <div class="punch-viewer-speaker-questions-badge" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="goog-tab goog-tab-selected" role="tab" aria-selected="true" tabindex="0" id=":2b" style="user-select: none;">Speaker notes</div>
                    </div>
                    <div class="punch-viewer-speakernotes-base" role="tabpanel">
                        <div class="punch-viewer-speakernotes-text-header-container">
                            <h3 class="punch-viewer-speakernotes-text-header">Slide 5 of 29</h3>
                            <div class="punch-viewer-speakernotes-zoom-container">
                                <div role="button" class="goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-right" tabindex="0" title="Zoom out" value="undefined" style="user-select: none;">
                                    <div class="punch-viewer-speakernotes-zoom-minus punch-viewer-speakernotes-zoom-button jfk-button-img punch-viewer-icon-large"></div>
                                </div>
                                <div role="button" class="goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left" tabindex="0" title="Zoom in" value="undefined" style="user-select: none;">
                                    <div class="punch-viewer-speakernotes-zoom-plus punch-viewer-speakernotes-zoom-button jfk-button-img punch-viewer-icon-large"></div>
                                </div>
                            </div>
                        </div>
                        <div class="punch-viewer-speakernotes-text-body-scrollable" style="left: 331.885px;">
                            <div class="punch-viewer-speakernotes-text-body">
                                <div class="punch-viewer-speakernotes-text-body-zoomable">
                                    <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Speaker notes </span><span style="font-size:10pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">[Slide 00:00:50][Chapter 00:01:00][Presentation 00:02:45]</span></p><br>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: none; left: 331.885px;" class="punch-viewer-speaker-qanda-content">
                        <div class="punch-viewer-speaker-series-intro-container punch-viewer-speaker-series-intro-onboard-step2" tabindex="-1" role="tabpanel">
                            <div class="punch-viewer-speaker-series-intro-onboard-container">
                                <div class="punch-viewer-speaker-series-intro-onboard-card punch-viewer-speaker-series-intro-onboard-card0" aria-hidden="true">
                                    <div class="punch-viewer-speaker-series-intro-image"><img alt="" src="//ssl.gstatic.com/docs/presentations/images/qanda_onboard_1_v2.png"></div>
                                    <div class="punch-viewer-speaker-series-intro-header">Audience Q&amp;A</div>
                                </div>
                                <div class="punch-viewer-speaker-series-intro-onboard-card punch-viewer-speaker-series-intro-onboard-card1" aria-hidden="true">
                                    <div class="punch-viewer-speaker-series-intro-image"><img alt="" src="//ssl.gstatic.com/docs/presentations/images/qanda_onboard_2_v2.png"></div>
                                    <div class="punch-viewer-speaker-series-intro-header">Just click to present</div>
                                </div>
                                <div class="punch-viewer-speaker-series-intro-onboard-card punch-viewer-speaker-series-intro-onboard-card2" aria-hidden="false">
                                    <div class="punch-viewer-speaker-series-intro-image"><img alt="" src="//ssl.gstatic.com/docs/presentations/images/qanda_onboard_3_v2.png"></div>
                                    <div class="punch-viewer-speaker-series-intro-header">Answer all the right questions</div>
                                </div>
                            </div>
                            <div class="punch-viewer-speaker-series-intro-buttons">
                                <div role="button" class="goog-inline-block jfk-button jfk-button-standard" aria-hidden="true" style="user-select: none; display: none;">Continue recent</div>
                                <div role="button" class="goog-inline-block jfk-button jfk-button-standard" tabindex="0" value="undefined" style="user-select: none;">Start new</div>
                            </div>
                        </div>
                        <div class="punch-viewer-speaker-series-list-container" tabindex="-1" role="tabpanel" style="display: none;">
                            <div class="punch-viewer-speaker-series-list-header">
                                <div class="punch-viewer-speaker-series-list-exit goog-flat-button goog-inline-block" aria-label="Back" role="button" tabindex="0">
                                    <div class="goog-flat-button-outer-box goog-inline-block">
                                        <div class="goog-flat-button-inner-box goog-inline-block">
                                            <div class="docs-icon goog-inline-block ">
                                                <div class="docs-icon-img-container docs-icon-img docs-icon-arrow-back-dark" aria-hidden="true">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>Choose a session
                            </div>
                            <div class="punch-viewer-speaker-series-list"></div>
                        </div>
                        <div class="punch-viewer-speaker-series-container" tabindex="-1" role="tabpanel" style="display: none;">
                            <h1 class="punch-viewer-speaker-series">
                                <div aria-live="polite" role="status">
                                    <div class="punch-viewer-speaker-series-status"></div>
                                    <div class="punch-viewer-speaker-series-domain">
                                        <div class="goog-inline-block goog-flat-menu-button jfk-select" role="listbox" aria-expanded="false" tabindex="0" aria-haspopup="false" aria-activedescendant=":38" style="user-select: none;">
                                            <div class="goog-inline-block goog-flat-menu-button-caption" id=":38" role="option" aria-selected="true">Select an audience</div>
                                            <div class="goog-inline-block goog-flat-menu-button-dropdown" aria-hidden="true">&nbsp;</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="punch-viewer-speaker-series-domain-notice">Includes whitelisted domains</div>
                                <div class="punch-viewer-speaker-series-checkbox">
                                    <div class="jfk-slideToggle goog-inline-block" role="button" aria-disabled="true" aria-pressed="false" style="user-select: none;">
                                        <div class="jfk-slideToggle-on">on</div>
                                        <div class="jfk-slideToggle-off">off</div>
                                        <div class="jfk-slideToggle-thumb"></div>
                                    </div>
                                </div>
                                <div class="punch-viewer-speaker-series-url"></div>
                            </h1>
                            <div class="punch-viewer-speaker-questions" style="display: none"></div>
                            <div class="punch-viewer-speaker-empty-questions">
                                <div class="punch-viewer-speaker-empty-questions-image"><img alt="" src="//ssl.gstatic.com/docs/presentations/images/qanda_empty_v2.png"></div>
                                <div class="punch-viewer-speaker-empty-questions-header">Questions appear here</div>
                            </div>
                            <div class="punch-viewer-speaker-questions-a11y docs-offscreen-z-index" aria-live="polite" role="status"></div>
                        </div>
                        <div class="docs-ui-toast" role="complementary" tabindex="0" aria-describedby=":27.d-u-t-c" style="display: none;">
                            <div class="docs-ui-toast-content" id=":27.d-u-t-c">New top questions</div>
                            <div class="docs-ui-toast-control-bar" id=":27.d-u-t-cb">
                                <div class="docs-ui-toast-control punch-qanda-toast-action-label" role="button" tabindex="0" id="punch-qanda-toast-show">Show</div>
                            </div>
                        </div>
                        <div class="punch-viewer-speaker-qanda-not-available" style="display: none;">
                            <div class="punch-viewer-speaker-qanda-not-available-title">You need permission</div>
                            <div class="punch-viewer-speaker-qanda-not-available-text">You can only view this presentation. To accept audience questions, ask the owner for comment or edit access.</div>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="punch-viewer-speakernotes-dragger" style="left: 326px;">
        <div class="punch-viewer-speakernotes-dragger-icon"></div>
    </div>
</div>

The missing Div at initial load is <div class="goog-menu goog-menu-vertical" role="listbox" aria-haspopup="true" style="user-select: none; visibility: visible; overflow-y: auto; height: 628px; left: 17.9861px; top: 0px; box-sizing: border-box; width: 898px; display: none;"> at the very bottom which appears under <div class="docs-loading-indicator"

I already tried to iterate over the div class, but since it's not loaded at start it won't work obviously.

//$('.jfk-select').dispatchEvent(new MouseEvent('mousedown'));
//$('.jfk-select').dispatchEvent(new MouseEvent('mousedown'));
document.querySelectorAll('.goog-menuitem-content').forEach(function(text) {
console.log(text);
console.log(text.innerHTML);
});
Twilight
  • 1,399
  • 2
  • 11
Markus
  • 458
  • 4
  • 16
  • 3
    Please update with actual HTML and code you have tried so we may better assist you here (not pictures of code) – Mark Schultheiss Jan 23 '23 at 22:45
  • Sorry Mark, done. Just not sure if my question is clear or if the HTML source helps, I was primarily asking how to check/trace back on how data gets pulled in, as I suspect it must be JS and some other source, as I couldn't find the content to be in the HTML itself, that gets loaded with clicking into the select. Secondary I want to try solutions to extract of course. Can you help @MarkSchultheiss? – Markus Jan 24 '23 at 08:30

1 Answers1

0

I used a button with a click event to add the new element here BUT you could (should?) listen for a DOM change using a mutation observer as: Determining if a HTML element has been added to the DOM dynamically ref: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

SO I added the elements on the button click then fired the method to add the event handler (probably needs YOUR setup there) in the mutation observer;

Super verbose and lots of logging but should show you how to get started here.

Note: since the new element gets hidden when added I simply logged the elements to show they are there.

const addMenuButton = document.querySelector("#add-menus");
/* Or any other selector or method to get the element; this makes assumptions here
 * I just put it after an existing element I saw; it just has to exist.
 */
//const somethingTarget = document.querySelector(".docs-loading-indicator");
//my random pick of something actual that exists: 
const somethingTarget = addMenuButton; //document.querySelector(".punch-viewer-speakernotes");

//console.log(somethingTarget);
function addNewListener() {
  // Or any other selector or method to get the element; this makes assumptions here
  const goofyTargetContainer = document.querySelector(".button-container");
  console.log(goofyTargetContainer);
  if (goofyTargetContainer) {
    const goofyTarget = goofyTargetContainer.querySelector(".goog-menu");
    console.log("Proof it is there:", goofyTarget);
    // Do something with `goofyTarget` like find the menu items and add a listener
    goofyTarget.querySelectorAll('.goog-menuitem').forEach(function(menuElement) {
      console.log(menuElement.id);
      console.log(menuElement.innerHTML);
      menuElement.addEventListener("click", function(event) {
        console.log(event.target.id);
      });
    });
  } else {
    console.log('It does not exist yet');
  }

  // Later, you can stop observing
  observer.disconnect();
}
/* just to show the delay add these are added on the button click 
 * This could also be a document change sniff or some event that indicates the elements
 * are now present. I simply use a button for this example and added a second click handler to it.
 */

addMenuButton.addEventListener("click", function(event) {
  const newContent = `<div class="goog-menu goog-menu-vertical" role="listbox" aria-haspopup="true" style="user-select: none; visibility: visible; overflow-y: auto; height: 628px; left: 17.9861px; top: 0px; box-sizing: border-box; width: 898px; display: none;">
<div class="goog-menuitem googoption" role="menuitemradio" id=":2c">Option 1</div>
<div class="goog-menuitem googoption" role="menuitemradio" id=":2d">Option 2</div>
<div class="goog-menuitem googoption" role="menuitemradio" id=":2e">Option 3</div>
<div class="goog-menuitem googoption" role="menuitemradio" id=":2g">Option 4</div>
<div class="goog-menuitem googoption" role="menuitemradio" id=":2h">Option 5</div>
</div>`;
  somethingTarget.insertAdjacentHTML("afterend", newContent);
  // call the listener
  console.log('Adding listener now');
  event.target.innerHTML = "Fired on click to add the 'menu' options";

  // options: only fires one time and is dispatched before any other and will never call preventDefault()
}, {
  once: true,
  capture: true,
  passive: true
});

// Select the node that will be observed for mutations
const targetNode = document.getElementById('button-container-id');

// Options for the observer (which mutations to observe)
const config = {
  attributes: true,
  childList: true,
  subtree: true
};

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  console.log('mutation observed');
  for (const mutation of mutationList) {
    console.log("Mutation:", mutation.type);
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
      addNewListener();
    } else if (mutation.type === 'attributes') {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);
.button-container {
  padding: 1rem;
  border: solid 1px green;
}
<div id="button-container-id" class="button-container"><button type="button" id="add-menus">Just to show delay. Click to add menus for test</button></div>
<div id="punch-viewer-speakernotes">
  <table class="punch-viewer-speakernotes punch-viewer-client-rendered-notes">
    <tbody>
      <tr>
        <td class="punch-viewer-speakernotes-side-panel" style="width: 331px;">
          <div class="punch-viewer-speakernotes-timer-panel">
            <div class="punch-viewer-speakernotes-timer-main-container">
              <div class="punch-viewer-speakernotes-timer-time-container" style="">
                <div class="punch-viewer-speakernotes-timer-time">00:00:25</div>
              </div>
              <div class="punch-viewer-speakernotes-timer-button-container">
                <div role="button" class="jfk-button jfk-button-standard punch-viewer-speakernotes-timer-button" tabindex="0" title="Pause timer" value="undefined" style="user-select: none; width: 54px;"><span class="jfk-button-label">Pause</span></div>
                <div role="button" class="jfk-button jfk-button-standard punch-viewer-speakernotes-timer-button" tabindex="0" title="Reset timer (R)" value="undefined" style="user-select: none; width: 54px;"><span class="jfk-button-label">Reset</span></div>
              </div>
            </div>
          </div>
          <div class="punch-viewer-speakernotes-page-control-panel">
            <div class="punch-viewer-speakernotes-page-control">
              <div class="goog-inline-block goog-flat-menu-button jfk-select" role="listbox" aria-expanded="false" tabindex="0" aria-haspopup="true" aria-activedescendant=":39" style="user-select: none;">
                <div class="goog-inline-block goog-flat-menu-button-caption" id=":39" role="option" aria-selected="true" aria-setsize="29" aria-posinset="5">Slide 5 </div>
                <div class="goog-inline-block goog-flat-menu-button-dropdown" aria-hidden="true">&nbsp;</div>
              </div>
              <div class="punch-viewer-speakernotes-page-container" style="width: 291px; height: 164px;">
                <div class="punch-viewer-speakernotes-page" style="width: 291px; height: 164px;">
                  <div class="punch-viewer-loadstatus" style="display: none;">
                    <div class="punch-viewer-center punch-viewer-center-browser-modern punch-viewer-center-boxtype-all">
                      <div class="punch-viewer-center-content-container"><span class="punch-viewer-center-centering"></span>
                        <div class="punch-viewer-loadstatus-content goog-inline-block punch-viewer-center-content">
                          <div class="" style="display: none;"></div>
                          <div class="" style="display: none;"></div>
                          <div class="" style="display: none;"></div>
                          <div><span tabindex="0" class="punch-viewer-loadstatus-link" style="display: none;"></span><span tabindex="0" class="punch-viewer-loadstatus-link" style="display: none;"></span></div>
                        </div>
                      </div>
                    </div>
                  </div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" fill-rule="evenodd" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" overflow="hidden" preserveAspectRatio="none"
                    width="100%" height="100%" viewBox="0 0 365760 205740" style="line-height: normal; width: 291px; height: 164px;">
                                        <rect fill="#ffffff" fill-opacity="0" width="100%" height="100%"></rect>
                                        <g transform="translate(0 0) scale(1)">
                                            <defs cursor="default"></defs>
                                            <g>
                                                <path fill="#fff" fill-opacity="1" d="M 0 0 L 365760 0 365760 205740 0 205740 Z"></path>
                                                <g id="g1e02d4ec510_1_0-bg">
                                                    <g>
                                                        <g>
                                                            <path fill="#FF9900" fill-opacity="1" d="M 0 0 L 365760 0 365760 205740 0 205740 Z"></path>
                                                        </g>
                                                    </g>
                                                </g>
                                                <g id="g1e02d4ec510_1_1">
                                                    <g>
                                                        <g>
                                                            <path d="M 2041 0 L 367801 0 367801 205740 2041 205740 Z"></path>
                                                        </g>
                                                        <g>
                                                            <g direction="ltr">
                                                                <g transform="matrix(380.99999999999994,0,0,380.99999999999994,5698,75438)">
                                                                    <g pointer-events="none">
                                                                        <g id="g1e02d4ec510_1_1-paragraph-0">
                                                                            <g>
                                                                                <g class="sketchy-text-background" visibility="visible"></g>
                                                                                <g></g>
                                                                                <g class="sketchy-text-content" visibility="visible">
                                                                                    <g class="sketchy-text-content-text" transform="translate(0 115.19999999999999)"><text style="font-family:Arial;font-size:120px;fill:#595959;white-space:pre;" text-rendering="geometricPrecision" x="437.02657480314963">4</text></g>
                                                                                </g>
                                                                            </g>
                                                                        </g>
                                                                    </g>
                                                                </g>
                                                            </g>
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </g>
                                    </svg>
                </div>
              </div>
              <div role="button" tabindex="0" class="punch-viewer-speakernotes-page-previous" style="width: 131px; border-width: 1px;"><iframe class="punch-viewer-speakernotes-page-iframe" frameborder="0" tabindex="-1" style="width: 129px; height: 73px;"></iframe>
                <div class="punch-viewer-speakernotes-page-caption">Previous</div>
              </div>
              <div role="button" tabindex="0" class="punch-viewer-speakernotes-page-next" style="width: 131px; border-width: 1px;"><iframe class="punch-viewer-speakernotes-page-iframe" frameborder="0" tabindex="-1" style="width: 129px; height: 73px;"></iframe>
                <div class="punch-viewer-speakernotes-page-caption">Next</div>
              </div>
            </div>
          </div>
        </td>
        <td class="punch-viewer-speakernotes-main-panel punch-viewer-speakernotes-qanda">
          <div class="goog-tab-bar goog-tab-bar-horizontal goog-tab-bar-top" role="tablist" style="user-select: none;">
            <div class="goog-tab" role="tab" aria-selected="false" tabindex="0" id=":2a" style="user-select: none;">Audience tools
              <div aria-live="polite" role="status">
                <div class="docs-offscreen-z-index"></div>
                <div class="punch-viewer-speaker-questions-badge" style="display: none;"></div>
              </div>
            </div>
            <div class="goog-tab goog-tab-selected" role="tab" aria-selected="true" tabindex="0" id=":2b" style="user-select: none;">Speaker notes</div>
          </div>
          <div class="punch-viewer-speakernotes-base" role="tabpanel">
            <div class="punch-viewer-speakernotes-text-header-container">
              <h3 class="punch-viewer-speakernotes-text-header">Slide 5 of 29</h3>
              <div class="punch-viewer-speakernotes-zoom-container">
                <div role="button" class="goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-right" tabindex="0" title="Zoom out" value="undefined" style="user-select: none;">
                  <div class="punch-viewer-speakernotes-zoom-minus punch-viewer-speakernotes-zoom-button jfk-button-img punch-viewer-icon-large"></div>
                </div>
                <div role="button" class="goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left" tabindex="0" title="Zoom in" value="undefined" style="user-select: none;">
                  <div class="punch-viewer-speakernotes-zoom-plus punch-viewer-speakernotes-zoom-button jfk-button-img punch-viewer-icon-large"></div>
                </div>
              </div>
            </div>
            <div class="punch-viewer-speakernotes-text-body-scrollable" style="left: 331.885px;">
              <div class="punch-viewer-speakernotes-text-body">
                <div class="punch-viewer-speakernotes-text-body-zoomable">
                  <p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Speaker notes </span>
                    <span style="font-size:10pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">[Slide 00:00:50][Chapter 00:01:00][Presentation 00:02:45]</span>
                  </p><br>
                </div>
              </div>
            </div>
          </div>
          <div style="display: none; left: 331.885px;" class="punch-viewer-speaker-qanda-content">
            <div class="punch-viewer-speaker-series-intro-container punch-viewer-speaker-series-intro-onboard-step2" tabindex="-1" role="tabpanel">
              <div class="punch-viewer-speaker-series-intro-onboard-container">
                <div class="punch-viewer-speaker-series-intro-onboard-card punch-viewer-speaker-series-intro-onboard-card0" aria-hidden="true">
                  <div class="punch-viewer-speaker-series-intro-image"><img alt="" src="//ssl.gstatic.com/docs/presentations/images/qanda_onboard_1_v2.png"></div>
                  <div class="punch-viewer-speaker-series-intro-header">Audience Q&amp;A</div>
                </div>
                <div class="punch-viewer-speaker-series-intro-onboard-card punch-viewer-speaker-series-intro-onboard-card1" aria-hidden="true">
                  <div class="punch-viewer-speaker-series-intro-image"><img alt="" src="//ssl.gstatic.com/docs/presentations/images/qanda_onboard_2_v2.png"></div>
                  <div class="punch-viewer-speaker-series-intro-header">Just click to present</div>
                </div>
                <div class="punch-viewer-speaker-series-intro-onboard-card punch-viewer-speaker-series-intro-onboard-card2" aria-hidden="false">
                  <div class="punch-viewer-speaker-series-intro-image"><img alt="" src="//ssl.gstatic.com/docs/presentations/images/qanda_onboard_3_v2.png"></div>
                  <div class="punch-viewer-speaker-series-intro-header">Answer all the right questions</div>
                </div>
              </div>
              <div class="punch-viewer-speaker-series-intro-buttons">
                <div role="button" class="goog-inline-block jfk-button jfk-button-standard" aria-hidden="true" style="user-select: none; display: none;">Continue recent</div>
                <div role="button" class="goog-inline-block jfk-button jfk-button-standard" tabindex="0" value="undefined" style="user-select: none;">Start new</div>
              </div>
            </div>
            <div class="punch-viewer-speaker-series-list-container" tabindex="-1" role="tabpanel" style="display: none;">
              <div class="punch-viewer-speaker-series-list-header">
                <div class="punch-viewer-speaker-series-list-exit goog-flat-button goog-inline-block" aria-label="Back" role="button" tabindex="0">
                  <div class="goog-flat-button-outer-box goog-inline-block">
                    <div class="goog-flat-button-inner-box goog-inline-block">
                      <div class="docs-icon goog-inline-block ">
                        <div class="docs-icon-img-container docs-icon-img docs-icon-arrow-back-dark" aria-hidden="true">&nbsp;</div>
                      </div>
                    </div>
                  </div>
                </div>Choose a session
              </div>
              <div class="punch-viewer-speaker-series-list"></div>
            </div>
            <div class="punch-viewer-speaker-series-container" tabindex="-1" role="tabpanel" style="display: none;">
              <h1 class="punch-viewer-speaker-series">
                <div aria-live="polite" role="status">
                  <div class="punch-viewer-speaker-series-status"></div>
                  <div class="punch-viewer-speaker-series-domain">
                    <div class="goog-inline-block goog-flat-menu-button jfk-select" role="listbox" aria-expanded="false" tabindex="0" aria-haspopup="false" aria-activedescendant=":38" style="user-select: none;">
                      <div class="goog-inline-block goog-flat-menu-button-caption" id=":38" role="option" aria-selected="true">Select an audience</div>
                      <div class="goog-inline-block goog-flat-menu-button-dropdown" aria-hidden="true">&nbsp;</div>
                    </div>
                  </div>
                </div>
                <div class="punch-viewer-speaker-series-domain-notice">Includes whitelisted domains</div>
                <div class="punch-viewer-speaker-series-checkbox">
                  <div class="jfk-slideToggle goog-inline-block" role="button" aria-disabled="true" aria-pressed="false" style="user-select: none;">
                    <div class="jfk-slideToggle-on">on</div>
                    <div class="jfk-slideToggle-off">off</div>
                    <div class="jfk-slideToggle-thumb"></div>
                  </div>
                </div>
                <div class="punch-viewer-speaker-series-url"></div>
              </h1>
              <div class="punch-viewer-speaker-questions" style="display: none"></div>
              <div class="punch-viewer-speaker-empty-questions">
                <div class="punch-viewer-speaker-empty-questions-image"><img alt="" src="//ssl.gstatic.com/docs/presentations/images/qanda_empty_v2.png"></div>
                <div class="punch-viewer-speaker-empty-questions-header">Questions appear here</div>
              </div>
              <div class="punch-viewer-speaker-questions-a11y docs-offscreen-z-index" aria-live="polite" role="status"></div>
            </div>
            <div class="docs-ui-toast" role="complementary" tabindex="0" aria-describedby=":27.d-u-t-c" style="display: none;">
              <div class="docs-ui-toast-content" id=":27.d-u-t-c">New top questions</div>
              <div class="docs-ui-toast-control-bar" id=":27.d-u-t-cb">
                <div class="docs-ui-toast-control punch-qanda-toast-action-label" role="button" tabindex="0" id="punch-qanda-toast-show">Show</div>
              </div>
            </div>
            <div class="punch-viewer-speaker-qanda-not-available" style="display: none;">
              <div class="punch-viewer-speaker-qanda-not-available-title">You need permission</div>
              <div class="punch-viewer-speaker-qanda-not-available-text">You can only view this presentation. To accept audience questions, ask the owner for comment or edit access.</div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="punch-viewer-speakernotes-dragger" style="left: 326px;">
    <div class="punch-viewer-speakernotes-dragger-icon"></div>
  </div>
</div>
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
  • Thanks Mark for the hard work, just trying to understand are you creating the div manually here to be added as opposed to retrieving the content that dynamically gets populated? – Markus Jan 24 '23 at 19:53
  • in your example the button creates the content for div, but my goal is to retrieve that content that gets populated only when one clicks into the select dropdown. The only way I achieved this was with a mousedown event, but I was wondering if I can access that data somehow else and how to find that out (where it comes from). – Markus Jan 24 '23 at 20:00
  • The button just does the insert; don't get confused by how using that I force the mutation observer to fire. I guess now I am confused since I thought the populating of the select dropdown was the dynamic part here based on the original question. Either way just tie whatever is being mutated to that event handler thus the solution remains the same except for that detail. – Mark Schultheiss Jan 24 '23 at 22:53
  • yes the select dropdown is the dynamic part but my questions was not how to trigger loading it but rather how to access the data itself from where it would pull it from to populate the select, so that I wouldn't have to trigger loading it and could go straight to the data (without that div being built/loaded), if that makes sense? – Markus Jan 25 '23 at 14:29