Chrome custom element attribute inheritance has stale cache after element recreates inner DOM and calls initializeAttributeInheritance again (was: "Recommended by Pocket" label and icon are missing, in Firefox Home Content section of Preferences)

RESOLVED FIXED in Firefox 68

Status

()

defect
P1
normal
RESOLVED FIXED
3 months ago
20 days ago

People

(Reporter: dholbert, Assigned: bgrins)

Tracking

(Regression)

unspecified
Firefox 68
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox68 fixed)

Details

Attachments

(4 attachments)

STR:

  1. visit about:preferences#home
  2. Look at the third checkbox under "Firefox Home Content"

ACTUAL RESULTS:
Checkboxes 1, 2, and 4 have an icon and a descriptive title.
Checkbox 3 does not. It looks like this:

[ ] -- How it works
Content discovery in Firefox allows you to discover [...]

EXPECTED RESULTS:
There should be a pocket icon and a label like "Recommended by Pocket".

For the other checkboxes here, it looks like the image and the visual label is rendered in DOM like the following (copied from the "Top Sites" section):

<hbox class="checkbox-label-box" flex="1">
  <image class="checkbox-icon"
         src="resource://activity-stream/data/content/assets/glyph-topsites-16.svg"/>
  <label class="checkbox-label" flex="1">Top Sites</label>
</hbox>

However, for the pocket section, this chunk is left with no user-visible content, and looks like this:

<hbox class="checkbox-label-box" flex="1">
  <image class="checkbox-icon"/>
  <label class="checkbox-label" flex="1"/>
</hbox>

I'm using Nightly 68.0a1 (2019-04-20) (64-bit)

Note: we do have this in the DOM, as the parent of the bogus empty hbox that I quoted in comment 0:

<checkbox class="section-checkbox tail-with-learn-more"
          label="Recommended by Pocket"
          src="resource://activity-stream/data/content/assets/glyph-pocket-16.svg"
          preference="browser.newtabpage.activity-stream.feeds.section.topstories" checked="true">

The src and label attributes here have the content that we're intending to be user-visible. But apparently those attributes are just metadata and aren't rendered as part of this <checkbox> element -- as with the other sections, this data has to be duplicated in the <image> and <label> elements in order for it to actually show up visibly.

I can't immediately tell when this broken UI was introduced, because mozregression is being un-helpful (it configures its Firefox instances to have some chunk of about:preferences be inactive/locked-down, for some reason).

But I'm guessing this is from bug 1521084 or possibly a later incarnation of that bug.

Mardak or k88hudson, maybe you could take a look?

Blocks: 1523703
Component: Preferences → Activity Streams: Newtab
Flags: needinfo?(edilee)
Summary: "Recommended by Pocket" label is missing, in Firefox Home Content section of Preferences → "Recommended by Pocket" label and icon are missing, in Firefox Home Content section of Preferences
Attachment #9059730 - Attachment description: screenshot → screenshot showing the missing icon & label
Flags: needinfo?(edilee) → needinfo?(bgrinstead)
Regressed by: 1528268

Looks like it's related to how we add the "How it works" link/child to the checkbox:

https://searchfox.org/mozilla-central/rev/d80f0a570736dce76a2eb184fb65517462089e8a/browser/components/newtab/lib/AboutPreferences.jsm#232-243

If I take out that if block, it correctly renders the checkbox with icon and label.

Otherwise we can end up setting the proper attribute on removed children when elements get disconnected
and reconnected.

See Also: 1546036
Duplicate of this bug: 1546036

Thanks for filing, I have a fix + test up for review now.

Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Flags: needinfo?(bgrinstead)
Duplicate of this bug: 1546060
Pushed by bgrinstead@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/4bc97c0629fa
Clear the _inheritedElements cache on chrome custom elements when re-calling initializeAttributeInheritance r=surkov
Summary: "Recommended by Pocket" label and icon are missing, in Firefox Home Content section of Preferences → Chrome custom element attribute inheritance has stale cache after element recreates inner DOM and calls initializeAttributeInheritance again (was: "Recommended by Pocket" label and icon are missing, in Firefox Home Content section of Preferences)
Iteration: --- → 68.3 - Apr 15 - 28
Priority: -- → P1
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Component: Activity Streams: Newtab → New Tab Page
You need to log in before you can comment on or make changes to this bug.