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

Show plain text in Messages summary pane

XMLWordPrintable

    • MOODLE_37_STABLE
    • MOODLE_38_STABLE
    • MDL-66226-master-2
    • 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.
    • 1
    • Sprint 7 - Race to the freeze

      From discussion with michaelh:

      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.

        1. HTML entities.png
          38 kB
          Paul Holden
        2. messaging-media-content-descriptions.png
          91 kB
          Jake Dallimore
        3. Screenshot_1.png
          445 kB
          Janelle Barcega
        4. Screenshot_2.png
          57 kB
          Janelle Barcega
        5. Screenshot_3.png
          236 kB
          Janelle Barcega

            jaked Jake Dallimore
            pholden Paul Holden
            Ryan Wyllie Ryan Wyllie
            Jun Pataleta Jun Pataleta
            Janelle Barcega Janelle Barcega
            Votes:
            0 Vote for this issue
            Watchers:
            8 Start watching this issue

              Created:
              Updated:
              Resolved:

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

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.