Details Panel covers most of the Network Monitor when docked on the side.

VERIFIED FIXED in Firefox 53

Status

defect
P1
normal
VERIFIED FIXED
3 years ago
Last year

People

(Reporter: johngraciliano, Assigned: rickychien)

Tracking

(Blocks 1 bug, {regression})

53 Branch
Firefox 53
Dependency tree / graph

Firefox Tracking Flags

(firefox50 unaffected, firefox51 unaffected, firefox52 unaffected, firefox53+ verified)

Details

(Whiteboard: [netmonitor-reserve])

Attachments

(2 attachments)

User Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:53.0) Gecko/20100101 Firefox/53.0
Build ID: 20170117030218

Steps to reproduce:

Start Firefox 53.0a1 (2017.01.15) or (2017.01.17).
Visit any page.
Start the Network Monitor Tool.
Dock the tools to the Side of the Browser Window.
Do anything to show the details panel, for example:
Reload the page.
Show the details panel by selecting any item.



Actual results:

The details panel covers most of the tool area and cannot be shrunk.



Expected results:

The details panel should only cover the bottom of the area and shrinking it should be possible to a reasonable extent.
Component: Untriaged → Developer Tools: Netmonitor
This is due to rules in netmonitor.css that set "height: calc(100vh - *)" for some elements.  In particular, for image files the setting:

.response-image-box {
  ...
  /* Minus 24px * 2 for toolbox height + tabpanel height + padding top + padding bottom  */
  height: calc(100vh - 68px);
  ...
}

is problematic (while settings for other properties in that rule are OK).  I propose to remove the property setting and add:

#react-response-tabpanel-hook {
  position: relative;
}
#react-response-tabpanel-hook > div {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column; 
}

Other problem spots in the code state "FIXME" for .properties-view.  So I replaced the rules by:

.properties-view {
  display: flex;
  flex-direction: column;
  flex: 1 0 0%;
  overflow-y: hidden;
}

I also replaced the rule for .tree-container to:
.tree-container {
  flex: 1 0 0%;
  overflow-y: auto;
}
and removed the rule for:
.tree-container .treeTable {...}

I also had to add:

#react-headers-tabpanel-hook {
  position: relative;
}

#react-headers-tabpanel-hook > div {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column; 
}

Possibly more the other #reac-... should be the same.

P.S. At the moment, I believe the following is also needed:
#cookies-tabpanel > vbox {
  overflow: auto;
}


P.P.S.  The following script can be added with Stylish to fix the problem:

/*********************************************************************************/

#react-response-tabpanel-hook {
  position: relative;
}
#react-response-tabpanel-hook > div {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column; 
  height: auto !important;
}

.properties-view {
  display: flex;
  flex-direction: column;
  flex: 1 0 0%;
  overflow-y: hidden;
  height: auto !important;
}

.tree-container {
  flex: 1 0 0%;
  overflow-y: auto;
}

#react-headers-tabpanel-hook {
  position: relative;
}

#react-headers-tabpanel-hook > div {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column; 
  height: auto !important;
}

#cookies-tabpanel > vbox {
  overflow: auto;
}

Regression range:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=e31b6b05ba5b713a6fcac67dbde2eccd591a85dd&tochange=48517fcee7701be4f684128d09d4a9d3dcd80a4f

Ricky Chien — Bug 1317650 - Implement Params Panel r=Honza,jsnajdr
Blocks: 1317650
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(rchien)
Keywords: regression
OS: Unspecified → All
Hardware: Unspecified → All
John, I don't understand what you mean in actual results and expected results. Did you mean that the "width of details panel" is unable to be shrunk by splitter only when docking devtools to the right side?

Could you provide the actual and expected screenshots to let me see the issue more clearly? 

