Sheath Reduction Algorithm

Summary

Sheath arms designers and content creators with the ability to style panel pages directly inside browser dev tools and retain those changes when the page is reloaded.

Explaination

Explaination of sheath reduction algorithm and ways to improve accuracy.

const path = domElementPath.default(record.target);
let rebuiltSelector = '';

Given a Mutation Record target domElementPath is used to generate a CSS selector.

const pieces = path.split(' ');
const optimizedSelector = pieces.reduce((p, c, i) => c.indexOf('.pane-') !== -1 || c.indexOf('.panel-') !== -1 ? { selector: [ ...p.selector, c.replace(/^(.*?)(\.pane-|\.panel-page|\.panel-)([0-9]*)(.*?)$/,'$2$3') ], chars: p.chars + c.length, lastIndex: p.chars + i + c.length } : { ...p, chars: p.chars + c.length }, { selector: [], chars: 0, lastIndex: 0 });

The path is than converted to an array for each part of the selector separated by a space. An optimized selector is generated using only elements that identify as a panel, pane, or nested panel page. All other elements in the path are discarded.

Example of an unoptimized RAW path from dom element path.

html > body > app-root > div > div.outlet-wrapper > classifieds-ui-panel-page-router > classifieds-ui-panel-page.panel-page > div.ng-untouched.ng-pristine.ng-valid > classifieds-ui-gridless-layout-renderer > classifieds-ui-gridless-layout > div.layout-wrapper > div.layout-inner > div > div.grid-item-inner > classifieds-ui-render-panel.panel-0.panel.ng-untouched.ng-pristine.ng-valid > div.render-panel.ng-untouched.ng-pristine.ng-valid > classifieds-ui-render-pane.pane-1.pane > div.ng-untouched.ng-dirty.ng-invalid > classifieds-ui-panel-page.panel-page.ng-untouched.ng-dirty.ng-invalid > div.ng-untouched.ng-pristine.ng-valid > classifieds-ui-gridless-layout-renderer > classifieds-ui-gridless-layout > div.layout-wrapper > div.layout-inner > div > div.grid-item-inner > classifieds-ui-render-panel.panel-0.panel.ng-untouched.ng-pristine.ng-valid > div.render-panel.ng-untouched.ng-pristine.ng-valid > classifieds-ui-render-pane.pane-0.pane.flex-1

The split apart path.

FIRST phase optimized selector object.

if (optimizedSelector.selector.length !== 0) {
  // console.log('after selector', k.slice(optimizedSelector.lastIndex))
  rebuiltSelector = ( optimizedSelector.selector.join(' ') + ' ' + path.slice(optimizedSelector.lastIndex).split('>').join('')).replace(/(\.ng\-[a-zA-Z0-9_-]*)/gm,'');
  if (rebuiltSelector.indexOf('.panel-page') === 0) {
    rebuiltSelector = rebuiltSelector.substr(12).trim();
  }
}

...

The second rebuild of the selector.

.panel-page .panel-0 .pane-1 .panel-page .panel-0 .pane-0 

After stripping the root panel page.

.panel-0 .pane-1 .panel-page .panel-0 .pane-0

const selectorValid = isSelectorValid({ selector: rebuiltSelector, document: this.document });

Verify current selector is valid.