Revert "html,css changes corected after reversion"

This reverts commit 712e0e0c1e9f46da07b65d34140059c477b3248a.

less/TableStyles/queryBuilder.less

@@ -6,7 +6,7 @@
     display: table;
     display: none;
     width: 100%;
-  border-top: 1px solid #dddddd;
+    border-top: 1px solid #DDDDDD;
     /*[{environment-commandbar-toolbar-separator}]*/
     background-color: #ffffff;
     /*[{plugin-background-color}]*/
@@ -45,7 +45,7 @@
     /*[{plugin-background-color}]*/
     min-width: 600px;
     height: 30px;
-  border-bottom: 1px solid #dddddd;
+    border-bottom: 1px solid #DDDDDD;
     /*[1px solid {environment-commandbar-toolbar-separator}]*/
 }
 
@@ -70,14 +70,14 @@
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:hover {
-  background-color: #cccedb;
+    background-color: #CCCEDB;
     /*[{common-controls-button-hover-background}]*/
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button.active {
-  background-color: #e6e7ed;
+    background-color: #E6E7ED;
     /*[{common-controls-inner-tab-active-background}]*/
-  outline: none;
+    outline: none
 }
 
 .query-builder-toolbar .query-toolbar-group .query-toolbar-button:disabled,
@@ -120,7 +120,7 @@
 .query-editor-text {
     width: 100%;
     margin: 2px;
-  border: solid 1px #a9acb3;
+    border: solid 1px #A9ACB3;
     /*[{plugin-textbox-disabled-color}]*/
     resize: none;
     margin-top: -39px;
@@ -201,9 +201,9 @@ input::-webkit-inner-spin-button {
 .advanced-options-panel .advanced-options .top .top-input {
     width: 100px;
     word-spacing: normal;
-  color: #1e1e1e;
+    color: #1E1E1E;
     /*[{common-controls-button-foreground}]*/
-  border: 1px solid #cccedb;
+    border: 1px solid #CCCEDB;
     /*[1px solid {plugin-textbox-border-color}]*/
     height: 20px;
     margin-left: 8px;
@@ -299,9 +299,9 @@ input::-webkit-inner-spin-button {
 }
 
 .scroll-box {
-  border-bottom: 1px transparent #ddd;
+    border-bottom: 1px transparent #DDD;
     /*[1px solid {plugin-table-border-color}]*/
-  border-top: 1px transparent #ddd;
+    border-top: 1px transparent #DDD;
     /*[1px solid {plugin-table-border-color}]*/
     max-height: 20vh;
     width: 100%;
@@ -366,7 +366,7 @@ input::-webkit-inner-spin-button {
 
 .group-indicator-table {
     border-spacing: 0px;
-  min-height: 24px;
+    min-height: 24px
 }
 
 .group-indicator-column {
@@ -396,6 +396,7 @@ input::-webkit-inner-spin-button {
     background-color: #ffffff;
 }
 
+
 /*.type-header {
     padding-right: 4px;
 }
@@ -409,9 +410,9 @@ input::-webkit-inner-spin-button {
 }*/
 
 .clause-table-field[readonly] {
-  background-color: #eeeef2;
+    background-color: #EEEEF2;
     /*[{plugin-table-header-background-color}]*/
-  border: 1px solid #cccedb;
+    border: 1px solid #CCCEDB;
     /*[{plugin-table-border-color}]*/
 }
 
@@ -461,11 +462,11 @@ input::-webkit-inner-spin-button {
 
 .query-panel .divider.horizontal {
     height: 10px;
-  width: 100%;
+    width: 100%
 }
 
 .inline-div {
-  display: inline;
+    display: inline
 }
 
 .querybuilder-addpropertyImg,
@@ -484,7 +485,7 @@ input::-webkit-inner-spin-button {
 }
 
 .entity-Add-Cancel {
-  // padding: @DefaultSpace @SmallSpace @SmallSpace;
+    padding: @DefaultSpace @SmallSpace @SmallSpace;
     cursor: pointer;
 }
 
@@ -497,7 +498,7 @@ input::-webkit-inner-spin-button {
 }
 
 .query-builder-isDisabled {
-  border: 1px solid #cccedb;
+    border: 1px solid #CCCEDB;
     color: #ccc;
 }
 
@@ -514,6 +515,7 @@ input::-webkit-inner-spin-button {
     margin-bottom: 5px;
 }
 
+
 /*
 @media only screen and (max-width: 1200px) {
     .clause-table {

src/Explorer/Tabs/QueryTablesTab.html

@@ -70,19 +70,24 @@
             <tbody data-bind="template: { name: 'queryClause-template', foreach: clauseArray, as: 'clause' }"></tbody>
           </table>
         </div>
-        <button
+        <div
-          data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }"
+          class="addClause"
-          style="border: none; background: none"
+          role="button"
+          data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }"
+          tabindex="0"
         >
-          <div class="addClause" data-bind=" ">
           <div class="addClause-heading">
             <span class="clause-table addClause-title">
-                <img class="addclauseProperty-Img" style="margin-bottom: 5px" src="/Add-property.svg" />
+              <img
+                class="addclauseProperty-Img"
+                style="margin-bottom: 5px"
+                src="/Add-property.svg"
+                alt="Add new clause"
+              />
               <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
             </span>
           </div>
         </div>
-        </button>
       </div>
     </div>
     <!-- Tables Query Tab Query Helper - End-->
@@ -163,20 +168,22 @@
 <script type="text/html" id="queryClause-template">
   <tr class="clause-table-row">
     <td class="clause-table-cell action-column">
-      <button
+      <span
+        class="entity-Add-Cancel"
+        role="button"
+        tabindex="0"
         data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}"
       >
-        <span class="entity-Add-Cancel" role="button">
         <img class="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause" />
       </span>
-      </button>
+      <span
-      <button
+        class="entity-Add-Cancel"
+        role="button"
+        tabindex="0"
         data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}"
       >
-        <span class="entity-Add-Cancel" role="button">
         <img class="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause" />
       </span>
-      </button>
     </td>
     <td class="clause-table-cell group-control-column">
       <input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping" />