Cypress updates.

Change the cell selection circle color in dark mode.

Signed-off-by: Gökay Şatır <gokaysatir@collabora.com>
Change-Id: I23826bdf0a09fa7e8b1c25132842f98e37997034

browser/css/device-desktop.css

@@ -1,18 +1,5 @@
 /* CSS specific for desktop browsers. */
 
-/* Related to selectionMarkers.css on formulabar*/
-.inputbar_selection_handles *{
-	background-size: 20px;
-	background-position-y: top;
-	width: 20px;
-	background-repeat: no-repeat;
-	margin-left: 1px !important;
-	transform: translateY(-12px);
-}
-.inputbar_selection_handles .text-selection-handle-start{
-	margin-left: -20px !important;
-}
-
 #coolwsd-version span:before,
 #lokit-version > span:before {
 	content: ' (';

browser/css/selectionMarkers.css

@@ -18,12 +18,6 @@
 	height: 44px;
 	background-image: url('images/cursor-handler.svg');
 }
-.inputbar_selection_handles * {
-	z-index: 1;
-}
-#tb_formulabar_item_formula .inputbar_selection_handles{
-	/*display: none;*/
-}
 
 .html-object-section {
 	display: block;

browser/src/canvas/CanvasSectionContainer.ts

@@ -274,6 +274,10 @@ class CanvasSectionObject {
 			this.isVisible = this.containerObject.isDocumentObjectVisible(this);
 			this.onDocumentObjectVisibilityChange();
 		}
+
+		if (this.containerObject.testing) {
+			this.containerObject.createUpdateSingleDivElement(this);
+		}
 	}
 
 	/// Called when setShowSection is called. This is a callback to be overwritten.
@@ -1831,26 +1835,31 @@ class CanvasSectionContainer {
 	createUpdateSingleDivElement (section: CanvasSectionObject) {
 		var bcr: ClientRect = this.canvas.getBoundingClientRect();
 		var element: HTMLDivElement = <HTMLDivElement>document.getElementById('test-div-' + section.name);
-		if (!element) {
-			element = document.createElement('div');
-			element.id = 'test-div-' + section.name;
-			document.body.appendChild(element);
-		}
-		element.style.position = 'fixed';
-		element.style.zIndex = '-1';
-		element.style.left = String(bcr.left + Math.round(section.myTopLeft[0] / app.dpiScale)) + 'px';
-		element.style.top = String(bcr.top + Math.round(section.myTopLeft[1] / app.dpiScale)) + 'px';
-		element.style.width = String(Math.round(section.size[0] / app.dpiScale)) + 'px';
-		element.style.height = String(Math.round(section.size[1] / app.dpiScale)) + 'px';
-		if (section.name === 'tiles') {
-			// For tiles section add document coordinates of top and left too.
-			element.innerText = JSON.stringify({
-				top: Math.round(section.documentTopLeft[1]),
-				left: Math.round(section.documentTopLeft[0]),
-				width: Math.round(section.size[0]),
-				height: Math.round(section.size[1])
-			});
+
+		if ((!section.documentObject || section.isVisible) && section.isSectionShown()) {
+			if (!element) {
+				element = document.createElement('div');
+				element.id = 'test-div-' + section.name;
+				document.body.appendChild(element);
+			}
+			element.style.position = 'fixed';
+			element.style.zIndex = '-1';
+			element.style.left = String(bcr.left + Math.round(section.myTopLeft[0] / app.dpiScale)) + 'px';
+			element.style.top = String(bcr.top + Math.round(section.myTopLeft[1] / app.dpiScale)) + 'px';
+			element.style.width = String(Math.round(section.size[0] / app.dpiScale)) + 'px';
+			element.style.height = String(Math.round(section.size[1] / app.dpiScale)) + 'px';
+			if (section.name === 'tiles') {
+				// For tiles section add document coordinates of top and left too.
+				element.innerText = JSON.stringify({
+					top: Math.round(section.documentTopLeft[1]),
+					left: Math.round(section.documentTopLeft[0]),
+					width: Math.round(section.size[0]),
+					height: Math.round(section.size[1])
+				});
+			}
 		}
+		else if (element)
+			element.remove(); // Remove test-div if section is not visible.
 	}
 
 	createUpdateDivElements () {

browser/src/canvas/sections/CellSelectionHandleSection.ts

@@ -61,15 +61,12 @@ class CellSelectionHandle extends CanvasSectionObject {
 	}
 
 	public onDraw() {
-		this.context.strokeStyle = 'black';
+		this.context.strokeStyle = app.map.uiManager.getDarkModeState() ? 'white' : 'black';
 		this.context.lineWidth = 2;
 
 		this.context.beginPath();
 		this.context.arc(this.sectionProperties.circleRadius, this.sectionProperties.circleRadius, this.sectionProperties.circleRadius, 0, 2 * Math.PI);
-		if (this.containerObject.isDraggingSomething() && this.containerObject.targetSection === this.name)
-			this.context.fill();
-		else
-			this.context.stroke();
+		this.context.stroke();
 	}
 
 	onMouseMove(point: number[], dragDistance: number[], e: MouseEvent): void {

cypress_test/integration_tests/common/calc_helper.js

@@ -156,7 +156,7 @@ function selectEntireSheet() {
 		});
 
 	helper.doIfOnMobile(function() {
-		cy.cGet('.spreadsheet-cell-resize-marker').should('be.visible');
+		cy.cGet('#test-div-cell_selection_handle_start').should('exist');
 	});
 
 	var regex = /^A1:(AMJ|XFD)1048576$/;

cypress_test/integration_tests/common/impress_helper.js

@@ -100,7 +100,7 @@ function selectTableInTheCenter() {
 				cy.cGet('body').click(XPos, YPos);
 			});
 
-		return cy.cGet('.text-selection-handle-start').should('be.visible');
+		return cy.cGet('.leaflet-cursor-container').should('be.visible');
 	});
 
 	cy.cGet('.leaflet-marker-icon.table-row-resize-marker').should($el => { expect(Cypress.dom.isDetached($el)).to.eq(false); }).should('be.visible');

