function _createTimelineGrid(filterOptions) {
			var gridParent = document.getElementById('sapUiSupportPerfHeaderTimelineBarWrapper');
			var gridLineNumbers = Math.round(gridParent.offsetWidth / 10);
			var filteredDuration = filterOptions.filterByTime.end - filterOptions.filterByTime.start;
			var gridLineStepInTime = parseInt(filteredDuration / gridLineNumbers);

			if (document.getElementById('grid')) {
				document.getElementById('grid').parentNode.removeChild(document.getElementById('grid'));
			}

			var grid = document.createElement('div');
			grid.innerHTML = '<div class="header"></div><div class="body"></div>';
			grid.id = 'grid';

			for (var i = 1; i <= gridLineNumbers; i++) {
				var divForBorder = document.createElement('div');
				var divForText = document.createElement('div');

				if (i % 5 === 0 || i === 1) {
					var time = parseInt(filterOptions.filterByTime.start);

					if (i !== 1) {
						time += i * gridLineStepInTime;
					}
					//to String
					time = time > 500 ? (time / 1000).toFixed(2) + ' s' : time + ' ms';

					divForText.setAttribute('data-time', time);
				}

				grid.querySelector('.body').appendChild(divForBorder);
				grid.querySelector('.header').appendChild(divForText);
			}

			document.querySelector('#sapUiSupportPerf').appendChild(grid);
		}
function _createTimelineGrid(filterOptions) {
			var gridParent = document.getElementById('sapUiSupportPerfHeaderTimelineBarWrapper');
			var gridLineNumbers = Math.round(gridParent.offsetWidth / 10);
			var filteredDuration = filterOptions.filterByTime.end - filterOptions.filterByTime.start;
			var gridLineStepInTime = parseInt(filteredDuration / gridLineNumbers);

			if (document.getElementById('grid')) {
				document.getElementById('grid').parentNode.removeChild(document.getElementById('grid'));
			}

			var grid = document.createElement('div');
			grid.innerHTML = '<div class="header"></div><div class="body"></div>';
			grid.id = 'grid';

			for (var i = 1; i <= gridLineNumbers; i++) {
				var divForBorder = document.createElement('div');
				var divForText = document.createElement('div');

				if (i % 5 === 0 || i === 1) {
					var time = parseInt(filterOptions.filterByTime.start);

					if (i !== 1) {
						time += i * gridLineStepInTime;
					}
					//to String
					time = time > 500 ? (time / 1000).toFixed(2) + ' s' : time + ' ms';

					divForText.setAttribute('data-time', time);
				}

				grid.querySelector('.body').appendChild(divForBorder);
				grid.querySelector('.header').appendChild(divForText);
			}

			document.querySelector('#sapUiSupportPerf').appendChild(grid);
		}
function _createTimelineGrid ( filterOptions ) { var gridParent = document . getElementById ( 'sapUiSupportPerfHeaderTimelineBarWrapper' ) ; var gridLineNumbers = Math . round ( gridParent . offsetWidth / 10 ) ; var filteredDuration = filterOptions . filterByTime . end - filterOptions . filterByTime . start ; var gridLineStepInTime = parseInt ( filteredDuration / gridLineNumbers ) ; if ( document . getElementById ( 'grid' ) ) { document . getElementById ( 'grid' ) . parentNode . removeChild ( document . getElementById ( 'grid' ) ) ; } var grid = document . createElement ( 'div' ) ; grid . innerHTML = '<div class="header"></div><div class="body"></div>' ; grid . id = 'grid' ; for ( var i = 1 ; i <= gridLineNumbers ; i ++ ) { var divForBorder = document . createElement ( 'div' ) ; var divForText = document . createElement ( 'div' ) ; if ( i % 5 === 0 || i === 1 ) { var time = parseInt ( filterOptions . filterByTime . start ) ; if ( i !== 1 ) { time += i * gridLineStepInTime ; } //to String time = time > 500 ? ( time / 1000 ) . toFixed ( 2 ) + ' s' : time + ' ms' ; divForText . setAttribute ( 'data-time' , time ) ; } grid . querySelector ( '.body' ) . appendChild ( divForBorder ) ; grid . querySelector ( '.header' ) . appendChild ( divForText ) ; } document . querySelector ( '#sapUiSupportPerf' ) . appendChild ( grid ) ; }
/* =============================================================================================================
Timegrid
=============================================================================================================
/ * ============================================================================================================= Timegrid =============================================================================================================
Creates a grid of timeline items