[Enact Browser] Fix the end of pages gets cut when bookmarkbar is shown

:Release Notes:
Fix the end of pages gets cut when bookmarkbar is shown

:Detailed Notes:
Some of pages like settings, bookmark manager and history looks cutting
the botton of the page.
In this patch, we adjust the height of scroller or list in the each page
to fit the their contents in the screen regardless whether bookmarkbar
is shown or not.

:Testing Performed:
1. Launch the web Browser
2. Tap menu button > 'Settings'
3. Turn on 'Always show Bookmars Bar'
4. Check a scroller of bookmark manager page and history page either

:QA Notes:

:Issues Addressed:
[PLAT-105621] "Clear Browsing Data" button gets cut when turn on
"Always show Bookmarks Bar" button in web Browser setting page.

Change-Id: I2b1ef9e3a8bec6046d6bb3f8f53659bada5b7080

Author: jeongran1230

samples/enact-based/src/views/BookmarkManager/BookmarkManager.js

@@ -15,6 +15,7 @@ import $L from '@enact/i18n/$L';
 import Button from '@enact/moonstone/Button';
 import {connect} from 'react-redux';
 import Notification from '@enact/moonstone/Notification';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Scroller from '@enact/moonstone/Scroller';
@@ -27,6 +28,7 @@ import css from './BookmarkManager.module.less';
 class BookmarkManagerBase extends Component {
 
 	static propTypes = {
+		alwaysShowBookmarks: PropTypes.bool,
 		browser: PropTypes.object,
 		data: PropTypes.array,
 		selectedIndices: PropTypes.array,
@@ -85,7 +87,10 @@ class BookmarkManagerBase extends Component {
 	}
 
 	render () {
-		const {browser, data, hasSelection, ...rest} = this.props;
+		const
+			{alwaysShowBookmarks, browser, data, hasSelection, ...rest} = this.props,
+			scrollerClass = classNames(css.scroller, {[css.shrinkHeight]: alwaysShowBookmarks});
+
 		delete rest.selectedIndices;
 		delete rest.selectAllBookmarks;
 		delete rest.deselectAllBookmarks;
@@ -114,7 +119,7 @@ class BookmarkManagerBase extends Component {
 				</Notification>
 				{
 					(data.length > 0) ?
-					<Scroller horizontalScrollbar="hidden" className={css.list}>
+					<Scroller horizontalScrollbar="hidden" className={scrollerClass}>
 						<BookmarkList browser={browser}/>
 					</Scroller>
 					:

samples/enact-based/src/views/BookmarkManager/BookmarkManager.module.less

@@ -22,9 +22,13 @@
 	});
 }
 
-.list {
+.scroller {
 	height: ~"calc(100vh - " 200px + @moon-button-height + 36px ~")";
 	padding: 20px 10px 10px 10px;
+	&.shrinkHeight {
+		// shirnk as much as bookmarkbar height (84px)
+		height: ~"calc(100vh - " 200px + @moon-button-height + 36px + 84px ~")";
+	}
 }
 
 .noItem {

samples/enact-based/src/views/ContentView/ContentItem.js

@@ -74,12 +74,12 @@ const ContentItem = kind({
             case TabTypes.SITE_FILTERING:
                 return <SiteFiltering style={style} browser={browser} />;
             case TabTypes.BOOKMARKS:
-                return <BookmarkManager style={style} browser={browser} />;
+                return <BookmarkManager style={style} alwaysShowBookmarks={alwaysShowBookmarks} browser={browser} />;
             case TabTypes.HISTORY:
-                return <History style={style} browser={browser} isSelectedTab={isSelectedTab} />;
+                return <History style={style} alwaysShowBookmarks={alwaysShowBookmarks} browser={browser} isSelectedTab={isSelectedTab} />;
         }
     }
 });
 
 export default ContentItem;
-export {ContentItem};
+export {ContentItem};

samples/enact-based/src/views/History/History.js

@@ -15,6 +15,7 @@ import $L from '@enact/i18n/$L';
 import Button from '@enact/moonstone/Button';
 import {connect} from 'react-redux';
 import Notification from '@enact/moonstone/Notification';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import ri from '@enact/ui/resolution';
@@ -29,6 +30,7 @@ import css from './History.module.less';
 class HistoryBase extends Component {
 
 	static propTypes = {
+		alwaysShowBookmarks: PropTypes.bool,
 		browser: PropTypes.object,
 		data: PropTypes.array,
 		deselectAllHistory: PropTypes.func,
@@ -159,7 +161,10 @@ class HistoryBase extends Component {
 	}
 
 	render () {
-		const {data, hasSelection, ...rest} = this.props;
+		const
+			{alwaysShowBookmarks, data, hasSelection, ...rest} = this.props,
+			listClass = classNames(css.list, {[css.shrinkHeight]:alwaysShowBookmarks});
+
 
 		delete rest.browser;
 		delete rest.deselectAllHistory;
@@ -195,7 +200,7 @@ class HistoryBase extends Component {
 							dataSize={this.viewData.length}
 							focusableScrollbar
 							itemRenderer={this.renderItem}
-							className={css.list}
+							className={listClass}
 							itemSize={ri.scale(70)}
 						/>
 					: <div>{$L('There is no history.')}</div>

samples/enact-based/src/views/History/History.module.less

@@ -26,4 +26,8 @@
 	height: ~"calc(100vh - " 200px + @moon-button-height + 36px ~")";
 	padding: 10px;
 	margin-top: 20px;
+	&.shrinkHeight {
+		// shirnk as much as bookmarkbar height (84px)
+		height: ~"calc(100vh - " 200px + @moon-button-height + 36px + 84px ~")";
+	}
 }

samples/enact-based/src/views/Settings/Settings.js

@@ -163,16 +163,17 @@ class SettingsBase extends Component {
 				privateBrowsing,
 				...rest
 			} = this.props,
-			classes = classNames(className, css.settings),
+			scrollerClass = classNames(css.scroller, {[css.shrinkHeight]: alwaysShowBookmarks}),
+			settingContentsClass= classNames(className, css.settings),
 			startupOption = startupOptions.indexOf(startupPage);
 
 		delete rest.browser;
 		delete rest.dispatch;
 		delete rest.homePageUrl;
 
 		return (
-			<Scroller {...rest} className={css.scroller}>
-				<div className={classes}>
+			<Scroller {...rest} className={scrollerClass}>
+				<div className={settingContentsClass}>
 					<BodyText>{$L('On Startup')}</BodyText>
 					<div className={css.indent}>
 						<Group

samples/enact-based/src/views/Settings/Settings.module.less

@@ -4,6 +4,10 @@
 
 .scroller {
 	height: ~"calc(100vh - " 236px ~")";
+	&.shrinkHeight {
+		// shirnk as much as bookmarkbar height (84px)
+		height: ~"calc(100vh - " 238px + 84px ~")";
+	}
 }
 
 .settings {