Enabling mobile for whole page

Community Show & Tell
, ,
1

Hey everyone,

I've been working on a fun little side project that I reckon could be a real time-saver for us all. It's a JavaScript script that I cooked up to automatically enable mobile view for all components on any Retool page.

You can F12 and paste this script in the console, and then just call enableAll() or disableAll() when you're in desktop view.

I've found it super handy in my own workflow and thought it'd be cool to share it with the community. So, check it out! And if you've got any questions or feedback, just give me a shout.

Cheers,
Guy

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function getComponentsMenu() {
  return document.querySelector('div[data-testid="Explorer::ComponentTree"]');
}

function getComponentListItems() {
  const menu = getComponentsMenu();
  return menu.querySelectorAll("li");
}

async function enableMobile(header) {
  console.log(`Enabling mobile for ${header.textContent}`);
  header.children[0].click();
  await sleep(500);
  appearanceIcon = document.getElementById(
    `EditorFormSectionV2::${header.textContent.trim()}::Appearance::AdvancedButton`
  );
  if (!appearanceIcon) {
    console.log(`No appearance icon for ${header.textContent}`);
    return;
  }
  appearanceIcon.scrollIntoViewIfNeeded();
  appearanceIcon.click();
  await sleep(500);
  showOnMobileInput = document.getElementById("EditorForm::ShowOnMobileToggle");
  if (showOnMobileInput.checked) {
    console.log(`Mobile already enabled for ${header.textContent}`);
    return;
  }
  showOnMobileInput.click();
}

async function disableMobile(header) {
  console.log(`Disabling mobile for ${header.textContent}`);
  header.children[0].click();
  await sleep(500);
  appearanceIcon = document.getElementById(
    `EditorFormSectionV2::${header.textContent.trim()}::Appearance::AdvancedButton`
  );
  if (!appearanceIcon) {
    console.log(`No appearance icon for ${header.textContent}`);
    return;
  }
  appearanceIcon.scrollIntoViewIfNeeded();
  appearanceIcon.click();
  await sleep(500);
  showOnMobileInput = document.getElementById("EditorForm::ShowOnMobileToggle");
  if (!showOnMobileInput.checked) {
    console.log(`Mobile already disabled for ${header.textContent}`);
    return;
  }
  showOnMobileInput.click();
}

async function disableAll() {
  for (const x of getComponentListItems()) {
    await disableMobile(x);
    await sleep(500);
  }
}

async function enableAll() {
  for (const x of getComponentListItems()) {
    await enableMobile(x);
    await sleep(500);
  }
}
3 Likes
2

@GuyFrimerman ,

I wonder if you realize just how big the potential of this post is. This is a seminal piece of work! You shown us that we can manipulate the IDE directly through the DOM.

What I envision from this is a Chrome Extension with a bunch of tools on it to do bulk actions like:

  • Toggle Mobile (as your example does)
  • Change label width (
  • Renaming of components
  • Setting Query properties, e.g. Turning off show notification on Success
  • Changing style parameters, e.g. changing all buttons border radius
  • Change alignment
  • Really edit any component property.

To select the components to modify you could probably test if the component is selected in the Component List which would allow you to select multiple components to affect. You could select All buttons or all Text components, you could select by name using a wildcard.

This would need to be an active development project as parts of it may break from release to release.

1 Like