profile
viewpoint

ampproject/amphtml 13696

The AMP web component framework.

ampproject/worker-dom 2386

The same DOM API and Frameworks you know, but in a Web Worker.

ampproject/amp-wp 1559

Enable AMP on your WordPress site, the WordPress way.

ampproject/amp.dev 379

The AMP Project Website.

ampproject/amp-react-prototype 29

A scratch pad to experiment with React rendered AMP Components

ampproject/wg-access-subscriptions 5

Responsible for user specific controlled access to AMP content (amp-subscriptions, amp-access and related extensions) Facilitator: @jpettitt Slack: #wg-access-subs

push eventgoogle/web-stories-wp

Brittany Feenstra

commit sha 3c6916621e6a75bd352e29e59f185a5cbdc61cc0

updating template descriptions and adding i18n wrapper

view details

Brittany Feenstra

commit sha 529f17aed22b67b6cd9cfa547f5d84e958c16db2

Update assets/src/dashboard/templates/index.js Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Brittany Feenstra

commit sha b2f4418c035ccc24b9a66bfbdc214c90ad2973d9

Update assets/src/dashboard/templates/index.js Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

Pascal Birchler

commit sha a63b3b055a598bd454ddc840e3c3ae6e16b3a0a5

Update eslint patch

view details

Brittany Feenstra

commit sha 080d2efb93064d7b8e44543c5102aa1e84135175

Merge pull request #2818 from google/task/2687-template-copy-updates Dashboard: Update template descriptions

view details

Mariano Martinez III

commit sha 8e18bda4180bf07f9a192847feb774655055ccf4

Added new shapes and showInLibrary flag to hide/show masks

view details

Mariano Martinez III

commit sha 7ce796916f4b7516e02cd039ed41d35d750f0b15

Merge pull request #2760 from google/1895-add-shapes-shapepanel Shapes: Add new shapes to library

view details

Mariano Martinez III

commit sha dc7cca55bde55fecc8f75eb9d50dcc343eb1916b

Dashboard: Fixed text typos in templates

view details

Jonny Harris

commit sha d8df912992b30584033e100bddb15e43b8ea0ddf

