Merge pull request #287 from microsoft/v-keshakumar/ColorandSelectFunctionality

Update diff editor color and fix SHIFT+select feature in ALM toolkit

AlmToolkit/AlmToolkit/html-resources/dist/3rdpartylicenses.txt

@@ -1,5 +1,5 @@
 @angular/common
-MITcd 
+MIT
 
 @angular/core
 MIT

AlmToolkit/AlmToolkit/html-resources/dist/runtime.js

@@ -1 +1 @@
-(()=>{"use strict";var e,b={},m={};function r(e){var n=m[e];if(void 0!==n)return n.exports;var t=m[e]={id:e,exports:{}};return b[e](t,t.exports,r),t.exports}r.m=b,r.amdO={},e=[],r.O=(n,t,o,u)=>{if(!t){var a=1/0;for(i=0;i<e.length;i++){for(var[t,o,u]=e[i],c=!0,f=0;f<t.length;f++)(!1&u||a>=u)&&Object.keys(r.O).every(v=>r.O[v](t[f]))?t.splice(f--,1):(c=!1,u<a&&(a=u));if(c){e.splice(i--,1);var d=o();void 0!==d&&(n=d)}}return n}u=u||0;for(var i=e.length;i>0&&e[i-1][2]>u;i--)e[i]=e[i-1];e[i]=[t,o,u]},r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((n,t)=>(r.f[t](e,n),n),[])),r.u=e=>(2076===e?"common":e)+".js",r.miniCssF=e=>{},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={},n="gridcontrol:";r.l=(t,o,u,i)=>{if(e[t])e[t].push(o);else{var a,c;if(void 0!==u)for(var f=document.getElementsByTagName("script"),d=0;d<f.length;d++){var l=f[d];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==n+u){a=l;break}}a||(c=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",n+u),a.src=r.tu(t)),e[t]=[o];var s=(g,v)=>{a.onerror=a.onload=null,clearTimeout(p);var _=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),_&&_.forEach(h=>h(v)),g)return g(v)},p=setTimeout(s.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=s.bind(null,a.onerror),a.onload=s.bind(null,a.onload),c&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:n=>n},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={9121:0};r.f.j=(o,u)=>{var i=r.o(e,o)?e[o]:void 0;if(0!==i)if(i)u.push(i[2]);else if(9121!=o){var a=new Promise((l,s)=>i=e[o]=[l,s]);u.push(i[2]=a);var c=r.p+r.u(o),f=new Error;r.l(c,l=>{if(r.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var s=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;f.message="Loading chunk "+o+" failed.\n("+s+": "+p+")",f.name="ChunkLoadError",f.type=s,f.request=p,i[1](f)}},"chunk-"+o,o)}else e[o]=0},r.O.j=o=>0===e[o];var n=(o,u)=>{var f,d,[i,a,c]=u,l=0;if(i.some(p=>0!==e[p])){for(f in a)r.o(a,f)&&(r.m[f]=a[f]);if(c)var s=c(r)}for(o&&o(u);l<i.length;l++)r.o(e,d=i[l])&&e[d]&&e[d][0](),e[d]=0;return r.O(s)},t=self.webpackChunkgridcontrol=self.webpackChunkgridcontrol||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})(),r.nc=void 0})();
+(()=>{"use strict";var e,b={},m={};function r(e){var n=m[e];if(void 0!==n)return n.exports;var t=m[e]={id:e,exports:{}};return b[e](t,t.exports,r),t.exports}r.m=b,r.amdO={},e=[],r.O=(n,t,o,u)=>{if(!t){var a=1/0;for(i=0;i<e.length;i++){for(var[t,o,u]=e[i],c=!0,f=0;f<t.length;f++)(!1&u||a>=u)&&Object.keys(r.O).every(v=>r.O[v](t[f]))?t.splice(f--,1):(c=!1,u<a&&(a=u));if(c){e.splice(i--,1);var d=o();void 0!==d&&(n=d)}}return n}u=u||0;for(var i=e.length;i>0&&e[i-1][2]>u;i--)e[i]=e[i-1];e[i]=[t,o,u]},r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((n,t)=>(r.f[t](e,n),n),[])),r.u=e=>(2076===e?"common":e)+".js",r.miniCssF=e=>{},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),(()=>{var e={},n="gridcontrol:";r.l=(t,o,u,i)=>{if(e[t])e[t].push(o);else{var a,c;if(void 0!==u)for(var f=document.getElementsByTagName("script"),d=0;d<f.length;d++){var l=f[d];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==n+u){a=l;break}}a||(c=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",n+u),a.src=r.tu(t)),e[t]=[o];var s=(g,v)=>{a.onerror=a.onload=null,clearTimeout(p);var _=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),_&&_.forEach(h=>h(v)),g)return g(v)},p=setTimeout(s.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=s.bind(null,a.onerror),a.onload=s.bind(null,a.onload),c&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:n=>n},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={9121:0};r.f.j=(o,u)=>{var i=r.o(e,o)?e[o]:void 0;if(0!==i)if(i)u.push(i[2]);else if(9121!=o){var a=new Promise((l,s)=>i=e[o]=[l,s]);u.push(i[2]=a);var c=r.p+r.u(o),f=new Error;r.l(c,l=>{if(r.o(e,o)&&(0!==(i=e[o])&&(e[o]=void 0),i)){var s=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;f.message="Loading chunk "+o+" failed.\n("+s+": "+p+")",f.name="ChunkLoadError",f.type=s,f.request=p,i[1](f)}},"chunk-"+o,o)}else e[o]=0},r.O.j=o=>0===e[o];var n=(o,u)=>{var f,d,[i,a,c]=u,l=0;if(i.some(p=>0!==e[p])){for(f in a)r.o(a,f)&&(r.m[f]=a[f]);if(c)var s=c(r)}for(o&&o(u);l<i.length;l++)r.o(e,d=i[l])&&e[d]&&e[d][0](),e[d]=0;return r.O(s)},t=self.webpackChunkgridcontrol=self.webpackChunkgridcontrol||[];t.forEach(n.bind(null,0)),t.push=n.bind(null,t.push.bind(t))})(),r.nc=void 0})();

AlmToolkit/AlmToolkit/html-resources/src/app/grid/grid.component.css

@@ -19,7 +19,6 @@ html, body {
 }
 
 #comparison-table-container {
-  display: flex;
   height: 72.22%;
   overflow-y: auto;
   background-color: #F2F2F2;

AlmToolkit/AlmToolkit/html-resources/src/app/grid/grid.component.ts

@@ -356,8 +356,11 @@ export class GridComponent implements OnInit {
 
     // Find all elements above or below this row and select them as well
     while (isSiblingAvailable) {
-      siblingRow = this.getSiblingElement(directionToMove, startRowId) as HTMLElement;
-      if (siblingRow && siblingRow.id && siblingRow.id == endRowId) {
+      siblingRow = directionToMove
+        ? document.getElementById(startRowId)?.previousElementSibling as HTMLElement
+        : document.getElementById(startRowId)?.nextElementSibling as HTMLElement;
+
+      if (siblingRow?.id && siblingRow.id !== endRowId) {
         startRowId = siblingRow.id;
         document.getElementById(startRowId + '-' + columnType)!.focus();
         nodeSelected = this.comparisonDataToDisplay
@@ -370,7 +373,9 @@ export class GridComponent implements OnInit {
         }
 
         siblingRow.focus();
-        siblingRow = this.getSiblingElement(directionToMove, startRowId) as HTMLElement;
+        siblingRow = directionToMove
+          ? document.getElementById(startRowId)?.previousElementSibling as HTMLElement
+          : document.getElementById(startRowId)?.nextElementSibling as HTMLElement;
       } else {
         isSiblingAvailable = false;
       }

AlmToolkit/AlmToolkit/html-resources/src/app/tmdl-utils/tmdl-color-palette.ts

@@ -15,5 +15,10 @@ export const lightPalette: TMDLPalette = {
     { token: "variable", foreground: "001080" },
     { token: "attribute", foreground: "795e26" },
   ],
-  colors: {},
+  colors: {
+    'diffEditor.insertedTextBackground': '#ff000033',
+    'diffEditor.removedTextBackground': '#e2f6c5',
+    "diffEditor.insertedLineBackground": "#ff000033",
+    "diffEditor.removedLineBackground": "#e2f6c5",
+  },
 };