cypress_test/integration_tests/mobile/calc/calc_mobile_helper.js

@@ -13,11 +13,9 @@ function selectFirstRow() {
 				.click(XPos, YPos);
 		});
 
-	cy.cGet('.spreadsheet-cell-resize-marker:nth-of-type(1)')
-		.should('be.visible');
+	cy.cGet('#test-div-cell_selection_handle_start').should('exist');
 
-	cy.cGet('.spreadsheet-cell-resize-marker:nth-of-type(2)')
-		.should('not.be.visible');
+	cy.cGet('#test-div-cell_selection_handle_end').should('exist');
 
 	var regex = /^A1:(AMJ|XFD)1$/;
 	cy.cGet('input#addressInput-input')

cypress_test/integration_tests/mobile/calc/formulabar_spec.js

@@ -19,12 +19,9 @@ describe(['tagmobile', 'tagnextcloud'], 'Formula bar tests.', function() {
 		// Select a different cell using address input.
 		helper.typeIntoInputField('input#addressInput-input', 'B2');
 
-		cy.cGet('.spreadsheet-cell-resize-marker[style=\'visibility: visible; transform: translate3d(-8px, -8px, 0px); z-index: -8;\']')
-			.should('not.exist');
-
 		helper.typeIntoInputField('input#addressInput-input', 'A1');
 
-		cy.cGet('.spreadsheet-cell-resize-marker').should('exist');
+		cy.cGet('#test-div-cell_selection_handle_start').should('exist');
 	});
 
 	it('Select a cell range by address', function() {
@@ -34,19 +31,13 @@ describe(['tagmobile', 'tagnextcloud'], 'Formula bar tests.', function() {
 		// Select a cell range using address input.
 		helper.typeIntoInputField('input#addressInput-input', 'B2:B3');
 
-		cy.cGet('.spreadsheet-cell-resize-marker[style=\'visibility: visible; transform: translate3d(-8px, -8px, 0px); z-index: -8;\']')
-			.should('not.exist');
-
 		// Select first cell by clicking on it.
 		calcHelper.clickOnFirstCell();
 
-		cy.cGet('.spreadsheet-cell-resize-marker').should('exist');
-
 		// Select a cell range again using address input.
 		helper.typeIntoInputField('input#addressInput-input', 'B2:B3');
 
-		cy.cGet('.spreadsheet-cell-resize-marker[style=\'visibility: visible; transform: translate3d(-8px, -8px, 0px); z-index: -8;\']')
-			.should('not.exist');
+		cy.cGet('#test-div-cell_selection_handle_start').should('exist');
 	});
 
 	it.skip('Check input field content', function() {

cypress_test/integration_tests/mobile/calc/hamburger_menu_spec.js

@@ -158,7 +158,7 @@ describe.skip(['tagmobile'], 'Trigger hamburger menu options.', function() {
 		mobileHelper.enableEditingMobile();
 
 		mobileHelper.selectHamburgerMenuItem(['Edit', 'Select All']);
-		cy.cGet('.spreadsheet-cell-resize-marker').should('be.visible');
+		cy.cGet('#test-div-cell_selection_handle_start').should('exist');
 		cy.cGet('#copy-paste-container table td').should('contain.text', 'Text');
 	});
 

cypress_test/integration_tests/mobile/calc/insertion_wizard_spec.js

@@ -30,7 +30,7 @@ describe(['tagmobile', 'tagnextcloud'], 'Calc insertion wizard.', function() {
 		cy.wait(1000);
 
 		// Select image
-		cy.cGet('.spreadsheet-cell-resize-marker:nth-of-type(2)')
+		cy.cGet('#test-div-cell_selection_handle_end')
 			.then(function(items) {
 				expect(items).to.have.lengthOf(1);
 				var XPos = items[0].getBoundingClientRect().right + 10;