thanks!
Flags: needinfo?(rchien)
Flags: needinfo?(johngraciliano)
Posted image Netpanel-win7.png
(In reply to Ricky Chien [:rickychien] from comment #3)

> Could you provide the actual and expected screenshots to let me see the
> issue more clearly? 


See my screenshot.
After applying (In reply to johngraciliano from comment #1)
> P.P.S.  The following script can be added with Stylish to fix the problem:
> 
> /
> *****************************************************************************
> ****/
> 
> #react-response-tabpanel-hook {
>   position: relative;
> }
> #react-response-tabpanel-hook > div {
>   position: absolute; top: 0; bottom: 0; left: 0; right: 0;
>   display: flex;
>   flex-direction: column; 
>   height: auto !important;
> }
> 
> .properties-view {
>   display: flex;
>   flex-direction: column;
>   flex: 1 0 0%;
>   overflow-y: hidden;
>   height: auto !important;
> }
> 
> .tree-container {
>   flex: 1 0 0%;
>   overflow-y: auto;
> }
> 
> #react-headers-tabpanel-hook {
>   position: relative;
> }
> 
> #react-headers-tabpanel-hook > div {
>   position: absolute; top: 0; bottom: 0; left: 0; right: 0;
>   display: flex;
>   flex-direction: column; 
>   height: auto !important;
> }
> 
> #cookies-tabpanel > vbox {
>   overflow: auto;
> }

After applying above script in stylish, I saw my params panel is broken and all tree view disappears.
Flags: needinfo?(johngraciliano)
Thanks for reporting this. I'm going to take a look.
Assignee: nobody → rchien
Status: NEW → ASSIGNED
Whiteboard: [netmonitor][triage]
Comment on attachment 8827952 [details]
Bug 1331821 - Details Panel is unable to shrink when docking to right side

https://reviewboard.mozilla.org/r/105522/#review106348

Thanks Ricky, the patch fixes the problem for me.

R+

Honza
Attachment #8827952 - Flags: review?(odvarko) → review+
Pushed by rchien@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/232825e23296
Details Panel is unable to shrink when docking to right side r=Honza
Tracking 53+ for this details panel regression.
https://hg.mozilla.org/mozilla-central/rev/232825e23296
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53
I do not see how this is fixed yet!  It may be for most cases but not if the response is an image.  Last time I checked https://hg.mozilla.org/mozilla-central/log/tip/devtools/client/themes/netmonitor.css still had:

.response-image-box {
  ...
  /* Minus 24px * 2 for toolbox height + tabpanel height + padding top + padding bottom  */
  height: calc(100vh - 68px);
  ...
}

The file presented other problems for me.  Something from I had in the rules from the script at the end of my initial comment seems to be missing.
I noticed the code has some code that affects tree tables.  It looks similar to some rules I added* to have the "Respose payload" code fill the response box (i.e., extend beyond 11 lines or shrink if necessary).  Perhaps that extra code is responsible for the problems I found.
But perhaps I am wrong.  I will have to wait until tomorrow to see how everything looks in the next release of Nightly.  I have to see to agree it is fixed.
______
*My rules for to fill to stretch the response payload are not published here or elsewhere yet.  I would have stated them here but they would belong to a different bug that may have not been called yet!
Iteration: --- → 53.5 - Jan 23
Flags: qe-verify?
Priority: -- → P1
Whiteboard: [netmonitor][triage] → [netmonitor-reserve]
Ah, good catch!

I forgot to verify the image case in response panel. All of these tricks to set a fixed view height like "height: calc(100vh - xxx);" should be removed since it disabled the vertical splitter when attaching the Devtools panel to the right.

I'm going to report a separate bug which will handle the issue as well as other broken layout in security panel and preview panel.
Flags: qe-verify? → qe-verify+
QA Contact: ciprian.georgiu
I've managed to reproduce this issue on Nightly from 2017-01-17 following the STR. (comment 0)

This issue is verified fixed on 53.0b1-build1 (20170307144748) across platforms: Windows 10 x64, Mac OS X 10.11.6 and Ubuntu 16.04 x64 LTS.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.