InboxSDK issue -- .inboxsdk__compose_size_fixer

[Simplify]

Not sure where to post this but I'm having an issue with Inbox SDK extensions. 

Context: I'm the owner of Simplify Gmail. I do not use Inbox SDK but I try to not mess up other Gmail extensions as best I can. 

Issue: Inbox SDK adds a style sheet on starting a new message that causes the compose buttons to move when focusing the To field if there is a From field.

<style type="text/css" class="inboxsdk__compose_size_fixer">

#x0\.31291237077310985x1615916905886 #\:133 {
    height: 416px !important;
    min-height: 416px !important;
    max-height: 621px !important;
}
</style>

With Simplify Gmail, it hides the compose buttons entirely. This is because Simplify changes the initial height of the compose mole to be shorter (and reduce overlap with content). 

I don't see any value to the above style. If I delete it and disable Simplify, the Inbox SDK compose action buttons work fine. Any chance it was helpful at one time but no longer serves any use? If so, can it be removed so I don't have to detect and delete it every time someone starts a new message?

Let me know if I should have posted this issue elsewhere.

Thanks,

Michael

[Simplify]

And if you don't want to drop this for some reason, could you at least use something less specific so it is more easily over-ridden?

Something like .inboxsdk__compose.inboxsdk__size_fixer .GP instead of the IDs.

[Simplify]

Actually, the real problem is this CSS:

/* aDi is initially position: fixed, which messes things up, so we make static */

.inboxsdk__size_fixer .aDj.aDi {

  position: static !important;

}

This makes some sense in the inline reply compose. I've seen it mess things up as well and do this in the full-screen composer. But I don't think it makes sense in the compose mole.

[Simplify]

Ok... one more reply (hopefully the last). 

• I spoke too soon -- both things are the problem. 
• Changing to position:static AND setting the height and min-height of the composer to absolute values together cause issues. 
• Assuming the composer is a certain height seems like a bad idea in general. You could detect the height... or just not set the height (I don't see the purpose of setting the height). 
• And doing that with IDs means I can't easily override this. 

[Chris Cowan]

I can't immediately remember exactly what case the InboxSDK's compose-size-fixer code was intended to address; you might be right in your guess that it was something that was only necessary in the past or in some specific scenarios. Usually we try to avoid any invasive CSS changes except when it's necessary for an InboxSDK feature actively used by an extension, but our compose-size-fixer code appears to be aggressively modifying all ComposeViews when the InboxSDK is loaded.

Possibly as a temporary measure until we more fully investigate this, we've updated the InboxSDK so any extension can globally disable the InboxSDK's compose-size-fixer code by adding the "inboxsdk_hack_disableComposeSizeFixer" classname to the document body (`document.body.classList.add('inboxsdk_hack_disableComposeSizeFixer');`). Adding that to your extension should cause the same behavior as removing the position:static and height/min/max-height rules that you pointed out as problematic.

We will investigate our compose-size-fixer code to see if we can make it less aggressive in overriding CSS and restructure it to make it more compatible with extensions such as yours. Can you describe what CSS changes your extension does to shrink the compose?

[Simplify]

Thanks Chris! 

The inboxsdk_hack_disableComposeSizeFixer gives me what I need. I'll set a reminder to check in a few months if Inbox SDK still adds the original sizeFixer.

The three relevant things that Simplify does in this area:

• Change the starting height of compose moles, full-screen compose, and mailto composers (the standalone window you get from clicking on a mailto link on the web with Gmail as your default email app)
• Detect when the composer has a From field to adjust the vertical position of the send bar (negative margin top) when the To field is focused. I add .hasFromField to .aoC when this happens.
• Changes a pinned send bar (.aDj.aDi) to position:sticky in some cases instead of position:fixed. In one other case (Simplify's dark mode) I set it back to position:fixed and set the bottom and left. This pinning is done so the send bar does not go off the screen for long messages / replies. You don't want to switch to position:static.

Actual CSS:

Compose moles (only applied when window height is > 500px):

@media screen and (min-height: 500px) {
  html.simplify .dw .no .GP {
    min-height: 250px !important;
    height: auto !important;
  }
  html.simplify .dw .no .GP div[contenteditable]:not(.gmail_chip):not(.gmail_drive_chip) {
    min-height: 200px !important;
  }
}

Full screen composer:

html.simplify .aSs .aSt .GP {
  min-height: min(40vh, 400px) !important;
  height: auto !important;
}
html.simplify .aSs .aSt .GP div[contenteditable]:not(.gmail_chip):not(.gmail_drive_chip) {
  min-height: min(40vh - 50px, 350px) !important;
}
html.simplify .aSs .aSt .aDj.aDi {
  position: sticky;
}
html.simplify .aSs .aSt .aoC.hasFromField .aDj.aDi {
  margin-top: -14px;
}

Mailto composer:

html.simplify.mailto .xr .nH[style*='height'],
html.simplify.mailto .xr .aCk,
html.simplify.mailto .xr .aoI {
  height: auto;
  max-height: 90vh;
}

html.simplify.mailto .xr .GP {
  min-height: 400px !important;
  height: auto !important;
}

html.simplify.mailto .xr .GP div[contenteditable]:not(.gmail_chip):not(.gmail_drive_chip) {
  min-height: 350px !important;
}

html.simplify.mailto .xr .aDj.aDi {
  position: sticky;
}

html.simplify.mailto .xr .aoC.hasFromField .aDj.aDi {
  margin-top: -29px;
}

Bonus: correct positioning of pinned send bar when inverting UI for dark mode:

html.simplify.darkTheme.invertCompose .dw .no .nH.Hd[role='dialog'] .aDj.aDi,
html.simplify.darkTheme.invertCompose .aSt .nH.Hd[role='dialog'] .aDj.aDi {
  position: fixed;
  bottom: 0px !important;
  left: 16px !important;
}

--
You received this message because you are subscribed to a topic in the Google Groups "InboxSDK" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/inboxsdk/fD8KERkPhpM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to inboxsdk+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/dfcacd59-7022-4e0b-ab23-93da6ec2d0can%40googlegroups.com.