Closed Bug 1553406 Opened 6 years ago Closed 3 years ago

When I use responsive design regime and want to view source - Ctrl+U - I will see source code of desktop version

Categories

(DevTools :: Responsive Design Mode, defect, P3)

Product:
DevTools
Component:
Responsive Design Mode
Version:
67 Branch
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED WONTFIX

People

(Reporter: standa.david, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

I pressed F12 to developer tools, then enabled Responsive regime - in my case iphone 6/7/8 and then pressed Ctrl+U

Actual results:

Source code of desktop version

Expected results:

Source code of mobile version

Hi David,

Could you please provide the site you are experiencing this issue with?

Flags: needinfo?(standa.david)

https://www.journal-theme.com/1/

body has classes which are different for mobile and desktop version

Flags: needinfo?(standa.david)
Component: Untriaged → Responsive Design Mode
Product: Firefox → DevTools

Would you please provide a reduced testcase with clear expected results? It's difficult to know what the source is supposed to look like with your example provided in comment 2.

Flags: needinfo?(standa.david)
Priority: -- → P3

This sounds like a User Agent string detection issue. We can try to build our own test case based on that assumption.

I'm able to reproduce this bug.

STR:

  1. visit https://www.journal-theme.com/1/
  2. press ctrl+u/cmd+u to view the source => html element has desktop specific classes, like .desktop
  3. go back to the page
  4. enter RDM, select a touch device (and to be safe, reload the page)
  5. press ctrl+u/cmd+u again

AR:

  • view source shows desktop source again

ER:

  • view source should show mobile source, similar to what the markup view in the inspector does. When you observe the classes on the html element, you should see for example .phone and .touchevents
Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: [parity-chrome]

You are setting the class ".mobile" viaJavascript.
"View source" never shows Javascript code changes, except when using "View Selection source" in the context menu

Flags: needinfo?(standa.david)

I just tested the steps from comment 5 in Firefox 103.0.2 and cannot reproduce this issue. I.e. I saw the mobile version of the page and the <html> element also had mobile, phone and touchevents as classes when I selected "iPhone 12/13 Pro Max" as device.

David, can you confirm that this is now working as expected?

Sebastian

Flags: needinfo?(standa.david)
Keywords: parity-chrome
Whiteboard: [parity-chrome]

Redirect a needinfo that is pending on an inactive user to the triage owner.
:nchevobbe, since the bug has recent activity, could you have a look please?

For more information, please visit auto_nag documentation.

Flags: needinfo?(standa.david) → needinfo?(nchevobbe)

This is not related to RDM: the on https://www.journal-theme.com/1/ , the desktop class is part of the source. Resizing the main Firefox window (or turning RDM), might remove it as there's a MediaQueryList listener. The latter change is reflected in DevTools inspector , but not in the view-source code, which simply displays the document as its sent through the network

I also just checked Chrome, and it has a similar behavior (I wasn't able to test while RDM is open as there don't seem to have a way to access view source from there?)

Status: NEW → RESOLVED
Closed: 3 years ago
Flags: needinfo?(nchevobbe)
Keywords: parity-chrome
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.