Ignore namespace file from coverage (#2856)

view details

Mariano Martinez III

commit sha 99ba1510990bc4756a373b5704fcda2e7d2db5ac

Remove extra spacing

view details

Maxwell Yinger

commit sha 9c1353fb0a8dddeab0f9d5f527923159049b57ed

initial fitness update

view details

Maxwell Yinger

commit sha bc3d5a9cd1b29da89228415bdd165b55562bdadd

add proper bg pictures

view details

Mariano Martinez III

commit sha e1c0d8ecfb7c90a284aa9bcce874d09e8b1d7743

Removed hidden chars from fitness template

view details

Mariano Martinez III

commit sha 2e8680c6cc9d0999ea567705ec929f91e92f1a69

Dashboard: Updated Beauty template

view details

Mariano Martinez III

commit sha 48bac842c6faecd5f7a79082c97183ed8788d404

Fixed template grid after merge from master

view details

Mariano Martinez III

commit sha b77e570bd28ada8d7c523f35fa08046de0e2ce35

Merge pull request #2628 from google/2473-template-fitness-aspect Templates: Update Fitness Template Aspect Ratio to 9:16

view details

Mariano Martinez III

commit sha 1938804f181b3f373832568b69f77c74f7a653a4

Merge pull request #2860 from google/task/final-text-check-templates Dashboard: Fixed text typos in templates

view details

Wassim Gharbi

commit sha 7f1186f29747071f9278d0ec76d7ea693350904b

Change default shape color (#2858)

view details

Mariano Martinez III

commit sha 139a84e429850129869beefd20d43823a6213ace

Merge pull request #2606 from google/2476-template-beauty-aspect Templates: Update Beauty Template Aspect Ratio to 9:16

view details

dependabot-preview[bot]

commit sha 7a4e1446348b2f9bb8ab0fff68cd3bb89cdfecca

Bump @babel/preset-env from 7.10.3 to 7.10.4 (#2867)

view details

push time in 7 days

issue commentgoogle/web-stories-wp

Fix karma tests memory issues

PTAL: https://github.com/google/web-stories-wp/pull/2887

barklund

comment created time in 7 days

PR opened google/web-stories-wp

Reviewers
Karma: use a single WebPack bundle for all tests

Summary

<!-- A brief description of what this PR does. -->

Relevant Technical Choices

<!-- Please describe your changes. -->

To-do

<!-- A list of things that need to be addressed in this PR or follow-up changes. -->

User-facing changes

<!-- Please describe your changes. -->

Testing Instructions

<!-- How can the changes in this PR be verified? Relevant for QA and user acceptance testing. -->


<!-- Please reference the issue(s) this PR addresses. -->

Fixes #

+46 -8

0 comment

7 changed files

pr created time in 7 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha f79214464c8a4ae24b7bd66e6a5e45e9f7b53330

dashboard tests

view details

push time in 7 days

create barnchgoogle/web-stories-wp

branch : integr/mem

created branch time in 7 days

issue commentgoogle/web-stories-wp

Fix karma tests memory issues

Here's something similar and suggested solution is here. This promises to speed up our test compilation time on WebPack quite a bit.

barklund

comment created time in 7 days

issue commentgoogle/web-stories-wp

Fix karma tests memory issues

I think I can confirm that it happens in the source map preprocessing. Here's the full debug log for the failure:

>> WebPack
✔ Stories Editor
  Compiled successfully in 133.37ms

30 06 2020 09:10:48.198:DEBUG [web-server]: Instantiating middleware
ℹ 「wdm」: Compiled successfully.
ℹ 「wdm」: Compiling...

✔ Stories Editor
  Compiled successfully in 58.80s

ℹ 「wdm」: Compiled with warnings.

>>> Fails between these two logs

30 06 2020 09:12:03.278:DEBUG [preprocessor.sourcemap]: base64-encoded source map for /Users/dvoytenko/DNI/web-stories-wp/assets/src/edit-story/components/canvas/karma/backgroundCopyPaste.karma.js

This most likely comes from this Karma configuration:

preprocessors: {
  'assets/src/edit-story/**/karma/**/*.js': ['webpack', 'sourcemap'],
},

Not clear what are all issues related to sourcemap here.

barklund

comment created time in 7 days

Pull request review commentgoogle/web-stories-wp

Shapes: Add new shapes to library

 function ShapesPane(props) {       )}       <Section title={__('Basic shapes', 'web-stories')}>         <SectionContent>-          {MASKS.map((mask) => (-            <ShapePreview mask={mask} key={mask.type} />+          {MASKS.filter((mask) => mask.showInLibrary).map((mask) => (

Yep. Approved.

littlemilkstudio

comment created time in 8 days

pull request commentgoogle/web-stories-wp

Shapes: Add new shapes to library

@mariano-formidable I see. Thanks for the update. I'm actually also OOO this week. PTAL the latest on this above. We can rediscuss, but we should do that asap then since I will be unavailable.

littlemilkstudio

comment created time in 8 days

pull request commentgoogle/web-stories-wp

Shapes: Add new shapes to library

@littlemilkstudio Ok, we did more discussion here and the question for now: can we keep the code as is, but hide these shapes from the library until we get a chance to review the masking/stroke rules for them? E.g. maybe we can add showInLibrary boolean field for masks/shapes and use it to filter the shapes for the library. And then we can also follow up with a separate (non-Beta-blocking) pull request that set this flag for everything and do a QA round on it.

littlemilkstudio

comment created time in 8 days

pull request commentgoogle/web-stories-wp

Shapes: Add new shapes to library

@littlemilkstudio @samitron7 I think it'd be easy enough to do in theory - we'll need to add a boolean flag to indicate that a shape can be used as a mask. It might be a bit silly naming-wise that we will have arrowMask.isMask, but we can probably smooth that out. However, the concern I have is that maybe the shapes and masks shouldn't be merged at all? I.e. the fact that they are all on the "Shapes" tab doesn't mean that they should be the same thing. With that in mind:

  1. Will we want to visually differentiate masks from shapes in the shapes panel? E.g. should "mask-vs-shape" be indicated somehow (badge, background, etc)? Or maybe they should be separated in two sections: Masks and Shapes?
  2. Is a non-mask shape just a slightly different type of image? Can editor do anything with it other than what it can already do with images?
littlemilkstudio

comment created time in 8 days

pull request commentgoogle/web-stories-wp

Shapes: Add new shapes to library

@littlemilkstudio Another top-level question (and /cc @samitron7 ). Not all of these shapes can be used for clipping. We don't currently have any declarations that annotate our shapes as clipping and not clipping. Thus all the drop-target and display logic will apply. This could yield some pretty bad results at times. Not sure if this is concern in practice immediately.

littlemilkstudio

comment created time in 8 days

push eventdvoytenko/amphtml

Dima Voytenko

commit sha a36a270aa5709679710a90b89363bf3c1b28fce4

lints

view details

push time in 11 days

Pull request review commentgoogle/web-stories-wp

Shapes: Add new shapes to library

 export const MASKS = [     ratio: 1.15473441108545,   },   {-    type: MaskTypes.BLOB,-    name: __('Blob', 'web-stories'),-    path: CLIP_PATHS[MaskTypes.BLOB],+    type: MaskTypes.BLOB_1,+    name: __('Blob 1', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_1],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_2,+    name: __('Blob 2', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_2],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_3,+    name: __('Blob 3', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_3],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_4,+    name: __('Blob 4', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_4],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_5,+    name: __('Blob 5', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_5],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_6,+    name: __('Blob 6', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_6],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_7,+    name: __('Blob 7', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_7],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_8,+    name: __('Blob 8', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_8],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_9,+    name: __('Blob 9', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_9],+    iconPath: ICON_CLIP_PATHS[MaskTypes.BLOB_9],+    ratio: 653.02 / 836.92,+    iconRatio: 1,+  },+  {+    type: MaskTypes.GRID_2,+    name: __('Grid 2', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.GRID_2],+    iconPath: ICON_CLIP_PATHS[MaskTypes.GRID_2],+    ratio: 362 / 619,+    iconRatio: 1,+  },+  {+    type: MaskTypes.GRID_3,+    name: __('Grid 3', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.GRID_3],+    iconPath: ICON_CLIP_PATHS[MaskTypes.GRID_3],+    ratio: 360.8 / 619,+    iconRatio: 1,

I can't quite wrap my head around this: why is there a different iconRatio? Are we showing a skewed icon?

littlemilkstudio

comment created time in 11 days

Pull request review commentgoogle/web-stories-wp

Shapes: Add new shapes to library

 export const MASKS = [     ratio: 1.15473441108545,   },   {-    type: MaskTypes.BLOB,-    name: __('Blob', 'web-stories'),-    path: CLIP_PATHS[MaskTypes.BLOB],+    type: MaskTypes.BLOB_1,+    name: __('Blob 1', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_1],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_2,+    name: __('Blob 2', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_2],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_3,+    name: __('Blob 3', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_3],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_4,+    name: __('Blob 4', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_4],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_5,+    name: __('Blob 5', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_5],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_6,+    name: __('Blob 6', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_6],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_7,+    name: __('Blob 7', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_7],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_8,+    name: __('Blob 8', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_8],+    ratio: 1,+  },+  {+    type: MaskTypes.BLOB_9,+    name: __('Blob 9', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_9],+    iconPath: ICON_CLIP_PATHS[MaskTypes.BLOB_9],+    ratio: 653.02 / 836.92,+    iconRatio: 1,+  },+  {+    type: MaskTypes.GRID_2,+    name: __('Grid 2', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.GRID_2],+    iconPath: ICON_CLIP_PATHS[MaskTypes.GRID_2],+    ratio: 362 / 619,+    iconRatio: 1,+  },+  {+    type: MaskTypes.GRID_3,+    name: __('Grid 3', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.GRID_3],+    iconPath: ICON_CLIP_PATHS[MaskTypes.GRID_3],+    ratio: 360.8 / 619,

To confirm, the path itself is in the 0-1 coordinate system, right? If so, I don't see a good reason to keep this as an expression. IMHO, let's just do the math and put the value here. It's opaque from whichever way we look at it.

littlemilkstudio

comment created time in 11 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 182161b5ec90e6b91fa1c7836bbfe54806c59c07

Re-enable carousel integration tests (#2708) * Re-enable carousel integration tests * review fixes

view details

push time in 11 days

delete branch google/web-stories-wp

delete branch : integr/enable-carousel

delete time in 11 days

PR merged google/web-stories-wp

Re-enable carousel integration tests cla: yes

Technical considerations

This pull requests contains a few minor changes (e.g. it creates a test container for the carousel), but also one important consideration to guard against flakes - the Container.waitReady API. Some components such as carousel use ResizeObserver to complete their layout and testing before it happens is a big source of flakes. In other words - the layout of such components is asynchronous and unobservable to the test. waitReady takes care of it, by allowing the component to declare that it needs time to finish its layout and when it actually happens.

For now, a test should "know" and use this API when testing a relevant feature. I think this is ok since most of components have a good auto-layout, and this is more of an exception.

+108 -32

5 comments

6 changed files

dvoytenko

pr closed time in 11 days

issue openedpuppeteer/puppeteer

exposeFunction fails with Firefox

Steps to reproduce

Tell us about your environment:

  • Puppeteer version: 4.0.1
  • Platform / OS version: Mac OSX Catalina 10.15.1
  • URLs (if applicable): n/a
  • Node.js version: 14.4.0

What steps will reproduce the problem?

Please include code that reproduces the issue.

Run the following script:

const puppeteer = require('puppeteer');

const firefoxOptions = {
  product: 'firefox',
  headless: false,
  extraPrefsFirefox: {},
  dumpio: true,
};

const browser = await puppeteer.launch(firefoxOptions);

const page = await browser.newPage();
await page.goto('https://news.ycombinator.com/');

await page.exposeFunction('test', () => {
  console.log('works!!!!');
});

What is the expected result?

Should work.

What happens instead?

Fails:

1593203097312	RemoteAgent	ERROR	UnknownMethodError: Runtime.addBinding:
	RemoteAgentError@chrome://remote/content/Error.jsm:25:5
	UnknownMethodError@chrome://remote/content/Error.jsm:108:7
	execute@chrome://remote/content/domains/DomainCache.jsm:96:13
	receiveMessage@chrome://remote/content/sessions/ContentProcessSession.jsm:86:45
caused by: 
(node:5070) UnhandledPromiseRejectionWarning: Error: Protocol error (Runtime.addBinding): Runtime.addBinding RemoteAgentError@chrome://remote/content/Error.jsm:25:5
UnknownMethodError@chrome://remote/content/Error.jsm:108:7
execute@chrome://remote/content/domains/DomainCache.jsm:96:13
receiveMessage@chrome://remote/content/sessions/ContentProcessSession.jsm:86:45

    at ~/node_modules/puppeteer/lib/Connection.js:156:63
    at new Promise (<anonymous>)
    at CDPSession.send (~/puppeteer/lib/Connection.js:155:16)
    at Page.exposeFunction (~/node_modules/puppeteer/lib/Page.js:391:28)
    at Page.<anonymous> (~/node_modules/puppeteer/lib/helper.js:117:27)
    at ~/test.cjs:37:14
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:5070) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:5070) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

created time in 11 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 9f632d636b6befa9e4d6d9381c29dfa4cd43b66a

review fixes

view details

push time in 11 days

Pull request review commentgoogle/web-stories-wp

Re-enable carousel integration tests

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * Internal dependencies+ */+import { Container } from './container';++/**+ * The page carousel.+ */+export class Carousel extends Container {+  constructor(node, path) {+    super(node, path);+  }++  get pages() {+    const pageList = this.getByRole('listbox', { name: 'Pages List' });+    if (!pageList) {+      return null;+    }

Done. One actually is easily expressed via the other one.

dvoytenko

comment created time in 11 days

issue openedgoogle/web-stories-wp

Karma: consider rerunning failed tests to weed out flakes

Task Description

Jasmine doesn't have rerun option. So we instead may need to add a custom reporter that will record all the failed tests and do a second Karma run with only those tests. We can have a threshold, e.g. only under N failed tests are rerun. More failures just fail the job completely.

Note: special attention should be paid to the coverage now. The new supplemental coverage report should be saved in a separate place and uploaded along with the report from the main run.

created time in 11 days

push eventgoogle/web-stories-wp

Dillon Mulroy

commit sha 3c22ea01bc22707cb0a9345e3b53edf6f5c527fe

Dashboard: Initial Karma integration + setup (#2647) * refactor webpack.config.test to export and object with both js projects webpack config, create karma.dashboard-config.cjs * rename edit-story karma config, add karma config for dashboard, add npm run script for dashboard karma * add karma _init to dashboard * move _init.js to the top level karma folder to share for both edit-story and dashboard, update webpack configs to pick up init.js * initial fixture work * add initia ApiProviderFixture * finish initial stub of ApiProviderFixture * Stub the ApiProvider in the fixture class * Wip * mock/stub getAllFonts * add initial basic karma test * update basic test * update npm scripts * move events fixture to shared karma folder * update github action * re add events file * update npm script and eslint * rename karma configs * remove commented code * relocate shareable karma code * split karma tests and remove snapshotting from dashboard * update .distignore * update gh action names * update folder structure * updat path * cherry pick webpack test config from other branch * update run cmd * typo * add code coverage * rename code cove dirs * bump browserNoActivityTimeout * typos

view details

Dima Voytenko

commit sha 6013f9e196662e6073414e35c3855219bc512230

Re-enable carousel integration tests

view details

push time in 11 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha b03a5b1818a9d724d421ef6b29f36b5e0cf70fb7

Re-enable carousel integration tests

view details

push time in 11 days

issue openedampproject/wg-bento

Presentation at AMP CS (JSConf CS) 2020

https://drive.google.com/file/d/1qzO7ZR0W9lFlyBCZKidR3QB8seU2dT0t/view?usp=sharing

created time in 11 days

Pull request review commentgoogle/web-stories-wp

Dashboard: Initial Karma integration + setup

+name: Dashboard Integration Tests++on:+  push:+    branches:+      - master+      - release/*+  pull_request:++jobs:+  karma:+    runs-on: ubuntu-latest+    steps:+      - name: Checkout+        uses: actions/checkout@v2++      - name: Read .nvmrc+        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"+        id: nvm++      - name: Setup Node+        uses: actions/setup-node@v1+        with:+          node-version: ${{ steps.nvm.outputs.NVMRC }}++      - name: Setup npm cache+        uses: pat-s/always-upload-cache@v1.1.4+        with:+          path: node_modules+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}+          restore-keys: |+            ${{ runner.os }}-npm-${{ env.cache-name }}-+            ${{ runner.os }}-npm-+            ${{ runner.os }}-++      - name: Install dependencies+        run: npm ci+        env:+          CI: true++      - name: Run dashboard integration tests+        run: npm run test:karma:dashboard -- --headless --viewport=1600:1000 --coverage++      - name: Upload code coverage report+        uses: codecov/codecov-action@v1+        with:+          file: build/logs/karma-coverage/lcov.info

I mean here s/editor/edit-story.

dmmulroy

comment created time in 11 days

Pull request review commentgoogle/web-stories-wp

Dashboard: Initial Karma integration + setup

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++'use strict';++/**+ * Internal dependencies+ */+const getWebpackConfig = require('./webpack.config.test.cjs');++module.exports = function (config) {+  config.set({+    plugins: [+      'karma-chrome-launcher',+      'karma-jasmine',+      'karma-sourcemap-loader',+      'karma-webpack',+      'karma-coverage-istanbul-reporter',+      require('./karma/karma-puppeteer-launcher/index.cjs'),+      require('./karma/karma-puppeteer-client/index.cjs'),+    ],++    // Frameworks to use.+    // Available frameworks: https://npmjs.org/browse/keyword/karma-adapter+    frameworks: ['jasmine', 'karma-puppeteer-client'],++    // list of files / patterns to load in the browser+    files: [+      { pattern: 'assets/src/dashboard/**/karma/**/*.js', watched: false },+      { pattern: 'karma/fixture/init.js', watched: false },+      {+        pattern: '__static__/**/*',+        watched: false,+        included: false,+        served: true,+        nocache: false,+      },+    ],++    // list of files / patterns to exclude+    exclude: ['**/test/**/*.js', '**/*.test.js'],++    // preprocess matching files before serving them to the browser+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor+    preprocessors: {+      'assets/src/dashboard/**/karma/**/*.js': ['webpack', 'sourcemap'],+    },++    proxies: {+      '/__static__/': '/base/__static__/',+    },++    webpack: getWebpackConfig('stories-dashboard', config),++    webpackMiddleware: {+      // webpack-dev-middleware configuration+      // i. e.+      stats: 'errors-only',+    },++    webpackServer: {+      noInfo: true,+    },++    // test results reporter to use+    // possible values: 'dots', 'progress'+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter+    reporters: config.coverage+      ? ['progress', 'coverage-istanbul']+      : ['progress'],++    // web server port+    port: 9876,++    // enable / disable colors in the output (reporters and logs)+    colors: true,++    // level of logging+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG+    logLevel: config.LOG_INFO,++    // enable / disable watching file and executing tests whenever any file changes+    autoWatch: true,++    // start these browsers+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher+    browsers: ['puppeteer'],++    puppeteerLauncher: {+      puppeteer: {+        headless: config.headless || false,+        slowMo: config.slowMo || 0,+        devtools: config.devtools || false,+        snapshots: config.snapshots || false,+        defaultViewport: getViewport(config.viewport),+      },+    },++    client: {+      jasmine: {+        timeoutInterval: 10000,+      },+    },++    coverageIstanbulReporter: {+      dir: 'build/logs/karma-coverage',

Made a note on this above.

dmmulroy

comment created time in 11 days

Pull request review commentgoogle/web-stories-wp

Dashboard: Initial Karma integration + setup

+name: Dashboard Integration Tests++on:+  push:+    branches:+      - master+      - release/*+  pull_request:++jobs:+  karma:+    runs-on: ubuntu-latest+    steps:+      - name: Checkout+        uses: actions/checkout@v2++      - name: Read .nvmrc+        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"+        id: nvm++      - name: Setup Node+        uses: actions/setup-node@v1+        with:+          node-version: ${{ steps.nvm.outputs.NVMRC }}++      - name: Setup npm cache+        uses: pat-s/always-upload-cache@v1.1.4+        with:+          path: node_modules+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}+          restore-keys: |+            ${{ runner.os }}-npm-${{ env.cache-name }}-+            ${{ runner.os }}-npm-+            ${{ runner.os }}-++      - name: Install dependencies+        run: npm ci+        env:+          CI: true++      - name: Run dashboard integration tests+        run: npm run test:karma:dashboard -- --headless --viewport=1600:1000 --coverage++      - name: Upload code coverage report+        uses: codecov/codecov-action@v1+        with:+          file: build/logs/karma-coverage/lcov.info

It'd be safer, imho, to separate this log file. E.g. build/logs/karma-coverage/(editor|dashboard)/lcov.info

dmmulroy

comment created time in 11 days

push eventgoogle/web-stories-wp

Pascal Birchler

commit sha d5139474b2f64528bb9ec65095e6ca4ab5caaae3

Make dialog appearance more coherent (#2734)

view details

dependabot-preview[bot]

commit sha 6ca501f35c4fe16f90dd27e2d70faee07af8979d

Bump @wordpress/data from 4.20.0 to 4.21.0 (#2771) Bumps [@wordpress/data](https://github.com/WordPress/gutenberg/tree/HEAD/packages/data) from 4.20.0 to 4.21.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/changelog.txt) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/data@4.21.0/packages/data) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

Dima Voytenko

commit sha 970284118a4901b59d1b53915e0075beedd32e0f

Re-enable carousel integration tests

view details

Dima Voytenko

commit sha aa3b704fb1eb4a5a58d16dd5a2bb5d0e85c1388e

wip

view details

Dima Voytenko

commit sha b13e5f7399ba82a12ab8aaeb281ecc352430048a

Ensure selection on each click

view details

Dima Voytenko

commit sha 1b3e0efa08b8ad6d35fcd80dc5146faa2f01917c

lints

view details

Dima Voytenko

commit sha 1b7d17b81bacb0707cb1cdc84a9ad83537d0afc4

debugging

view details

Dima Voytenko

commit sha 9d87dd5e11225d71aff2cdf71d61276d20fcac41

debugging

view details

Dima Voytenko

commit sha 22b27f56ddf02544228987a4e2dfecc462692074

container.waitReady

view details

push time in 11 days

Pull request review commentgoogle/web-stories-wp

Use Percy to take snapshots in E2E tests

 describe('Inserting Media from Media Library', () => {     await expect(page).toMatchElement(       '[data-testid="frameElement"]:nth-of-type(2)'     );++    await percySnapshot(page, 'E2E: Inserting Media from Media Library');

I don't think you need to use "E2E: " prefix everywhere, not that you're on a different project.

swissspidy

comment created time in 11 days

issue commentgoogle/web-stories-wp

Percy: false positives caused by media not fully loaded

Hmm. Percy should be waiting for the window.onload, so I'm wondering if this is more related how the video is sampled when rendered. If this is a very common flake, we can, to start, block videos from loading at all in the snapshots. Not sure what's a better path forward though.

swissspidy

comment created time in 11 days

pull request commentgoogle/web-stories-wp

Re-enable carousel integration tests

Speaking of readiness.. It looks like there can be false positives when videos or images on the library haven't fully loaded yet. Example:

@swissspidy Would you mind filing a bug for this? This is somewhat of a different type of readiness and happens on a different process. But I'm pretty surprised this happens since Percy was supposed to wait for window.onload that should be taken care of this...

dvoytenko

comment created time in 11 days

push eventgoogle/web-stories-wp

Diego Varese

commit sha d8146da406fe1cef2f16a6b61467c18db28a23ec

Remove fetch.js and use window.fetch instead

view details

Clinton Volzke

commit sha e2ab1072d462242f7eb16adede694e98d59da874

Remove useMediaReducer folder and move reducer to media/local/reducer.js.

view details

dependabot-preview[bot]

commit sha 3b0415269c5ddda02bb696e9438a5b1a2efa69d2

Bump @testing-library/react from 10.4.0 to 10.4.2 (#2714)

view details

Jonny Harris

commit sha 51ff8b5f80a735cccb810d057bc6b30139577679

WordPress: add some filters to customize behavior (#2667)

view details

dependabot-preview[bot]

commit sha 1df75aab6326afb8c38e6314e4474cb65987f1a5

Bump @storybook/addon-actions from 6.0.0-beta.34 to 6.0.0-beta.36 (#2728)

view details

dependabot-preview[bot]

commit sha 4c1d3ed5189c99cba2ffb185eb91c2d51973ce64

Bump @storybook/react from 6.0.0-beta.33 to 6.0.0-beta.36 (#2724)

view details

dependabot-preview[bot]

commit sha 92a7f739fbace3027ae7de6da3a00f65b86f1edb

Bump uuid from 8.1.0 to 8.2.0 (#2697) Bumps [uuid](https://github.com/uuidjs/uuid) from 8.1.0 to 8.2.0. - [Release notes](https://github.com/uuidjs/uuid/releases) - [Changelog](https://github.com/uuidjs/uuid/blob/master/CHANGELOG.md) - [Commits](https://github.com/uuidjs/uuid/compare/v8.1.0...v8.2.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 5175d66d344c048303ba826e28fc7e2a71f0f024

Bump @storybook/addon-viewport from 6.0.0-beta.34 to 6.0.0-beta.36 (#2720) Bumps [@storybook/addon-viewport](https://github.com/storybookjs/storybook/tree/HEAD/addons/viewport) from 6.0.0-beta.34 to 6.0.0-beta.36. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.36/addons/viewport) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

Diego Varese

commit sha 9d7391b600acff65955ee658ab3247019231669d

remove extra mockImplementation.

view details

dependabot-preview[bot]

commit sha 4d2677eff014f27117d05e75624f00040b9a8a03

Bump @storybook/addon-backgrounds from 6.0.0-beta.33 to 6.0.0-beta.36 (#2723) Bumps [@storybook/addon-backgrounds](https://github.com/storybookjs/storybook/tree/HEAD/addons/backgrounds) from 6.0.0-beta.33 to 6.0.0-beta.36. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.36/addons/backgrounds) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha bc5c3e093bc66aad57f97eed12eb3b36b797c54d

Bump @storybook/addon-a11y from 6.0.0-beta.34 to 6.0.0-beta.36 (#2726)

view details

dependabot-preview[bot]

commit sha 086c5978508ac624cf612c0a603fa175e55ed544

Bump @storybook/addon-knobs from 6.0.0-beta.31 to 6.0.0-beta.36 (#2721)

view details

dependabot-preview[bot]

commit sha 081122c789c48e7e80de9e119943510f87f380b1

Bump @storybook/client-api from 6.0.0-beta.33 to 6.0.0-beta.36 (#2719)

view details

dependabot-preview[bot]

commit sha fd2a4cb010caddb6aa3f12e53661d4d8c22761e1

Bump @storybook/addon-storysource from 6.0.0-beta.33 to 6.0.0-beta.36 (#2727)

view details

dependabot-preview[bot]

commit sha 4d1c7634ea1cd075685b09563cc0764d22ec263e

Bump @testing-library/react from 10.4.2 to 10.4.3 (#2729)

view details

Pascal Birchler

commit sha ec47deba7f301142422b3b62ccaa027b26f800ea

Small UI refinements (#2620)

view details

dependabot-preview[bot]

commit sha bc5b422691bf3d89a56e98a78d5312bfb5092392

Bump @wordpress/dependency-extraction-webpack-plugin from 2.7.0 to 2.8.0 (#2741) Bumps [@wordpress/dependency-extraction-webpack-plugin](https://github.com/WordPress/gutenberg/tree/HEAD/packages/dependency-extraction-webpack-plugin) from 2.7.0 to 2.8.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/packages/dependency-extraction-webpack-plugin/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/dependency-extraction-webpack-plugin@2.8.0/packages/dependency-extraction-webpack-plugin) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha ceb5979bc5d0c2f7fdded4f9768760af46e04a97

Bump @wordpress/components from 9.8.0 to 9.9.0 (#2736) Bumps [@wordpress/components](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components) from 9.8.0 to 9.9.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/changelog.txt) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/components@9.9.0/packages/components) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 7f6f3939d05ab4f8119855d7870338d2fd776e6c

Bump @wordpress/element from 2.14.0 to 2.15.0 (#2737) Bumps [@wordpress/element](https://github.com/WordPress/gutenberg/tree/HEAD/packages/element) from 2.14.0 to 2.15.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/packages/element/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/element@2.15.0/packages/element) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha bb4e5f38a59fcae48ed1024a6b2a340698e60615

Bump @wordpress/api-fetch from 3.17.0 to 3.18.0 (#2738) Bumps [@wordpress/api-fetch](https://github.com/WordPress/gutenberg/tree/HEAD/packages/api-fetch) from 3.17.0 to 3.18.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/changelog.txt) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/api-fetch@3.18.0/packages/api-fetch) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

push time in 11 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 8d6ea80ef4c05d01fd885f4521ba1985091c426c

Karma: enable coverage reports (#2583) * Karma: enable coverage reports * Update webpack.config.test.cjs Co-authored-by: Pascal Birchler <pascalb@google.com> * reorder deps * try project/flag config * try separating, take 2 * splitting, take 3 * splitting take 4 * splitting take 6 Co-authored-by: Pascal Birchler <pascalb@google.com>

view details

push time in 11 days

delete branch google/web-stories-wp

delete branch : integr/cov3

delete time in 11 days

PR merged google/web-stories-wp

Reviewers
Karma: enable coverage reports Type: Infrastructure cla: yes

Summary

Enable coverage report for Karma tests based on the coverage-istanbul-loader.

Relevant Technical Choices

As you can see the coverage is reported to up ~20%. We certainly need to track the coverage deltas we are getting through Karma, but the question is: Is this a good number in absolute terms at this point? Some (big?) percent of that added coverage we get from the rendering phase for the whole editor fixture. And while we are getting some assurance that the rendering is not failing, it's also not the true coverage either. This number will be a little more justifiable if we add more quality control tools to the Karma fixture, such as:

  1. Accessibility tests.
  2. [✅] Visual tests (Percy, which we are pretty close too).
  3. Some performance metrics such as rerendering volume.
  4. If we pursue aggressively React-Dev warnings.

But as it standard right now, the relative value is definitely useful to us, but the absolute value is not directly comparable to the existing coverage from unit tests.

Another nuance: I tried adding the flags field to our coverage reports and you can see the breakdown below. That definitely helps, but the analytics by flag is currently limited. This is what you'd see if you'd try to drill down.

To-do

  • [x] Discuss the tradeoffs
  • [x] Separate Karma coverage into a separate project

+178 -24

4 comments

6 changed files

dvoytenko

pr closed time in 11 days

Pull request review commentgoogle/web-stories-wp

[TEST!] Text edit mode + Moveable testing

 import useUnmount from '../../utils/useUnmount'; import createSolid from '../../utils/createSolid'; import stripHTML from '../../utils/stripHTML'; import calcRotatedResizeOffset from '../../utils/calcRotatedResizeOffset';+import { useTransformHandler } from '../../components/transform'; import { generateParagraphTextStyle, getHighlightLineheight } from './util';  // Wrapper bounds the text editor within the element bounds. The resize // logic updates the height of this element to show the new height based // on the content and properties.-// Background color is used to make the edited element more prominent and-// easier to see. const Wrapper = styled.div`   ${elementFillContent}-  background-color: ${({ theme }) => theme.colors.whiteout};

This, imho, belongs in a separate pull request.

miina

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

[TEST!] Text edit mode + Moveable testing

 function SingleSelectionMovable({ selectedElement, targetEl, pushEvent }) {         if (isResizingFromCorner !== newResizingMode) {           setIsResizingFromCorner(newResizingMode);         }+        if (isEditMode) {+          setActionHappening(true);

I believe the movable only tracks the outline of the target DOM element. So all we need to do to keep them in sync is to call moveable.updateRect(). It's already called in the SingleSelectionMovable, but since it's outside of the rendering path it's probably doesn't get called. So we can either call updateRect() manually, or we could find a way to get the whole SingleSelectionMovable to rerender.

miina

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

[TEST!] Text edit mode + Moveable testing

 const VERTICAL_HANDLES = ['n', 's']; const HORIZONTAL_HANDLES = ['e', 'w']; const DIAGONAL_HANDLES = ['nw', 'ne', 'sw', 'se']; -function SingleSelectionMovable({ selectedElement, targetEl, pushEvent }) {-  const moveable = useRef(null);+function SingleSelectionMovable({+  selectedElement,+  targetEl,+  pushEvent,+  isEditMode,+  editMoveableRef,+  setActionHappening,+}) {+  let moveable = useRef(null);+  if (isEditMode) {+    moveable = editMoveableRef;

I think we had combinedRefs code somewhere?

miina

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

[TEST!] Text edit mode + Moveable testing

 function EditElement({ element }) {     getBox: state.actions.getBox,   })); -  const { Edit } = getDefinitionForType(type);+  const [editWrapper, setEditWrapper] = useState(null);+  const [actionHappening, setActionHappening] = useState(false);++  const { lastSelectionEvent } = useCanvas(

lastSelectionEvent, I believe, is used only explicitly for dragging. Since we're disabling it, we should drop it from here as well.

miina

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

[TEST!] Text edit mode + Moveable testing

 function TextEdit({     ]);   }, [font, fontFaceSetConfigs, maybeEnqueueFontStyle]); +  useTransformHandler(id, (transform) => {+    const target = textBoxRef.current;+    const updatedFontSize = transform?.updates?.fontSize;

It might be better for this component to compute the fontSize itself, and possibly to turn off that feature in the SingleSelectionMovable.

miina

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

[TEST!] Text edit mode + Moveable testing

 function SingleSelectionMovable({ selectedElement, targetEl, pushEvent }) {         setTransformStyle(target);       }}       onResizeEnd={({ target }) => {+        if (isEditMode) {+          setActionHappening(false);

We already should have setActionHappening via either useTransformHandler or isAnythingTransforming.

miina

comment created time in 12 days

pull request commentampproject/amphtml

Hide text nodes of unbuilt non-container elements.

FMI: Would it make sense to instead set opacity to 0 so that there is no layout needed if nothing actually changes?

This only handles text nodes and we can't apply opacity to text nodes (or rather that's what the color: transparent does).

caroqliu

comment created time in 12 days

pull request commentgoogle/web-stories-wp

Karma: enable coverage reports

For posterity, here's how the coverage numbers change:

_ Before After
codecov/project 66.44% 77.94%
codecov/project/editor 66.1% 83.93%
codecov/project/editor.unit 66.1% 66.1%
codecov/project/editor.karma - 62.47%
dvoytenko

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Scrollwheel support for the image editor

 function MediaEdit({ element, box }) {     ref: setFullMedia,     draggable: false,     opacity: opacity / 100,+    onClick: clearEditing,

👍

wassgha

comment created time in 12 days

Pull request review commentampproject/amphtml

[amp-accordion] Implement Display Locking via CSS property

   border: solid 1px #dfdfdf; } -amp-accordion > section:not([expanded]) > :last-child[rendersubtree] {-  border: none !important;+amp-accordion.i-amphtml-display-locking > section:not([expanded]) > :last-child,+amp-accordion.i-amphtml-display-locking+  > section:not([expanded])+  > :last-child+  * {+  content-visibility: hidden-matchable !important;

And this solves all the other things we had with position:absolute?

caroqliu

comment created time in 12 days

pull request commentgoogle/web-stories-wp

Dashboard: Initial Karma integration + setup

LGTM. If you merge this before https://github.com/google/web-stories-wp/pull/2583, I'll also update the coverage report for your tests. And vice-versa.

dmmulroy

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

[WIP] Added integration tests for inline text formatting

 class Frame extends Container {   constructor(node, path) {     super(node, path);   }++  get textContent() {

Ok, got it. But kind of stresses the confusion point :) What about textContentHtml() to split the difference?

barklund

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Feature | Add shapes to shape panel [1895]

 export const MASKS = [     path: CLIP_PATHS[MaskTypes.BLOB_8],     ratio: 1,   },+  {+    type: MaskTypes.BLOB_9,+    name: __('Blob 9', 'web-stories'),+    path: CLIP_PATHS[MaskTypes.BLOB_9],+    iconPath: ICON_CLIP_PATHS[MaskTypes.BLOB_9],+    ratio: 1,

Based on the recent experience: it's important that a shape is fits correctly and "fully" into the 1:1 square or a 1:(1/ratio) rectangle. Roughly it means that the shape touches each side of such a rectangle.

littlemilkstudio

comment created time in 12 days

issue commentgoogle/web-stories-wp

Update context hooks to simplify state/action selectors

I think the targeted hooks is good idea imho. Alternatively, we could also have a library of selectors. I think that'd be most important for state props.

E.g.

const currentPage = useCurentPage();
// or
const {currentPage} = useStory(StorySelectors.currentPage);

both seem ok to me.

cvolzke4

comment created time in 12 days

pull request commentgoogle/web-stories-wp

[TEST + WIP] Text edit mode + resizing/rotation

Thanks @miina . These are all good points. I'll spend more time on the other PR.

miina

comment created time in 12 days

startedgoogle/web-stories-wp

started time in 12 days

delete branch google/web-stories-wp

delete branch : integr/cov4

delete time in 12 days

PR closed google/web-stories-wp

Define flags configuration cla: yes
+5 -0

3 comments

1 changed file

dvoytenko

pr closed time in 12 days

pull request commentgoogle/web-stories-wp

Define flags configuration

Closed in preference of https://github.com/google/web-stories-wp/pull/2583

dvoytenko

comment created time in 12 days

pull request commentgoogle/web-stories-wp

TBD: Karma: enable coverage reports

🎉 After a few attempts I tried the most obvious thing and it worked. Now unit and karma tests are split in subprojects and everything looks pretty solid. Please rereview and let's get this in!

dvoytenko

comment created time in 12 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 28ce2e4881cc8451b05e33a38175576daa8d971e

splitting take 6

view details

push time in 12 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha f313e291c22c80552bfbf8216ac2aa75664f311f

splitting take 4

view details

push time in 12 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha d284e6694817df7cf9f3760c7dcdc023530749ac

splitting, take 3

view details

push time in 12 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 27280035903810298e73ade12357aa079896e36d

try separating, take 2

view details

push time in 12 days

Pull request review commentgoogle/web-stories-wp

Smooth media editor zooming + keyboard user detection refactor

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { useEffect, useState } from 'react';++/**+ * Internal dependencies+ */+import useBatchingCallback from './useBatchingCallback';++const DEFAULT_ACCEPTED_KEYS = [+  'ArrowUp',+  'ArrowDown',+  'ArrowLeft',+  'ArrowRight',+  'Tab',+];++function useIsUsingKeyboard(acceptedKeys = DEFAULT_ACCEPTED_KEYS) {+  const [usingKeyboard, setUsingKeyboard] = useState(false);+  const handleKeydown = useBatchingCallback(+    (e) => {+      if (!usingKeyboard && acceptedKeys.includes(e.key)) {+        setUsingKeyboard(true);+      }+    },+    [usingKeyboard, acceptedKeys]

Ditto dep on usingKeyboard.

wassgha

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Smooth media editor zooming + keyboard user detection refactor

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { useEffect, useState } from 'react';++/**+ * Internal dependencies+ */+import useBatchingCallback from './useBatchingCallback';++const DEFAULT_ACCEPTED_KEYS = [+  'ArrowUp',+  'ArrowDown',+  'ArrowLeft',+  'ArrowRight',+  'Tab',+];++function useIsUsingKeyboard(acceptedKeys = DEFAULT_ACCEPTED_KEYS) {+  const [usingKeyboard, setUsingKeyboard] = useState(false);+  const handleKeydown = useBatchingCallback(+    (e) => {+      if (!usingKeyboard && acceptedKeys.includes(e.key)) {+        setUsingKeyboard(true);+      }+    },+    [usingKeyboard, acceptedKeys]+  );++  const handleMousedown = useBatchingCallback(() => {+    if (usingKeyboard) {+      setUsingKeyboard(false);+    }+  }, [usingKeyboard]);++  useEffect(() => {+    document.addEventListener('keydown', handleKeydown, true /** useCapture */);+    document.addEventListener(+      'mousedown',+      handleMousedown,+      true /** useCapture */+    );+    return function cleanup() {+      document.removeEventListener(+        'keydown',+        handleKeydown,+        true /** useCapture */+      );+      document.removeEventListener(+        'mousedown',+        handleMousedown,+        true /** useCapture */+      );+    };+  });

Is effect rerunning on each rerender? Why?

wassgha

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Smooth media editor zooming + keyboard user detection refactor

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * External dependencies+ */+import { useEffect, useState } from 'react';++/**+ * Internal dependencies+ */+import useBatchingCallback from './useBatchingCallback';++const DEFAULT_ACCEPTED_KEYS = [+  'ArrowUp',+  'ArrowDown',+  'ArrowLeft',+  'ArrowRight',+  'Tab',+];++function useIsUsingKeyboard(acceptedKeys = DEFAULT_ACCEPTED_KEYS) {+  const [usingKeyboard, setUsingKeyboard] = useState(false);+  const handleKeydown = useBatchingCallback(+    (e) => {+      if (!usingKeyboard && acceptedKeys.includes(e.key)) {+        setUsingKeyboard(true);+      }+    },+    [usingKeyboard, acceptedKeys]+  );++  const handleMousedown = useBatchingCallback(() => {+    if (usingKeyboard) {+      setUsingKeyboard(false);+    }+  }, [usingKeyboard]);

Do we need this dependency? setUsingKeyboard(false) will do the right thing if it's already false.

wassgha

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Scrollwheel support for the image editor

 function MediaEdit({ element, box }) {    const isImage = 'image' === type;   const isVideo = 'video' === type;++  const wheelHandler = useCallback(+    (evt) => {+      let newScale = scale || 100;+      if (evt.deltaY > 0) {+        newScale += 10;+      } else {+        newScale -= 10;+      }+      setProperties({ scale: newScale });+      evt.preventDefault();+    },+    [setProperties, scale]

So, this will be refreshing the callback and by extent rerun useEffect on each event including readding event handlers? I think this could be a lot more efficient. E.g. we can inline wheelHandler inside the useEffect and instead of depending on scale, we can simply use setProperties(function()) that would update scale w/o depending on the current scale value.

wassgha

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Scrollwheel support for the image editor

 function MediaEdit({ element, box }) {     ref: setFullMedia,     draggable: false,     opacity: opacity / 100,+    onClick: clearEditing,

I tried just now and I see it currently already cancels editing when clicked on faded part. Is this needed?

wassgha

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Scrollwheel support for the image editor

 function MediaEdit({ element, box }) {    const isImage = 'image' === type;   const isVideo = 'video' === type;++  const wheelHandler = useCallback(

Why not just inline into useEffect

wassgha

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Add 'Enter' key as a trigger to enter edit mode

 function useCanvasKeys(ref) {     [arrangeSelection]   ); +  // Edit mode+  useGlobalKeyDownEffect(+    'enter',+    () => {+      if (selectedElements.length === 0) {+        return;+      }++      const { type, id } = selectedElements[0];+      const { hasEditMode } = getDefinitionForType(type);+      // Only handle Enter key for editable elements+      if (!hasEditMode) {+        return;+      }++      setEditingElement(id);

Does this conflict with the text editor, which provides a lot more data when setting the editing element? Alternatively, we can let each frame type to support the <kbd>Enter</kbd> invidually.

Also, this needs a Karma test. There some related tests here.

wassgha

comment created time in 12 days

Pull request review commentgoogle/web-stories-wp

Add 'Enter' key as a trigger to enter edit mode

 function useCanvasKeys(ref) {     [arrangeSelection]   ); +  // Edit mode+  useGlobalKeyDownEffect(+    'enter',+    () => {+      if (selectedElements.length === 0) {

Should this be selectedElements.length !== 1? Otherwise we'd be entering editing mode randomly in a multiselection.

wassgha

comment created time in 12 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 0891f4d81eef7bf47db40b01225c8d63267495df

try project/flag config

view details

push time in 12 days

PR opened google/web-stories-wp

Define flags configuration
+5 -0

0 comment

1 changed file

pr created time in 12 days

create barnchgoogle/web-stories-wp

branch : integr/cov4

created branch time in 12 days

push eventgoogle/web-stories-wp

Carlos Kelly

commit sha 9c24ffc3f3c642d9d457aa02fb697b5c8b45d2ac

Add Keyboard Events to New Font Picker Remove unused import.

view details

Carlos Kelly

commit sha 7da4a6931689b420c828894468df69122b83c5df

Remove tabbing for navigating fonts.

view details

Carlos Kelly

commit sha 803f2ebf20a408ab9235e711fcef528024392c2e

Added search to font picker.

view details

Carlos Kelly

commit sha 2ab9170d71f0e08b48128433a2cd70bb308f960c

Fixed props and updated input type

view details

Carlos Kelly

commit sha 654ec4ee85aa7f62f44a412b7891bcaf605a1f46

Add aria props and debounce callback.

view details

Carlos Kelly

commit sha ba476d3c577823d011e28c99368e220820cf6902

Remove unused useMemo

view details

Carlos Kelly

commit sha 566155fff734b4106d3ad24e4a505d0c193b6b18

Fix tests for new debounced callback

view details

Carlos Kelly

commit sha d110efa76b0d75b8d849a38e20718f6d3444205e

Add Keyboard Events to New Font Picker Remove unused import.

view details

Carlos Kelly

commit sha 4c631ea51099c874e9d370c7a04ccf349d2ab196

Remove tabbing for navigating fonts.

view details

Carlos Kelly

commit sha a8b197c360144df4cfca287eaf968402b5740df5

Added search to font picker.

view details

Carlos Kelly

commit sha 8904c9eaab044ba75f3629fed0d265553b3878ec

Fixed props and updated input type

view details

Carlos Kelly

commit sha 0e318ad43016965eb6addd0e154cb2e363af3089

Add aria props and debounce callback.

view details

Carlos Kelly

commit sha a5c0fa05f48b8e681e77ab61987c0db9962df152

Fixed font loading, Added Esc test.

view details

Carlos Kelly

commit sha 3d3d667a736571d3c7975d6e07e8ca4ed1c6f904

Focus search input on font picker open.

view details

Carlos Kelly

commit sha 50de7ea492667a6c198bd14fd1e8d79dd5fb6217

Open picker using ArrowDown when focused.

view details

Carlos Kelly

commit sha 7f486b99dd817b2fee1b9c023bb5faca43f131cf

Adding dialog role to prevent double-key events.

view details

Dima Voytenko

commit sha 6ff7f8b342ced1b797226e667756d7f0ed339f98

Test Percy

view details

Miina Sikk

commit sha 5d9cb3e173a35abe44892eb2053734694d59ddeb

Use correct icons for radios.

view details

Miina Sikk

commit sha d729d8d0e58b432184a4f6046a109ba1e89e4a88

Restore mousetrap to address it separately.

view details

Miina Sikk

commit sha 095b146b1c19f678b68cd715010e824c9ed17943

Display whiteout on text and only when it's not Fill.

view details

push time in 12 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 04426fc7577e57560350c90187f50107c309052e

Tag unit tests coverage (#2751)

view details

push time in 12 days

delete branch google/web-stories-wp

delete branch : integr/codecov-flags

delete time in 12 days

PR merged google/web-stories-wp

Reviewers
Tag unit tests coverage cla: yes
+1 -0

2 comments

1 changed file

dvoytenko

pr closed time in 12 days

push eventgoogle/web-stories-wp

dependabot-preview[bot]

commit sha 3b0415269c5ddda02bb696e9438a5b1a2efa69d2

Bump @testing-library/react from 10.4.0 to 10.4.2 (#2714)

view details

Jonny Harris

commit sha 51ff8b5f80a735cccb810d057bc6b30139577679

WordPress: add some filters to customize behavior (#2667)

view details

dependabot-preview[bot]

commit sha 1df75aab6326afb8c38e6314e4474cb65987f1a5

Bump @storybook/addon-actions from 6.0.0-beta.34 to 6.0.0-beta.36 (#2728)

view details

dependabot-preview[bot]

commit sha 4c1d3ed5189c99cba2ffb185eb91c2d51973ce64

Bump @storybook/react from 6.0.0-beta.33 to 6.0.0-beta.36 (#2724)

view details

dependabot-preview[bot]

commit sha 92a7f739fbace3027ae7de6da3a00f65b86f1edb

Bump uuid from 8.1.0 to 8.2.0 (#2697) Bumps [uuid](https://github.com/uuidjs/uuid) from 8.1.0 to 8.2.0. - [Release notes](https://github.com/uuidjs/uuid/releases) - [Changelog](https://github.com/uuidjs/uuid/blob/master/CHANGELOG.md) - [Commits](https://github.com/uuidjs/uuid/compare/v8.1.0...v8.2.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 5175d66d344c048303ba826e28fc7e2a71f0f024

Bump @storybook/addon-viewport from 6.0.0-beta.34 to 6.0.0-beta.36 (#2720) Bumps [@storybook/addon-viewport](https://github.com/storybookjs/storybook/tree/HEAD/addons/viewport) from 6.0.0-beta.34 to 6.0.0-beta.36. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.36/addons/viewport) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 4d2677eff014f27117d05e75624f00040b9a8a03

Bump @storybook/addon-backgrounds from 6.0.0-beta.33 to 6.0.0-beta.36 (#2723) Bumps [@storybook/addon-backgrounds](https://github.com/storybookjs/storybook/tree/HEAD/addons/backgrounds) from 6.0.0-beta.33 to 6.0.0-beta.36. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.36/addons/backgrounds) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha bc5c3e093bc66aad57f97eed12eb3b36b797c54d

Bump @storybook/addon-a11y from 6.0.0-beta.34 to 6.0.0-beta.36 (#2726)

view details

dependabot-preview[bot]

commit sha 086c5978508ac624cf612c0a603fa175e55ed544

Bump @storybook/addon-knobs from 6.0.0-beta.31 to 6.0.0-beta.36 (#2721)

view details

dependabot-preview[bot]

commit sha 081122c789c48e7e80de9e119943510f87f380b1

Bump @storybook/client-api from 6.0.0-beta.33 to 6.0.0-beta.36 (#2719)

view details

dependabot-preview[bot]

commit sha fd2a4cb010caddb6aa3f12e53661d4d8c22761e1

Bump @storybook/addon-storysource from 6.0.0-beta.33 to 6.0.0-beta.36 (#2727)

view details

dependabot-preview[bot]

commit sha 4d1c7634ea1cd075685b09563cc0764d22ec263e

Bump @testing-library/react from 10.4.2 to 10.4.3 (#2729)

view details

Pascal Birchler

commit sha ec47deba7f301142422b3b62ccaa027b26f800ea

Small UI refinements (#2620)

view details

dependabot-preview[bot]

commit sha bc5b422691bf3d89a56e98a78d5312bfb5092392

Bump @wordpress/dependency-extraction-webpack-plugin from 2.7.0 to 2.8.0 (#2741) Bumps [@wordpress/dependency-extraction-webpack-plugin](https://github.com/WordPress/gutenberg/tree/HEAD/packages/dependency-extraction-webpack-plugin) from 2.7.0 to 2.8.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/packages/dependency-extraction-webpack-plugin/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/dependency-extraction-webpack-plugin@2.8.0/packages/dependency-extraction-webpack-plugin) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha ceb5979bc5d0c2f7fdded4f9768760af46e04a97

Bump @wordpress/components from 9.8.0 to 9.9.0 (#2736) Bumps [@wordpress/components](https://github.com/WordPress/gutenberg/tree/HEAD/packages/components) from 9.8.0 to 9.9.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/changelog.txt) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/components@9.9.0/packages/components) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 7f6f3939d05ab4f8119855d7870338d2fd776e6c

Bump @wordpress/element from 2.14.0 to 2.15.0 (#2737) Bumps [@wordpress/element](https://github.com/WordPress/gutenberg/tree/HEAD/packages/element) from 2.14.0 to 2.15.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/packages/element/CHANGELOG.md) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/element@2.15.0/packages/element) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha bb4e5f38a59fcae48ed1024a6b2a340698e60615

Bump @wordpress/api-fetch from 3.17.0 to 3.18.0 (#2738) Bumps [@wordpress/api-fetch](https://github.com/WordPress/gutenberg/tree/HEAD/packages/api-fetch) from 3.17.0 to 3.18.0. - [Release notes](https://github.com/WordPress/gutenberg/releases) - [Changelog](https://github.com/WordPress/gutenberg/blob/master/changelog.txt) - [Commits](https://github.com/WordPress/gutenberg/commits/@wordpress/api-fetch@3.18.0/packages/api-fetch) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha fbb40f98b9cd900686b925a116326ef2e6c36c43

Bump @storybook/addon-docs from 6.0.0-beta.34 to 6.0.0-beta.36 (#2743) Bumps [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/HEAD/addons/docs) from 6.0.0-beta.34 to 6.0.0-beta.36. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v6.0.0-beta.36/addons/docs) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

dependabot-preview[bot]

commit sha 568da58e3089d019e929a0434ec310ce6b5eabc0

Bump @storybook/client-logger from 6.0.0-beta.34 to 6.0.0-beta.36 (#2735)

view details

dependabot-preview[bot]

commit sha a61f693c3da3b4da1c17537e2058418afa4d99ed

Bump @testing-library/dom from 7.17.0 to 7.18.0 (#2739) Bumps [@testing-library/dom](https://github.com/testing-library/dom-testing-library) from 7.17.0 to 7.18.0. - [Release notes](https://github.com/testing-library/dom-testing-library/releases) - [Changelog](https://github.com/testing-library/dom-testing-library/blob/master/CHANGELOG.md) - [Commits](https://github.com/testing-library/dom-testing-library/compare/v7.17.0...v7.18.0) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

view details

push time in 12 days

PR opened google/web-stories-wp

Reviewers
Tag unit tests coverage
+1 -0

0 comment

1 changed file

pr created time in 12 days

create barnchgoogle/web-stories-wp

branch : integr/codecov-flags

created branch time in 12 days

Pull request review commentgoogle/web-stories-wp

[WIP] Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * Internal dependencies+ */+import { useStory } from '../../../app/story';++export function initHelpers(data) {+  async function getElements() {+    const storyContext = await data.fixture.renderHook(() => useStory());+    return storyContext.state.currentPage.elements;+  }++  async function addInitialText() {+    await data.fixture.events.click(data.fixture.editor.library.textAdd);++    const [{ id: bgId }, { id: textId }] = await getElements();+    data.bgId = bgId;+    data.textId = textId;++    await data.fixture.editor.canvas.framesLayer+      .frame(data.textId)+      .waitFocusedWithin();+  }++  function getTextContent() {+    return data.fixture.editor.canvas.framesLayer.frame(data.textId)+      .textContent;+  }++  async function richTextHasFocus() {+    await data.fixture.editor.canvas.waitFocusedWithin();+  }++  function repeatPress(key, count) {+    let remaining = count;+    const press = () => {+      if (remaining === 0) {+        return true;+      }+      remaining--;+      return data.fixture.events.keyboard.press(key).then(press);+    };+    return press();+  }++  async function setSelection(startOffset, endOffset) {+    await data.fixture.events.keyboard.shortcut('mod+a');

I'm actually really surprised mod+a works b/c I'd assume it's a OS-level shortcut. But great if it does, of course. Elsewhere I did a triple-click to select all.

barklund

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

[WIP] Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * Internal dependencies+ */+import { useStory } from '../../../app/story';++export function initHelpers(data) {+  async function getElements() {+    const storyContext = await data.fixture.renderHook(() => useStory());+    return storyContext.state.currentPage.elements;+  }++  async function addInitialText() {+    await data.fixture.events.click(data.fixture.editor.library.textAdd);++    const [{ id: bgId }, { id: textId }] = await getElements();+    data.bgId = bgId;+    data.textId = textId;++    await data.fixture.editor.canvas.framesLayer+      .frame(data.textId)+      .waitFocusedWithin();+  }++  function getTextContent() {+    return data.fixture.editor.canvas.framesLayer.frame(data.textId)+      .textContent;+  }++  async function richTextHasFocus() {+    await data.fixture.editor.canvas.waitFocusedWithin();+  }++  function repeatPress(key, count) {+    let remaining = count;+    const press = () => {+      if (remaining === 0) {+        return true;

Nit: Promise.resolve(true) to have a consistent return type?

barklund

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

[WIP] Added integration tests for inline text formatting

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++/**+ * Internal dependencies+ */+import { Container } from '../container';++/**+ * The editor's canvas. Includes: display, frames, editor layers, carousel,

Update.

barklund

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

[WIP] Added integration tests for inline text formatting

 class Frame extends Container {   constructor(node, path) {     super(node, path);   }++  get textContent() {+    return this.node.querySelector('[data-testid="textFrame"]')?.innerHTML;

I feel like querySelector('p') is the best here and fairly semantic.

barklund

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

[WIP] Added integration tests for inline text formatting

 class Frame extends Container {   constructor(node, path) {     super(node, path);   }++  get textContent() {

Since it's the innerHTML let's call it that?

barklund

comment created time in 13 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 5b31eb46bfb803cccea7c9c7dea956cc1ff1afcd

container.waitReady

view details

push time in 13 days

pull request commentgoogle/web-stories-wp

[TEST + WIP] Text edit mode + resizing/rotation

@miina What I'm wondering is: maybe we should just follow your previous pull request where you were rearranging the the order of the movable. We could potentially use the exact same version of the singleSelectionMovable we already do as long as it's on top of the edit layer. Right now we hide selection as soon as the editing element is set, but what if we continued to show it, just for the single selection and when some getDefinitionForType(type).showSelectionInEditMode === true. WDYT?

miina

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

[TEST + WIP] Text edit mode + resizing/rotation

 function EditLayerForElement({ element }) {         }       }}     >-      <EditPageArea ref={pageAreaRef} showOverflow={editModeGrayout}>+      <EditPageArea ref={pageAreaRef} showOverflow={showOverFlow}>

I think we should actually always show overflow. I can't think of any case where we wouldn't want it.

miina

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

[TEST + WIP] Text edit mode + resizing/rotation

 import { useUnits } from '../../units'; const Wrapper = styled.div` 	${elementWithPosition} 	${elementWithSize}-	${elementWithRotation}+	${({ hasEditModeMovable }) => !hasEditModeMovable && elementWithRotation}$

Why hide the rotation? And also why the tail $?

miina

comment created time in 13 days

issue openedgoogle/web-stories-wp

Page grid view should support keyboard navigation

Feature Description

When inside the page grid, a user should be able to:

  1. Use <kbd>tab</kbd> to jump between "Back" button, "Preview size" range control (three stops), and the page list.
  2. When jumping to the page list the currently selected page should be focused instead. Not the whole list.
  3. Use ↕️ and ↔️ keys to navigate through the grid horizontally and vertically, and with wrapping.
  4. Use <kbd>mod+↕️</kbd> and <kbd>mod+↔️</kbd> to reorder pages.
  5. Use <kbd>Enter</kbd> to select a page.
  6. The focus should be trapped inside the dialog. E.g. if at any point the focus leaves the dialog while it's still open, the focus should be returned back to the dialog.
  7. Use <kbd>Esc</kbd> to exit the dialog at any time.

Additional Context

In some form, all of these keys are already implemented (in a simpler form) in the useCarouselKeys.js, but need more general implementation here.


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

<!-- One or more bullet points for acceptance criteria. -->

Implementation Brief

<!-- One or more bullet points for how to technically implement the feature. -->

created time in 13 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 3ed44c32985a5636dc721803c8d4b36f731ae9b1

debugging

view details

push time in 13 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha cd22a4842362358269b9b1ace74fbaf4d7284e20

debugging

view details

push time in 13 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 0971e4cc1b7e0c30cd5b26db89535fd326294796

lints

view details

push time in 13 days

issue commentampproject/amphtml

Way to condition amp-auto-ads on amp-access

@calebcordry @lannka How would you recommend we proceed here? I'd like to see if we can keep it moving.

kushal

comment created time in 13 days

push eventgoogle/web-stories-wp

Carlos Kelly

commit sha 9c24ffc3f3c642d9d457aa02fb697b5c8b45d2ac

Add Keyboard Events to New Font Picker Remove unused import.

view details

Carlos Kelly

commit sha 7da4a6931689b420c828894468df69122b83c5df

Remove tabbing for navigating fonts.

view details

Carlos Kelly

commit sha 803f2ebf20a408ab9235e711fcef528024392c2e

Added search to font picker.

view details

Carlos Kelly

commit sha 2ab9170d71f0e08b48128433a2cd70bb308f960c

Fixed props and updated input type

view details

Carlos Kelly

commit sha 654ec4ee85aa7f62f44a412b7891bcaf605a1f46

Add aria props and debounce callback.

view details

Carlos Kelly

commit sha ba476d3c577823d011e28c99368e220820cf6902

Remove unused useMemo

view details

Carlos Kelly

commit sha 566155fff734b4106d3ad24e4a505d0c193b6b18

Fix tests for new debounced callback

view details

Carlos Kelly

commit sha d110efa76b0d75b8d849a38e20718f6d3444205e

Add Keyboard Events to New Font Picker Remove unused import.

view details

Carlos Kelly

commit sha 4c631ea51099c874e9d370c7a04ccf349d2ab196

Remove tabbing for navigating fonts.

view details

Carlos Kelly

commit sha a8b197c360144df4cfca287eaf968402b5740df5

Added search to font picker.

view details

Carlos Kelly

commit sha 8904c9eaab044ba75f3629fed0d265553b3878ec

Fixed props and updated input type

view details

Carlos Kelly

commit sha 0e318ad43016965eb6addd0e154cb2e363af3089

Add aria props and debounce callback.

view details

Carlos Kelly

commit sha a5c0fa05f48b8e681e77ab61987c0db9962df152

Fixed font loading, Added Esc test.

view details

Carlos Kelly

commit sha 3d3d667a736571d3c7975d6e07e8ca4ed1c6f904

Focus search input on font picker open.

view details

Carlos Kelly

commit sha 50de7ea492667a6c198bd14fd1e8d79dd5fb6217

Open picker using ArrowDown when focused.

view details

Carlos Kelly

commit sha 7f486b99dd817b2fee1b9c023bb5faca43f131cf

Adding dialog role to prevent double-key events.

view details

Carlos Kelly

commit sha 4296f51e8a6b18d5195fec479ae272643ec464e3

Merge pull request #2313 from google/feature/font-picker-search Workspace: Search functionality inside new Font Picker

view details

Dillon Mulroy

commit sha d4e2a69640a35058294a17ceba3370f336d2b76e

refactor selector (#2710)

view details

Dima Voytenko

commit sha a9f1a07aeab253d6b322762f601309ee788ec592

Replace existing test containers for frames (#2686) * Replace existing test containers * catch up focused checks * fix multi-selection tests

view details

Dima Voytenko

commit sha 24de69ab3411dd2a34a38ac8679cfc5f243b7a3e

Provide a separate type for TextOutputWithUnits to remove dev warnings (#2712)

view details

push time in 13 days

issue commentampproject/amphtml

FR: Support "add to homescreen" banner/button for PWAs

/cc @nainar

ericlindley-g

comment created time in 13 days

pull request commentgoogle/web-stories-wp

Workspace: Refactor useCanvas Selector

Thanks!

dmmulroy

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

Dashboard: Initial Karma integration + setup

+name: Dashboard Integration Tests++on:+  push:+    branches:+      - master+      - release/*+  pull_request:++jobs:+  karma:+    runs-on: ubuntu-latest+    steps:+      - name: Checkout+        uses: actions/checkout@v2++      - name: Read .nvmrc+        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"+        id: nvm++      - name: Setup Node+        uses: actions/setup-node@v1+        with:+          node-version: ${{ steps.nvm.outputs.NVMRC }}++      - name: Setup npm cache+        uses: pat-s/always-upload-cache@v1.1.4+        with:+          path: node_modules+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}+          restore-keys: |+            ${{ runner.os }}-npm-${{ env.cache-name }}-+            ${{ runner.os }}-npm-+            ${{ runner.os }}-++      - name: Install dependencies+        run: npm ci+        env:+          CI: true++      - name: Run dashboard integration tests+        run: npm run test:karma:dashboard -- --headless --viewport=1600:1000

Just for context why this is also good: we will soon be adding more test versions like this:

run: npm run test:karma:dashboard -- --headless --viewport=size2
run: npm run test:karma:dashboard -- --headless --viewport=size3
run: npm run test:karma:dashboard -- --headless --viewport=size2 --browser=firefox

etc

dmmulroy

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

Dashboard: Initial Karma integration + setup

 import { TEXT_ELEMENT_DEFAULT_FONT } from '../../app/font/defaultFonts'; import Layout from '../../app/layout'; import { DATA_VERSION } from '../../migration'; import { createPage } from '../../elements';-import FixtureEvents from './events';+import FixtureEvents from '../../../../../karma/events';

Yep. Exactly.

dmmulroy

comment created time in 13 days

Pull request review commentgoogle/web-stories-wp

Dashboard: Initial Karma integration + setup

+/*+ * Copyright 2020 Google LLC+ *+ * Licensed under the Apache License, Version 2.0 (the "License");+ * you may not use this file except in compliance with the License.+ * You may obtain a copy of the License at+ *+ *     https://www.apache.org/licenses/LICENSE-2.0+ *+ * Unless required by applicable law or agreed to in writing, software+ * distributed under the License is distributed on an "AS IS" BASIS,+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.+ * See the License for the specific language governing permissions and+ * limitations under the License.+ */++'use strict';++/**+ * Internal dependencies+ */+const {+  storiesDashboard: webpackConfig,

Right. That's because I haven't merged it yet :) But it's actually very important for us to collect coverage. Could you pls cherrypick the webpack.config.test.cjs from https://github.com/google/web-stories-wp/pull/2583 and use it instead? It will do what you want, just slightly differently.

dmmulroy

comment created time in 13 days

push eventgoogle/web-stories-wp

Dima Voytenko

commit sha 24de69ab3411dd2a34a38ac8679cfc5f243b7a3e

Provide a separate type for TextOutputWithUnits to remove dev warnings (#2712)

view details

push time in 13 days

delete branch google/web-stories-wp

delete branch : integr/fix-warn1

delete time in 13 days

more