Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-66226

Show plain text in Messages summary pane

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Create a new site (we need it fresh to guarantee the user's personal messaging space is in the vanilla state)
      2. Log in as the admin
      3. Enable the 'trusttext' admin setting
      4. Enable the 'messagingallusers' admin setting (site wide messaging)
      5. Enrol 7 students in a course.
      6. Now, via the messaging pane, search for each student and send the following messages, one to each student (just copy and paste the HTML into the 'write a message' text entry field):
        • Image:

          <img src="https://image.shutterstock.com/image-vector/black-cat-silhouette-elegant-sitting-260nw-735404302.jpg" alt="small cat icon">

        • Video:

          <video src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm" controls>
                <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
              </video>

        • Audio:

          <audio controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"><p>Your browser doesn't support HTML5 aduio. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </audio>

        • Iframe content (Fallback case):

          <iframe id="inlineFrameExample" title="Inline Frame Example" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik" width="300" height="200"></iframe>

        • Other media (fallback case):

          <embed src="https://html.com/wp-content/uploads/flamingo.jpg></embed>

        • Texty 1:

          This is just a normal message

        • Texty 2 (formatted)

          <span style="font-weight:bold">This message is bold</span>

      7. Now, open dev tools in your browser and reload the page.
      8. Open the messaging pane, and expand the private conversations tab (if not already done)
      9. Verify the following:
        • All conversations are present in the section and no errors appear in the dev tools console.
        • You see one conversation with a "<ICON> Image" description
        • You see one conversation with a "<ICON> Video" description
        • You see one conversation with a "<ICON> Audio" description
        • You see two conversations with a "<ICON> Other media" description
        • You see one conversation with "This is just a normal message" description
        • You see one conversation with "This message is bold" description, but the message is NOT bold.
      10. Click on each of the two conversations described as having 'other media'.
      11. Verify:
        • One is the iframe containing a map
        • One is a picture of a flamingo (it used the embed tag, so wasn't detected as an image - this is expected).
      12. Now expand the Starred section
      13. Verify:
        • The personal space (conversation with yourself) is present and that no js errors appear in the console.
        • There is no description present in the personal space conversation (there is no message there yet).
      14. Now, via site admin, disable the 'trusttext' setting and save.
      15. Open messaging
      16. Expand the private messages section and Verify the same results as above - i.e. all descriptions and icons are the same and no js console errors.
      17. Click on each of the two conversations described as having 'other media'.
      18. Verify:
        • Both contain an empty message box.
      19. Now, in your editor, open the theme/boost/config.php file.
      20. Comment out the last line, making it:

        //$THEME->iconsystem = \core\output\icon_system::FONTAWESOME;

      21. Purge caches
      22. Reload the page
      23. Open messaging and view the private conversations section.
      24. Verify you see the fallback icons for all 4 of the content types -image, video, audio, and other media.
      Show
      Create a new site (we need it fresh to guarantee the user's personal messaging space is in the vanilla state) Log in as the admin Enable the 'trusttext' admin setting Enable the 'messagingallusers' admin setting (site wide messaging) Enrol 7 students in a course. Now, via the messaging pane, search for each student and send the following messages, one to each student (just copy and paste the HTML into the 'write a message' text entry field): Image: <img src="https://image.shutterstock.com/image-vector/black-cat-silhouette-elegant-sitting-260nw-735404302.jpg" alt="small cat icon"> Video: <video src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.webm" controls> <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> Audio: <audio controls src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3"><p>Your browser doesn't support HTML5 aduio. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </audio> Iframe content (Fallback case): <iframe id="inlineFrameExample" title="Inline Frame Example" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik" width="300" height="200"></iframe> Other media (fallback case): <embed src="https://html.com/wp-content/uploads/flamingo.jpg></embed> Texty 1: This is just a normal message Texty 2 (formatted) <span style="font-weight:bold">This message is bold</span> Now, open dev tools in your browser and reload the page. Open the messaging pane, and expand the private conversations tab (if not already done) Verify the following : All conversations are present in the section and no errors appear in the dev tools console. You see one conversation with a "<ICON> Image" description You see one conversation with a "<ICON> Video" description You see one conversation with a "<ICON> Audio" description You see two conversations with a "<ICON> Other media" description You see one conversation with "This is just a normal message" description You see one conversation with "This message is bold" description, but the message is NOT bold. Click on each of the two conversations described as having 'other media'. Verify : One is the iframe containing a map One is a picture of a flamingo (it used the embed tag, so wasn't detected as an image - this is expected). Now expand the Starred section Verify : The personal space (conversation with yourself) is present and that no js errors appear in the console. There is no description present in the personal space conversation (there is no message there yet). Now, via site admin, disable the 'trusttext' setting and save. Open messaging Expand the private messages section and Verify the same results as above - i.e. all descriptions and icons are the same and no js console errors. Click on each of the two conversations described as having 'other media'. Verify : Both contain an empty message box. Now, in your editor, open the theme/boost/config.php file. Comment out the last line, making it: //$THEME->iconsystem = \core\output\icon_system::FONTAWESOME; Purge caches Reload the page Open messaging and view the private conversations section. Verify you see the fallback icons for all 4 of the content types -image, video, audio, and other media.
    • Affected Branches:
      MOODLE_37_STABLE
    • Fixed Branches:
      MOODLE_38_STABLE
    • Pull from Repository:
    • Pull Master Branch:
      MDL-66226-master-2
    • Story Points:
      1
    • Sprint:
      Sprint 7 - Race to the freeze

      Description

      From discussion with Michael Hawkins:

      I think the reason is that you wouldn't want things like <h1> showing massive text within the summary pane, though maybe it needs to just strip any HTML and show plaintext (maybe with the exception of an emote showing the actual icon)

      See following example:

       
      Should be able to do this here:
      https://github.com/moodle/moodle/blob/master/message/amd/src/message_drawer_view_overview_section.js#L601

      Acceptance Criteria:

      • Display either the text value, alt tag, title, element type (in that order of priority), falling back to a generic message ("Media content") if we can't match the above.

        Attachments

        1. HTML entities.png
          HTML entities.png
          38 kB
        2. messaging-media-content-descriptions.png
          messaging-media-content-descriptions.png
          91 kB
        3. Screenshot_1.png
          Screenshot_1.png
          445 kB
        4. Screenshot_2.png
          Screenshot_2.png
          57 kB
        5. Screenshot_3.png
          Screenshot_3.png
          236 kB

          Issue Links

            Activity

              People

              Assignee:
              jaked Jake Dallimore
              Reporter:
              pholden Paul Holden
              Peer reviewer:
              Ryan Wyllie
              Integrator:
              Jun Pataleta
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Sara Arjona (@sarjona), Víctor Déniz Falcón
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                18/Nov/19

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 days, 3 hours
                  2d 3h