This feature is to add pagination to the tab list of servo-shell.
Internal Overview
This feature works by:
determining how many tabs can fit in a single row (see calcMaxTabs())
breaking g_Tabs down into pages, each with a set of tabs not to exceed calcMaxTabs() in quantity
storing which page we are on in a global
on every updateUI(),
.hideLabel() all the tabs not on this page, and .showLabel() all the tabs on this page
hide the back button if we are on the first page
hide the next button if we are on the last page
on every window resize, calculate which page the current tab is on, and updateUi() to keep the tab list focused on it
Design goals
I originally intended to implement chrome-style tabs with every tab in the window visible, with the new tab button to the side. However, this is difficult without flexbox (which Servo does not currently support), or a lot of JS.
I then intended to implement firefox-style tabs that scroll horizontally with arrows placed alongside the tabs. This is difficult without layout support for css's calc(), or a number of CSS hacks. Servo also does not have proper support for overflow:hidden (or maybe I was just using it wrong? My tests worked properly in chrome). A list would overlap the buttons placed alongside it.
This was the simplest compromise using the features that Servo currently supports, and I still had to work around a few quirks.
Known bugs or design faults:
calcMaxTabs() depends on magic numbers to determine the width of a tab and the width of the create a new tab + page navigation buttons. This is not a bug in itself, but it will create bugs if the width of any of these ever change. It may be possible to fix this currently using getBoundingClientRect(), but that solution will be a bit messy. this issue is partially resolved in adea000
glennw
commented
9 years ago
This feature is to add pagination to the tab list of servo-shell.
Internal Overview
This feature works by:
calcMaxTabs())calcMaxTabs()in quantityupdateUI(),.hideLabel()all the tabs not on this page, and.showLabel()all the tabs on this pageupdateUi()to keep the tab list focused on itDesign goals
I originally intended to implement chrome-style tabs with every tab in the window visible, with the new tab button to the side. However, this is difficult without flexbox (which Servo does not currently support), or a lot of JS.
I then intended to implement firefox-style tabs that scroll horizontally with arrows placed alongside the tabs. This is difficult without layout support for css's calc(), or a number of CSS hacks. Servo also does not have proper support for overflow:hidden (or maybe I was just using it wrong? My tests worked properly in chrome). A list would overlap the buttons placed alongside it.
This was the simplest compromise using the features that Servo currently supports, and I still had to work around a few quirks.
Known bugs or design faults:
calcMaxTabs()depends on magic numbers to determine the width of a tab and the width of the create a new tab + page navigation buttons. This is not a bug in itself, but it will create bugs if the width of any of these ever change. It may be possible to fix this currently using getBoundingClientRect(), but that solution will be a bit messy.