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

Status: VERIFIED FIXED

(DevTools :: Netmonitor, defect, P1)

Description

[johngraciliano]

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.

Comment 1

[johngraciliano]

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;
}

Comment 2

[Loic]

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

Ricky Chien — Bug 1317650 - Implement Params Panel r=Honza,jsnajdr

Comment 3

[Ricky Chien [:rickychien] (inactive)]

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!

Comment 4

[Loic]

Attachment: 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.

Comment 5

[Ricky Chien [:rickychien] (inactive)]

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.

Comment 6

[Ricky Chien [:rickychien] (inactive)]

Thanks for reporting this. I'm going to take a look.

Comment 7

[Ricky Chien [:rickychien] (inactive)]

Attachment: Bug 1331821 - Details Panel is unable to shrink when docking to right side

Review commit: https://reviewboard.mozilla.org/r/105522/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/105522/

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

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

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/232825e23296
Details Panel is unable to shrink when docking to right side r=Honza

Comment 10

[Marcia Knous [:marcia]]

Tracking 53+ for this details panel regression.

Comment 11

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/232825e23296

Comment 12

[johngraciliano]

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!

Comment 13

[Ricky Chien [:rickychien] (inactive)]

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.

Comment 14

[Ricky Chien [:rickychien] (inactive)]

See also Bug 1332151

Comment 15

[Ciprian Georgiu, Desktop QA]

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.